五子棋的小代码

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

幽ifree

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

阅读量605

点赞数

分类专栏： html代码文章标签：五子棋 html5 代码 js

本文链接：https://blog.csdn.net/qq_32188101/article/details/52847949

版权

html代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
   <title>五子棋</title>
   <meta charset="utf-8">
</head>
<body>
    <canvas id="canvas" width="600" height="600" style="background:url('wuzi/bak.jpg')"></canvas>
    <script type="text/javascript">
        // 画布
        var cxt = document.getElementById('canvas').getContext('2d');

        // 棋盘
        for (var i = 0; i < 15; i++) {
           for (var j = 0; j < 15; j++) {
               cxt.strokeRect(i*40,j*40,40,40);
           };
        };

        // 棋子
        // 白棋
        var white = new Image();
        white.src='wuzi/white.png';

        // 黑棋
        var black = new Image();
        black.src='wuzi/black.png';

        // 开局的状态没有棋子0 白1 黑2
        // 行
        var chess = new Array(15);
        for (var i = 0; i < 15; i++) {
           // 列
           chess[i] = new Array(15);
           for (var j = 0; j < 15; j++) {
               chess[i][j] = 0;
           };
        };

        // 下棋
        document.getElementById('canvas').onclick = play;
        //判断下的是白子还是黑子
        var isWhite = false;
        function play(e){
           var col = Math.round(e.clientX / 40); //列
           var row = Math.round(e.clientY / 40); //行

           // 判断当前位置有没有子
           if (chess[row][col] != 0) {
                  alert('你傻啊!这里有子');
                  return;
           };

           // 画白子
           if (isWhite) {
               cxt.drawImage(white,col*40-18,row*40-18);
               // 存储状态
               chess[row][col] = 1;
               win(row,col,1);
               isWhite = false;
           }else{
               // 画黑子
               cxt.drawImage(black,col*40-18,row*40-18);
               // 存储状态
               chess[row][col] = 2;
               win(row,col,2);
               isWhite = true;
           }

           // 判断输赢的函数
           function win(row,col,n){
                  var sum = 1;
                  var c = col;
                  var r = row;
                  // 水平
                  while(chess[row][col-1]==n&&col-1>0){
                      sum++;
                      col--;
                  }
                  col = c;
                  row = r;
                  while(chess[row][col+1]==n&&col+1<15){
                      sum++;
                      col++;
                  }
                  if (sum>=5) {
                      if (n==1) {
                          alert('白棋胜,确定重新开局');
                      }else{
                          alert('黑棋胜,确定重新开局');
                      }
                      restore();
                  };

                  // 垂直
                  sum = 1;
                  col = c;
                  row = r;
                  while(chess[row-1][col]==n&&row-1>0){
                      sum++;
                      row--;
                  }
                  col = c;
                  row = r;
                  while(chess[row+1][col]==n&&row+1<15){
                      sum++;
                      row++;
                  }
                  if (sum>=5) {
                      if (n==1) {
                          alert('白棋胜,确定重新开局');
                      }else{
                          alert('黑棋胜,确定重新开局');
                      }
                      restore();
                  };

                  // 斜边
                  // 右上左下
                  sum = 1;
                  col = c;
                  row = r;
                  while(chess[row-1][col+1]==n&&row-1>0&&col+1<15){
                      sum++;
                      row--;
                      col++;
                  }
                  col = c;
                  row = r;
                  while(chess[row+1][col-1]==n&&row+1<15&&col-1>0){
                      sum++;
                      row++;
                      col--;
                  }
                  if (sum>=5) {
                      if (n==1) {
                          alert('白棋胜,确定重新开局');
                      }else{
                          alert('黑棋胜,确定重新开局');
                      }
                      restore();
                  };
                // 左上右下
                  sum = 1;
                  col = c;
                  row = r;
                  while(chess[row-1][col-1]==n&&row-1>0&&col-1>0){
                      sum++;
                      row--;
                      col--;
                  }
                  col = c;
                  row = r;
                  while(chess[row+1][col+1]==n&&row+1<15&&col+1<15){
                      sum++;
                      row++;
                      col++;
                  }
                  if (sum>=5) {
                      if (n==1) {
                          alert('白棋胜,确定重新开局');
                      }else{
                          alert('黑棋胜,确定重新开局');
                      }
                      restore();
                  };
           }
        }

        function restore(){
           window.location.reload();
        }
    </script>
</body>

</html>

幽ifree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五子棋的小代码

五子棋 // 画布 var cxt = document.getElementById('canvas').getContext('2d'); // 棋盘 for (var i = 0; i for (var j = 0; j
复制链接

扫一扫

专栏目录