h5实现五子棋游戏 js原生实现

最新推荐文章于 2024-05-12 02:47:27 发布

郭胜_自强

最新推荐文章于 2024-05-12 02:47:27 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/GS2016/article/details/79075282

版权

这是一个使用HTML5和JavaScript实现的五子棋游戏。游戏通过Canvas绘制棋盘和棋子，同时包含了简单的AI算法，使得计算机可以进行走棋。玩家可以点击棋盘任意空位下棋，当一方连成五子时，游戏结束。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>郭胜学习项目-五子棋游戏-小小AI</title>
       <style>
           canvas {
               display: block;
               margin: 50px auto;
               box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
           }
       </style>
   </head>

   <body>
       <canvas id="guoshengcanvas" width="450px" height="450px"></canvas>
   </body>

</html>
<script>
   var chessBoard = [],
       me = true,
       over = false,
       wins = [],
       mywin = [],
       computerwin = [];
   /*
   * 初始化赢法数组
   * 郭胜
   * 三维数组
   */
   for(var i = 0; i < 15; i++) {
       wins[i] = [];
       for(var j = 0; j < 15; j++) {
           wins[i][j] = [];
       }
   }

   /*
   * 赢法种类：x轴向左，y轴向下，所有的赢法，即"|"放下
   * 郭胜
   */
   var count = 0;//赢法总数
   for(var i = 0; i < 15; i++) {
       for(var j = 0; j < 11; j++) {
           for(var k = 0; k < 5; k++) {
               wins[i][j + k][count] = true;
           }
           count++;
       }
   }

   /*
   * 赢法种类：x轴向下，y轴向左，所有的赢法，即"——"方向
   * 郭胜
   */
   for(var i = 0; i < 15; i++) {
       for(var j = 0; j < 11; j++) {
           for(var k = 0; k < 5; k++) {
               wins[j + k][i][count] = true;
           }
           count++;
       }
   }

最低0.47元/天解锁文章

郭胜_自强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5实现五子棋游戏 js原生实现

郭胜学习项目-五子棋游戏-小小AI canvas { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
复制链接

扫一扫