html javascript 五子棋（有效代码大概78行）

最新推荐文章于 2024-04-28 15:25:50 发布

缘起性本空

最新推荐文章于 2024-04-28 15:25:50 发布

阅读量460

点赞数 1

分类专栏：生活杂谈

本文链接：https://blog.csdn.net/r77683962/article/details/115221424

版权

生活杂谈专栏收录该内容

47 篇文章 0 订阅

订阅专栏

运行效果：

代码：

<!DOCTYPE html>
<html>
   <body>
       <canvas id="chess" width="450px" height="450px"></canvas>
       <script>
           var role = "red";   //红方
           var chressBord = []; //棋盘
           var chess = document.getElementById("chess");
           var context = chess.getContext('2d');

           chess.onclick = function(event)// 红绿双方下棋
           {
               role == "red" ? role = "green" : role = "red";
               var i = Math.floor(event.offsetX / 30);
               var j = Math.floor(event.offsetY / 30);

               if(chressBord[i][j] == 0)
               {
                   DrawChess(i, j, role);
                   chressBord[i][j] = role; //占位置
                   if (CheckWin(i, j, role) == true)
                   {
                       alert(role + " is win!");
                   }
               }
           }

           var CheckWin = function(x0, y0)
           {
               var p = {x: x0, y: y0};

               if (CheckOneDirection(p, 0, 1)
                   || CheckOneDirection(p, 1, 0)
                   || CheckOneDirection(p, -1, 1)
                   || CheckOneDirection(p, 1, 1)) //直线判断
                   return true;

               return false;
           }

           var DrawChess = function(i, j, role) //画棋子
           {
               context.beginPath();
               context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
               context.closePath();
               context.fillStyle = role;
               context.fill();
           }
       </script>
   </body>
</html>

缘起性本空

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html javascript 五子棋（有效代码大概78行）

运行效果：代码：<!DOCTYPE html><html> <head> <style type="text/css"> canvas { display: block; cursor: pointer; } </style> <...
复制链接

扫一扫