Javascript井字棋-1

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

  1. 棋盘
  2. 下棋
  3. 判断输赢

这三步是最基本井字棋的逻辑

可以简单的实现玩家对战的功能

但在本篇文献中

我采取的是电脑跟玩家下

所以我们还需要撕开电脑的下法

  1. 什么地方可以下
  2. 下什么地方最好
  3. 垃圾步

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

  1. 棋盘

棋盘这里我才用了一个无序列表ul

以及九个li标签当作镜子棋的九个格子

并给他们都设置了样式

这里不多细讲 如图下

Javascript井字棋-1_第1张图片

Li标签的value表示这个格子中的状态

为0的时候表示这里没有子

为1的时候表示这里是玩家下的子

为2的时候表示这里是电脑下的子

2.下棋

首先获取到ul标签下的li标签

然后给这些li标签全部绑定点击事件

当li标签被点击时

首先判断这个li标签的状态(value)

如果为0则表示这里可以下

否则的话本次下棋作废return

若此处无子

就可以创建一个div

并且给div添加class类

然后添加到被点击的li标签中

达到画子的效果

然后要给被点击的li标签

的value赋值

玩家赋1 电脑赋2

可供后面进行判断输赢及下子时使用

如图下

Javascript井字棋-1_第2张图片

这样我们最基本的棋盘以及下棋的功能就完善啦

由于此项目对于新手来说过于硬核

故分几次讲完

若有更好的方法

欢迎指点

你可能感兴趣的:(javascript)