Javascript井字棋-1 javascript

首先我们来讲井字棋的思路

棋盘
下棋
判断输赢

这三步是最基本井字棋的逻辑
可以简单的实现玩家对战的功能
但在本篇文献中
我采取的是电脑跟玩家下
所以我们还需要撕开电脑的下法

什么地方可以下
下什么地方最好
垃圾步

基于上面的逻辑我们开始撰写我们的代码

棋盘

棋盘这里我才用了一个无序列表ul
以及九个li标签当作镜子棋的九个格子
并给他们都设置了样式
这里不多细讲如图下

文章图片

【Javascript井字棋-1】Li标签的value表示这个格子中的状态
为0的时候表示这里没有子
为1的时候表示这里是玩家下的子
为2的时候表示这里是电脑下的子
2.下棋
首先获取到ul标签下的li标签
然后给这些li标签全部绑定点击事件
当li标签被点击时
首先判断这个li标签的状态(value)
如果为0则表示这里可以下
否则的话本次下棋作废return
若此处无子
就可以创建一个div
并且给div添加class类
然后添加到被点击的li标签中
达到画子的效果
然后要给被点击的li标签
的value赋值
玩家赋1 电脑赋2
可供后面进行判断输赢及下子时使用
如图下