cavans五子棋游戏

我就是我 2023-07-11 11:12 140阅读 0赞

## 第一步写样式： ##

利用cavans画布写游戏，首先要在html写上如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]  
这几行代码就是先给画布标签属性设置宽高，然后转成块，，让画布距离浏览器边缘一段距离，添加个背景颜色，否则下棋时白棋看不到。

## 第二步写JavaScript(js): ##

写之前我们应该先考虑好写游戏需要的过程，这样我们就可以根据过程一步一步实现。我的具体想法如下：

1.绘制棋盘
          1.1 绘制表格的操作
    2.绘制棋子
          2.1 如何绘制棋子
          2.2 如何进行交互，点击下棋
          2.3 一人一次
          2.4 必须下到中心点，自瞄系统
          2.5 友军判断，已经有棋的地方不下，记录棋盘状态
    3.游戏胜负判断
          3.1 棋盘状态
    4.机器下棋（与电脑交互，目前没实现）

**按照这个过程写代码，首先绘制直线成为棋盘**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]  
上述代码就是画表格，首先得到元素，var是js中用来定义变量的，比较常用；然后返回绘制画布的环境；getContext() 方法就是用于返回一个用于在画布上绘图的环境，通常都是2d。第一个循环就是创建一个二维数组，记录棋盘的每个点的状态，是否有棋子，开始默认都为0；

第二个循环就是画棋盘，因为棋盘并不是位于画布边缘，是从（30，30）坐标开始画的，前两个是画竖线，从（30，30）到（30，420），后两个画横线，循环执行14次，形成14行14列的表格，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]  
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色，可以通过ctx.strokeStyle=“green”;改变。画好后这个方法必须被调用，否则棋盘不会有出现。  
**2. 1绘制棋子**  
![在这里插入图片描述][20200305115407155.png]  
上述代码是画圆，即是棋子，这是一个函数，方便下面调用，棋子需要三个参数，位置和颜色，画图之前要先提笔，否则就会按上次结束的地方开始画了。设置好颜色属性后需要调用填充方法即fill();

**2.2 如何进行交互，点击下棋**  
交互就是鼠标点击触发事件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]  
上述代码讲解：首先就是定义个数组，存放棋子颜色，step变量是记录点击次数，次数为奇数时是黑棋，偶数时为白棋，决定了两种棋子一种一次；mode数组变量，是为了判断哪个方向上棋子够五个，具体需要看下面讲解，第三个应该是右下，注释错了，里面参数就是代表要么加0要么加1，反方向就是要么减0要么减1，就是为了下面判断相邻棋子的颜色。  
在点击函数中定义变量存储坐标，

floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数，0.9取的是0整数
    offsetX是浏览器自带的属性，发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标，

第二个if判断就是让在没有棋子的地方可以点击下棋，有棋子的地方棋盘状态就记录了黑白，不为0就无法在下。  
在if中先调用画圆函数画棋子，根据次数显示的棋子颜色不同，同时也要改变棋子下的坐标的状态，使下一次不能在下。最后的几行就是下面判断输赢的函数了，下面讲解，同时点击次数变量数值也要增加。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 4]  
上面就是判断输赢函数的代码，参数有坐标，颜色，还有方向。在此函数里，console.log()只是为了打印，调试时候用的，可以不写。  
外围的if判断就是判断是否存在这个点，里面就是判断正方向和反方向的方法。  
count变量记录相同棋子次数。  
mode传入的时候是个数组，判断方向，在这里作为参数也是个数组，是指传入数组中的第一个数。相当于是个二维数组。  
循环五次是判断正反方向棋子总共的次数，最后的if判断就是五次同样颜色的棋子获胜。  
调用alert网页会弹出一个小窗口显示，location.reload();是为了结束之后自动刷新页面

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305110040205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305111945114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200305114022464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[20200305115407155.png]: https://img-blog.csdnimg.cn/20200305115407155.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200305120200843.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200305120255561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70