js+canvas实现简单的五子棋游戏

最新推荐文章于 2022-05-11 14:57:10 发布
最新推荐文章于 2022-05-11 14:57:10 发布
阅读量404 收藏
点赞数
文章标签： canvas 五子棋
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28020627/article/details/73395740
版权
<!DOCTYPE html>
<html>
<head>
<title></title>
  <style>


    button{


        position:absolute;
        margin-left: 50px;
        margin-top: 50px;
        width: 100px;
        height: 30px;


    }
    #reset{
       margin-top: 100px;
    }


  </style>
</head>
<body style="margin:0;padding:0">


<canvas id="canvas" width="600" height="600" style="background-color: #ccc"></canvas>
<button value="return" id="ret">悔棋</button>


<button value="return" id="reset">重置</button>
<!-- <script type="text/javascript" src="jquery-2.1.1.min.js"></script> -->
<script type="text/javascript">
   
  (function(window) {
      
      var cxt = document.getElementById("canvas").getContext("2d");
      var x = 100,
          y = 100,
          width = 300,
          height = 300;


      var colum = 30;
      var color = "#000";
      var circle = 7;
      var data = [];


      var dataX = [], dataY = [];




      
      
       function drawLine(cxt, x, y, x1, y1, stokeColor){
         var color;
         var sc;
         var temp;
         if(stokeColor == undefined)color = "#000";
         else color =  stokeColor
         temp = cxt.strokeStyle;
         cxt.strokeStyle = color;
         cxt.beginPath();
         cxt.moveTo(x,y);
         cxt.lineTo(x1,y1);
         cxt.stroke();
         cxt.strokeStyle = temp;
      }


      function drawCircle(cxt, x, y, r, color){


        if(color==undefined){
           cxt.strokeStyle = "#000";
        }else {
           cxt.fillStyle = color;


        }
        cxt.beginPath();
        cxt.arc(x,y,r,0,Math.PI*2);
        cxt.fill();
      }


      function putData(i,j){
          if(color == "#000"){
              data[i][j] = 1;
          }else{
            data[i][j] = 2;
          }
      }


     




      function init(){


          data = [];
          for(var i=0; i<height/colum+1; i++){
             data.push(new Array(width/colum+1));
          }


          for(var i=0; i<data.length; i++){
            for(var j=0; j<data.length; j++){
               data[i][j] = 0;
            }
          }


          cxt.rect(x,y,width,height);
          cxt.stroke();


          for(var i=1; i<10;i++){
              drawLine(cxt, x+i*colum, y, x+i*colum, y+height);
              drawLine(cxt, x, y+i*colum, x+width, y+i*colum);
          }
          color = "#FFF";
      }
     
      function validateReset(cxt){


          var width1  = document.getElementById("canvas").width;
          var height1 = document.getElementById("canvas").height;
          cxt.clearRect(0,0,width1,height1);
          init();




      }


      function ret(){


          var width1  = document.getElementById("canvas").width;
          var height1 = document.getElementById("canvas").height;
          cxt.clearRect(0,0,width1,height1);


          cxt.rect(x,y,width,height);
          cxt.stroke();


          for(var i=1; i<10;i++){
              drawLine(cxt, x+i*colum, y, x+i*colum, y+height);
              drawLine(cxt, x, y+i*colum, x+width, y+i*colum);
          }


          cxt.clearRect(0,0,width1,height1);


          cxt.rect(x,y,width,height);
          cxt.stroke();


          for(var i=1; i<10;i++){
              drawLine(cxt, x+i*colum, y, x+i*colum, y+height);
              drawLine(cxt, x, y+i*colum, x+width, y+i*colum);
          }


          if(color=="#FFF")
             color = "#000";
           else color = "#FFF";


           var tempX = dataX.pop();
           var tempY = dataY.pop();


           data[tempX][tempY] = 0;




          for(var i=0; i<data.length-1; i++){
            for(var j=0; j<data.length-1; j++){


               if(data[i][j]==1)
                  drawCircle(cxt, x+colum*i, y+colum*j, circle, "#000");
               else if(data[i][j]==2){
                  drawCircle(cxt, x+colum*i, y+colum*j, circle, "#FFF"); 
               }
               
            }
          }
      }






      function isWin(data){




          for(var i=0;i<data.length;i++){
            for(var j=0;j<data[i].length-4;j++){
              if((data[i][j]==1 && data[i][j+1]==1 && data[i][j+2]==1 && data[i][j+3]==1 && data[i][j+4]==1) ||
                (data[i][j]==2 && data[i][j+1]==2 && data[i][j+2]==2 && data[i][j+3]==2 && data[i][j+4]==2) 
                ){
                      
                      drawLine(cxt, x+colum*i, y+colum*j, x+colum*i, y+colum*j+colum, "#f00");
                      drawLine(cxt, x+colum*i, y+colum*j+colum, x+colum*i, y+colum*j+colum*2, "#f00");
                      drawLine(cxt, x+colum*i, y+colum*j+colum*2, x+colum*i, y+colum*j+colum*3, "#f00");
                      drawLine(cxt, x+colum*i, y+colum*j+colum*3, x+colum*i, y+colum*j+colum*4, "#f00");


                      if(data[i][j]==1){
                        return {
                          statu: true,
                          whowin: "Black"
                        }
                      }else if(data[i][j]==2){
                          return {
                           statu: true,
                           whowin: "White"
                        }
                      }


                      
              }




            }
          } 


          for(var i=0;i<data.length;i++){
            for(var j=0;j<data[i].length-4;j++){
              if((data[j][i]==1 && data[j+1][i]==1 && data[j+2][i]==1 && data[j+3][i]==1 && data[j+4][i]==1) ||
               (data[j][i]==2 && data[j+1][i]==2 && data[j+2][i]==2 && data[j+3][i]==2 && data[j+4][i]==2) 
                ){
                      


                      drawLine(cxt, x+colum*j, y+colum*i, x+colum*j+colum, y+colum*i, "#f00");
                      drawLine(cxt, x+colum*j+colum, y+colum*i, x+colum*j+colum*2, y+colum*i, "#f00");
                      drawLine(cxt, x+colum*j+colum*2, y+colum*i, x+colum*j+colum*3, y+colum*i, "#f00");
                      drawLine(cxt, x+colum*j+colum*3, y+colum*i, x+colum*j+colum*4, y+colum*i, "#f00");


                     if(data[j][i]==1){
                        return {
                          statu: true,
                          whowin: "Black"
                        }
                      }else if(data[j][i]==2){
                          return {
                           statu: true,
                           whowin: "White"
                        }
                      }
              }




            }
          } 






          for(var i=4;i<data.length;i++){
            for(var j=0;j<i+3;j++){
                  if(


                    (data[i][j]==1 && data[i-1][j+1]==1 && data[i-2][j+2]==1 && data[i-3][j+3]==1 && 
                    data[i-4][j+4]==1) 
                    || 
                    (data[i][j]==2 && data[i-1][j+1]==2 && data[i-2][j+2]==2 && 
                    data[i-3][j+3]==2 && data[i-4][j+4]==2) 


                    ){


                      drawLine(cxt, y+colum*i, x+colum*j, y+colum*i-colum, x+colum*j+colum, "#f00");
                      drawLine(cxt, y+colum*i-colum, x+colum*j+colum, y+colum*i-colum*2, x+colum*j+colum*2, 
                        "#f00");
                      drawLine(cxt, y+colum*i-colum*2, x+colum*j+colum*2, y+colum*i-colum*3, 
                        x+colum*j+colum*3, "#f00");
                      drawLine(cxt, y+colum*i-colum*3, x+colum*j+colum*3, y+colum*i-colum*4, 
                        x+colum*j+colum*4, "#f00");


                      if(data[i][j]==1){
                        return {
                          statu: true,
                          whowin: "Black"
                        }
                      }else if(data[i][j]==2){
                          return {
                           statu: true,
                           whowin: "White"
                        }
                      }






                  }
            }
          }






          for(var i=0;i<data.length-4;i++){
            for(var j=0;j<data.length-4;j++){
                  if(


                    (data[i][j]==1 && data[i+1][j+1]==1 && data[i+2][j+2]==1 && data[i+3][j+3]==1 && 
                    data[i+4][j+4]==1) 
                    || 
                    (data[i][j]==2 && data[i+1][j+1]==2 && data[i+2][j+2]==2 && 
                    data[i+3][j+3]==2 && data[i+4][j+4]==2) 


                    ){


                      drawLine(cxt, y+colum*i, x+colum*j, y+colum*i+colum, x+colum*j+colum, "#f00");
                      drawLine(cxt, y+colum*i+colum, x+colum*j+colum, y+colum*i+colum*2, x+colum*j+colum*2, 
                        "#f00");
                      drawLine(cxt, y+colum*i+colum*2, x+colum*j+colum*2, y+colum*i+colum*3, 
                        x+colum*j+colum*3, "#f00");
                      drawLine(cxt, y+colum*i+colum*3, x+colum*j+colum*3, y+colum*i+colum*4, 
                        x+colum*j+colum*4, "#f00");


                      if(data[i][j]==1){
                        return {
                          statu: true,
                          whowin: "Black"
                        }
                      }else if(data[i][j]==2){
                          return {
                           statu: true,
                           whowin: "White"
                        }
                      }






                  }
            }
          }








          return {
            statu:false
          }












      }




      document.getElementById("reset").onclick = function(e){
          validateReset(cxt);
          validateReset(cxt);//只调用一次会绘制一个圆形，具体原因不知道,这里调用两次可以解决
      }


      document.getElementById("ret").onclick = function(e){
          ret();
      }




      


      function getMouseClick(){
    
         window.onclick = function(e){


            if(x<=e.clientX && e.clientX<=x+width && y<= e.clientY && e.clientY <= y+height){
              


               if(color == "#000"){
                  color = "#FFF";
               }else if(color == "#FFF"){
                  color = "#000";
               }


                var vx = e.clientX;
                var vy = e.clientY; 


                var tx = Math.floor((vx - x)/colum);
                var ty = Math.floor((vy - y)/colum);


                var a =  x + colum*tx;
                var b =  y + colum*ty;


                var px1 = a;
                var py1 = b;


                var px2 = a+colum;
                var py2 = b;


                var px3 = a;
                var py3 = b+colum;


                var px4 = a+colum;
                var py4 = b+colum;


                var y1 = (vx-px1)*(vx-px1)+(vy-py1)*(vy-py1);
                var y2 = (vx-px2)*(vx-px2)+(vy-py2)*(vy-py2);
                var y3 = (vx-px3)*(vx-px3)+(vy-py3)*(vy-py3);
                var y4 = (vx-px4)*(vx-px4)+(vy-py4)*(vy-py4);


                var min = Math.min(y1,y2,y3,y4);


                if(min==y1){


                  if(!data[tx][ty]){
                     drawCircle(cxt, px1, py1, circle, color);
                     putData(tx,ty);
                     dataX.push(tx);
                     dataY.push(ty);
                     var temp = isWin(data); 
                     if(temp.statu){
                        
                        setTimeout(function(){
                          alert(temp.whowin+" Win!");
                            validateReset(cxt)
                            validateReset(cxt)
                        },200)
                       
                     }
                  }
                   
                }else if(min==y2){


                   if(!data[tx+1][ty]){
                     drawCircle(cxt, px2, py2, circle, color);
                     putData(tx+1,ty);


                     dataX.push(tx+1);
                     dataY.push(ty);
                     var temp = isWin(data);
                      if(temp.statu){
                        
                        setTimeout(function(){
                          alert(temp.whowin+" Win!");
                            validateReset(cxt)
                            validateReset(cxt)
                        },200)
                        
                     }


                   
                  }




                }else if(min==y3){


                   if(!data[tx][ty+1]){
                     drawCircle(cxt, px3, py3, circle, color);
                     putData(tx,ty+1);
                     dataX.push(tx);
                     dataY.push(ty+1);
                      var temp = isWin(data);
                      if(temp.statu){
                       
                        setTimeout(function(){
                           alert(temp.whowin+" Win!");
                            validateReset(cxt)
                            validateReset(cxt)
                        },200)
                        
                     }
                     
                  }




                }else if(min==y4){


                   if(!data[tx+1][ty+1]){
                     drawCircle(cxt, px4, py4, circle, color);
                     putData(tx+1,ty+1);
                     dataX.push(tx+1);
                     dataY.push(ty+1);
                     var temp = isWin(data);
                      if(temp.statu){
                        
                        setTimeout(function(){
                          alert(temp.whowin+" Win!");
                            validateReset(cxt)
                            validateReset(cxt)
                        },200)
                        
                     }
                  }




                }




                  
            }
            


         }//on click end
      }//函数结束




      init();
      getMouseClick();




  })(window)


 </script>


<!-- <script type="text/javascript" src="vue.min.js"></script> -->
<script>
  






</script>
</body>
</html>
中国星2014
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用canvas制作五子棋游戏
weixin_30449453的博客
05-07 540
要制作JS五子棋的话我们可以一开始来理清一下思路，这样对我们后来的编程是有好处的 1、棋盘使用canvas制作。canvas用来做这种不用太过复杂的图形的时候是很有用处的，下图是我制作的一个五子棋棋盘 2、确定你是想做PC端的还是做移动端的 3、点击的棋子是放在棋盘上，还是另建一个canvas画布 对于这个问题，我选择了新建一个canvas画布，如果不新建的话，如果想有撤回按钮(我这边...
canvas绘制五子棋
最新发布
qq_21277357的博客
01-02 125
【代码】canvas绘制五子棋。
js+canvas实现AI五子棋小游戏_☆往事随風☆的博客
☆往事随風☆的博客
09-09 2567
js实现AI五子棋小游戏一、前言二、开发流程（1）绘制棋盘（2）绘制棋子（3）玩家下棋（4）电脑下棋（5）悔棋功能（6）撤销悔棋功能三、完整游戏效果图四、运行结果展示五、项目源码 一、前言 使用 js+canvas+less 制作一个简易的AI五子棋小游戏。游戏中的AI玩家的实力十分强大,并且带有悔棋功能。这里就简单介绍一下js部分，游戏UI部分请看源码。 二、开发流程 （1）绘制棋盘 这里使用canvas绘制一个 15 x 15大小的棋盘。 // 绘制棋盘 function chessBoard
canvas实现五子棋游戏
weixin_30367543的博客
09-30 189
　　 使用canvas实现五子棋游戏的效果 不知不觉js的学习已有半年了，还没有写过自己的博客，明天就放假了，没有多少事情做，准备在近一段时间学习下canvas， 今天心血来潮做了个五子棋的domo，可实现基础的胜负判断，悔棋等功能，完整代码如下，若有不合适之处请多多指正！ <!DOCTYPE html> <html> <head lang="e...
基于canvas的五子棋
bash_winner的博客
02-19 993
前言：说在前面的画 可能，一进来最关心的就是，实现的到底是个啥样，那就来一张动图呗，先声明一下，关于电脑的落子算法，本文只是简单的实现了一下（在玩家周围一格随机获取位置），如果懂机器学习可以引入机器学习的相关算法，来获取电脑应该下载哪（位置） 看过我前几篇关于canvas的相关介绍和用法，你会发现，其实绘制棋盘。在指定的位置绘制棋子都是一件容易的事情（在指定位置绘制棋子，关键是：像素位置和坐标之...
JS+canvas实现的五子棋游戏【人机大战版】
10-19
JS+canvas实现的五子棋游戏人机大战版结合了HTML5的Canvas API、JavaScript和人工智能技术。通过Canvas进行图形绘制，实现棋盘的界面展示；通过JavaScript处理游戏逻辑，包括棋子的放置、游戏状态的更新以及AI的决策...
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
原生JS+Canvas实现五子棋游戏实例
10-19
以上是原生JS+Canvas实现五子棋游戏的基本思路和关键代码。在实际开发中，还需要考虑用户交互、错误处理、游戏规则的完善等其他细节。通过不断优化和迭代，我们可以创建一个功能完整、用户体验良好的五子棋游戏。
JavaScript+canvas 实现五子棋游戏
一个鮕娘的博客
05-25 1342
效果截图：  代码实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas 实现五子棋 demo
03-20
canvas 实现五子棋 的示例,纯HTML5, 算法上可能还需要优化
js实现简易五子棋游戏
独学而无友，则孤陋而寡闻
06-19 5399
一.源码 1.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
canvas 五子棋游戏
weixin_33978044的博客
02-11 144
效果 代码 &lt;!DOCTYPE html&gt; &lt;html lang="zh_CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;五子棋&lt;/title&gt; &lt;script src="https://code.j...
HTML5+JS 《五子飞》游戏实现（二）路线分析和资源准备
weixin_30342209的博客
01-05 55
上一节里沃特与我们分享了《五子飞》的下棋规则，可能有些伙伴看得不清楚，像我们码农还是看到代码比较靠谱。下面就把可以走棋的路线跟大家说一下。 假设从左上角开始，以0开始编号，往右数（没看第一节棋盘的先去看一下）（因为路线比较简单，就直接写固定的数据了）： 1.横着走有5条直线： var lines_h = [ [ 0, 1, 2, 3, 4], ...
使用Javascript 实现游戏效果
前端开发中遇到的问题
04-29 856
最终效果图： 1、 使用html 5 的canvas 技术和javascript实现弹球游戏 整体流程图： 1.1 html5 canvas技术的使用 首先在html页面中定义画布。 <canvas bgcolor = "#FFF" id="gamePane" width="1000" height="500" tabindex="...
原生js制作简单的五子棋效果
weixin_53213705的博客
05-11 541
效果图： 这个棋盘是我在网上扣的图，总的来说，就是两个按钮 一个棋盘，我把图片当成背景图，在section里面放了15 × 15 个div（这个可以在js里面加div也可以在html写‘ div*225’），利用padding 和弹性布局 确保div正好在点上。 section{ background-image: url(./img/五子棋.png); width: 555px; height: 555px..
新手如何用 js 写一个五子棋
Yao_Huang_的博客
10-04 1030
最新一次的作业，需要用所学到的知识写一个前端小游戏，我想到了五子棋，想着容易做起来难啊！不过历经千辛万苦，最终磕磕巴巴写出来了一个简单的（有bug）五子棋。 首先贴起来html内容，很简单，就一个地图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
怎样用HTML5 Canvas制作一个简单的游戏
热门推荐
Antineutrino的专栏
09-02 4万+
自从我制作了一些HTML5游戏（例如Crypt Run）后，我收到了很多建议，要求我写一篇关于怎样利用HTML5 Canvas制作游戏的入门教程。花了一点时间考虑怎么着手写这篇文章后，我决定先实现一个我觉得最最简单的游戏，然后一行代码一行代码地进行讲解。 让我们开始吧，首先看看game.js，当然你也可以先玩玩这个游戏（译注：附件是游戏源码，用浏览器打开其中的index.html就可以玩了，
简单五子棋游戏的设计与实现课题需求分析
06-11
可以参考现有的五子棋游戏界面设计，也可以根据自己的需求进行调整。 2. 游戏规则 游戏规则可以使用 JavaScript 实现。需要定义棋盘大小、棋子类型、落子规则、计分规则等。可以参考已有的五子棋规则进行实现。 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值