• 售前

  • 售后

热门帖子
入门百科

JavaScript实现网页版五子棋游戏

[复制链接]
阿豆学长长ov 显示全部楼层 发表于 2021-8-14 14:54:08 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码,供大家参考,具体内容如下
学习js的第三天,跟着老师完成的五子棋小游戏,记载学习结果欢迎大佬们一起分享履历,品评指正。
本步伐紧张通过三部分实现:
1.棋盘绘制
2.鼠标交互
3.胜败判定
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>
  5.     canvastest
  6.     </title>
  7. </head>
  8. <body>
  9.      <h1> canvas</h1>
  10.      <canvas id="canvas"width="400"height="400">
  11.      </canvas>
  12.      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  13.   <script>
  14.    var canv=document.getElementById("canvas");
  15.    var ctx=canv.getContext("2d");
  16.    ctx.strokeStyle="black";
  17.    var bow=0;
  18. //画出棋盘;
  19. var matrix=[
  20.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  21.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  22.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  23.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  24.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  25.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  26.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  27.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  28.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  29.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  30.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  31.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  32.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  33.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  34.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  35.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  36.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  37.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  38.   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  39.                                               ];
  40. ctx.beginPath();
  41. for(var i=0;i<19;i++){
  42.        ctx.moveTo(10+20*i,10);
  43.        ctx.lineTo(10+i*20,370);
  44.        ctx.moveTo(10,20*i+10);
  45.        ctx.lineTo(370,i*20+10);
  46. }
  47. ctx.stroke();
  48. //鼠标交互;
  49.   $("#canvas").click(function(event)
  50.       {
  51.       console.log(event.offsetX)
  52.       console.log(bow);
  53.       var arcPosX,arcPosY;
  54.      var mtxPosX,mtxPosY;
  55.       for(var x=0;x<19;x++)
  56.       {
  57.       if((Math.abs(event.offsetX-(10+x*20)))<10)
  58.         {
  59.        arcPosX=10+x*20;
  60.        mtxPosX=x;
  61.         }
  62.       if((Math.abs(event.offsetY-(10+x*20)))<10)
  63.          {
  64.         arcPosY=10+x*20;
  65.         mtxPosY=x;
  66.           }
  67.       }
  68.       if(matrix[mtxPosX][mtxPosY] == 0)
  69.       {
  70.       bow=!bow;
  71.       ctx.beginPath();
  72.       if(bow){
  73.       ctx.fillStyle="Black";
  74.       ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
  75.       matrix[mtxPosX][mtxPosY]=1;
  76.       }
  77.       else{
  78.       ctx.fillStyle="White";
  79.       ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
  80.       ctx.stroke();
  81.       matrix[mtxPosX][mtxPosY]=2;
  82.       }
  83.       ctx.fill();
  84.       }
  85.       //实现输赢判断
  86.       var winFlag=0;
  87. if(winFlag==0){
  88. if(matrix[mtxPosX-1][mtxPosY] == matrix[mtxPosX][mtxPosY])
  89.               {
  90.                if(matrix[mtxPosX-2][mtxPosY] == matrix[mtxPosX][mtxPosY])
  91.                {
  92.                 if(matrix[mtxPosX-3][mtxPosY] == matrix[mtxPosX][mtxPosY])
  93.                 {
  94.                  if(matrix[mtxPosX-4][mtxPosY] == matrix[mtxPosX][mtxPosY])
  95.                  {
  96.                   winFlag = 1;
  97.                  }
  98.                  else
  99.                  {
  100.                   if(matrix[mtxPosX+1][mtxPosY] == matrix[mtxPosX][mtxPosY])
  101.                   {
  102.                    winFlag = 1;
  103.                   }
  104.                   else
  105.                   {
  106.                    winFlag = 0;
  107.                   }
  108.                  }
  109.                 }
  110.                 else
  111.                 {
  112.                  for(var w = 0; w < 2 ; w ++)
  113.                  {
  114.                   if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
  115.                   {
  116.                    winFlag = 0;
  117.                    break;
  118.                   }
  119.                   else
  120.                   {
  121.                    winFlag = 1;
  122.                   }
  123.                  }
  124.                 }
  125.                }
  126.                else
  127.                {
  128.                 for(var w = 0; w < 3 ; w ++)
  129.                 {
  130.                  if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
  131.                  {
  132.                   winFlag = 0;
  133.                   break;
  134.                  }
  135.                  else
  136.                  {
  137.                   winFlag = 1;
  138.                  }
  139.                 }
  140.                }
  141.               }
  142.               else
  143.               {
  144.                for(var w = 0; w < 4 ; w ++)
  145.                {
  146.                 if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
  147.                 {
  148.                  winFlag = 0;
  149.                  break;
  150.                 }
  151.                 else
  152.                 {
  153.                  winFlag = 1;
  154.                 }
  155.                }
  156.               }
  157. if(matrix[mtxPosX][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
  158.               {
  159.                if(matrix[mtxPosX][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
  160.                {
  161.                 if(matrix[mtxPosX][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
  162.                 {
  163.                  if(matrix[mtxPosX][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
  164.                  {
  165.                   winFlag = 1;
  166.                  }
  167.                  else
  168.                  {
  169.                   if(matrix[mtxPosX][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
  170.                   {
  171.                    winFlag = 1;
  172.                   }
  173.                   else
  174.                   {
  175.                    winFlag = 0;
  176.                   }
  177.                  }
  178.                 }
  179.                 else
  180.                 {
  181.                  for(var w = 0; w < 2 ; w ++)
  182.                  {
  183.                   if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  184.                   {
  185.                    winFlag = 0;
  186.                    break;
  187.                   }
  188.                   else
  189.                   {
  190.                    winFlag = 1;
  191.                   }
  192.                  }
  193.                 }
  194.                }
  195.                else
  196.                {
  197.                 for(var w = 0; w < 3 ; w ++)
  198.                 {
  199.                  if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  200.                  {
  201.                   winFlag = 0;
  202.                   break;
  203.                  }
  204.                  else
  205.                  {
  206.                   winFlag = 1;
  207.                  }
  208.                 }
  209.                }
  210.                          }
  211.               else
  212.               {
  213.                for(var w = 0; w < 4 ; w ++)
  214.                {
  215.                 if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  216.                 {
  217.                  winFlag = 0;
  218.                  break;
  219.                 }
  220.                 else
  221.                 {
  222.                  winFlag = 1;
  223.                 }
  224.                }
  225.               }
  226.   if(matrix[mtxPosX-1][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
  227.                 {
  228.                  if(matrix[mtxPosX-2][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
  229.                  {
  230.                   if(matrix[mtxPosX-3][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
  231.                   {
  232.                    if(matrix[mtxPosX-4][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
  233.                    {
  234.                     winFlag = 1;
  235.                    }
  236.                    else
  237.                    {
  238.                     if(matrix[mtxPosX+1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
  239.                     {
  240.                      winFlag = 1;
  241.                     }
  242.                     else
  243.                     {
  244.                      winFlag = 0;
  245.                     }
  246.                    }
  247.                   }
  248.                   else
  249.                   {
  250.                    for(var w = 0; w < 2 ; w ++)
  251.                    {
  252.                     if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  253.                     {
  254.                      winFlag = 0;
  255.                      break;
  256.                     }
  257.                     else
  258.                     {
  259.                      winFlag = 1;
  260.                     }
  261.                    }
  262.                   }
  263.                  }
  264.                  else
  265.                  {
  266.                   for(var w = 0; w < 3 ; w ++)
  267.                   {
  268.                    if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  269.                    {
  270.                     winFlag = 0;
  271.                     break;
  272.                    }
  273.                    else
  274.                    {
  275.                     winFlag = 1;
  276.                    }
  277.                   }
  278.                  }
  279.                 }
  280.                 else
  281.                 {
  282.                  for(var w = 0; w < 4 ; w ++)
  283.                  {
  284.                   if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
  285.                   {
  286.                    winFlag = 0;
  287.                    break;
  288.                   }
  289.                   else
  290.                   {
  291.                    winFlag = 1;
  292.                   }
  293.                  }
  294.               }
  295.    if(matrix[mtxPosX-1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
  296.               {
  297.                if(matrix[mtxPosX-2][mtxPosY+2] == matrix[mtxPosX][mtxPosY])
  298.                {
  299.                 if(matrix[mtxPosX-3][mtxPosY+3] == matrix[mtxPosX][mtxPosY])
  300.                 {
  301.                  if(matrix[mtxPosX-4][mtxPosY+4] == matrix[mtxPosX][mtxPosY])
  302.                  {
  303.                   winFlag = 1;
  304.                  }
  305.                  else
  306.                  {
  307.                   if(matrix[mtxPosX+1][mtxPosY-1] != matrix[mtxPosX][mtxPosY])
  308.                   {
  309.                    winFlag = 0;
  310.                   }
  311.                   else
  312.                   {
  313.                    winFlag = 1;
  314.                   }
  315.                  }
  316.                 }
  317.                 else
  318.                 {
  319.                  for(var w = 0; w < 2 ; w ++)
  320.                  {
  321.                   if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
  322.                   {
  323.                    winFlag = 0;
  324.                    break;
  325.                   }
  326.                   else
  327.                   {
  328.                    winFlag = 1;
  329.                   }
  330.                  }
  331.                 }
  332.                }
  333.                else
  334.                {
  335.                 for(var w = 0; w < 3 ; w ++)
  336.                 {
  337.                  if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
  338.                  {
  339.                   winFlag = 0;
  340.                   break;
  341.                  }
  342.                  else
  343.                  {
  344.                   winFlag = 1;
  345.                  }
  346.                 }
  347.                }
  348.               }
  349.               else
  350.               {
  351.                for(var w = 0; w < 4 ; w ++)
  352.                {
  353.                 if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
  354.                 {
  355.                  winFlag = 0;
  356.                  break;
  357.                 }
  358.                 else
  359.                 {
  360.                  winFlag = 1;
  361.                 }
  362.                }
  363.               }
  364.     }
  365.               if(winFlag ==1){
  366.          if(bow)
  367.          alert("black win!");
  368.          else
  369.                          alert("white win!");
  370.               }
  371.       });
  372.   </script>
  373. </body>
  374. </html>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作