2. 程式人生 > 程式設計 >JavaScript實現網頁版五子棋遊戲

JavaScript實現網頁版五子棋遊戲

阿新 • • 發佈：2021-07-30

本文例項為大家分享了實現版五子棋遊戲的具體程式碼，供大家參考，具體內容如下

學習的第三天，跟著老師完成的五子棋小遊戲，記錄學習成果歡迎大佬們一起分享經驗，批評指正。

本程式主要通過三部分實現：

1.棋盤繪製
2.滑鼠互動
3.輸贏判斷

<!DOCTYPE html>
<html>
<head>
  <title>
    canvastestCkKgnfet
    </title>
</head>
<body>
     <h1> canvas</h1>
     <canvas id="canvas"width="400"height="400">
     </canvas>

     <script src="https://cdn.bootcdn.net/ajax/libs//3.6.0/jquery.js"></script>

  <script>
   var canv=document.getElementById("canvas");
   var ctx=canv.getContext("2d");
   ctx.strokeStyle="black";
   var bow=0;

//畫出棋盤；
var matrix=[

  [0,0],[0,];

ctx.beginPath();

for(var i=0;i<19;i++){

       ctx.moveTo(10+20*i,10);
       ctx.lineTo(10+i*20,370);
       ctx.moveTo(10,20*i+10);
       ctx.lineTo(370,i*20+10);

}
 ctx.stroke();
 
 //滑鼠互動；
  $("#canvas").click(function(event)
      {
      console.log(event.offsetX)


      console.log(bow);
      var arcPosX,arcPosY;
     var mtxPosX,mtxPosY;
      for(var x=0;x<19;x++)
      {
      if((Math.abs(event.offsetX-(10+x*20)))<10)
        {
       arcPosX=10+x*20;
       mtxPosX=x;
        }
      if((Math.abs(event.offsetY-(10+x*20)))<10)
         {
        arcPosY=10+x*20;
        mtxPosY=x;
          }
      }

      if(matrix[mtxPosX][mtxPosY] == 0)
      {
      bow=!bow;
      ctx.beginPath();
      if(bow){

      ctx.fillStyle="Black";
      ctx.arc(arcPosX,arcPosY,10,Math.PI*2,false);
      matrix[mtxPosX][mtxPosY]=1;
      }
      else{
      ctx.fillStyle="White";
      ctx.arc(arcPosX,false);
      ctx.stroke();
      matrix[mtxPosX][mtxPosY]=2;
      }
      ctx.fill();
      }
      //實現輸贏判斷
      var winFlag=0;
if(winFlag==0){
if(matrix[mtxPosX-1][mtxPosY] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX-2][mtxPosY] == matrix[mtxPosX][mtxPosY])
           http://www.cppcns.com
 
    {
                if(matrix[mtxPosX-3][mtxPosY] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-4][mtxPosY] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX+1][mtxPosY] == matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 1;
                  }
                  else
                  {
                   winFlag = 0;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
              }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }

if(matrix[mtxPosX][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
               {
                if(matrix[mtxPosX][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX][mtxPosY+1] == matrix[http://www.cppcns.com
 
mtxPosX][mtxPosY])
                  {
                   winFlag = 1;
                  }
                  else
                  {
                   winFlag = 0;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
                         }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }

  if(matrix[mtxPosX-1][mtxPosY-1] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-2][mtxPosY-2] == matrix[mtxPosX][mtxPosY])
                 {
                  if(matrix[mtxPosX-3][mtxPosY-3] == matrix[mtxPosX][mtxPosY])
                  {
                   if(matrix[mtxPosX-4][mtxPosY-4] == matrix[mtxPosX][mtxPosY])
                   {
                    winFlag = 1;
                   }
                   else
                   {
                    if(matrix[mtxPosX+1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
                    {
                     winFlag = 1;
                    }
                    else
                    {
                     winFlag = 0;
                    }
                   }
                  }
                  else
                  {
                   for(var w = 0; w < 2 ; w ++)
                   {
                    if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                    {
                     winFlag = 0;
                     break;
                    }
                    else
                    {
                     winFlag = 1;
                    }
                   }
                  }
                 }
                 else
                 {
                  for(var w = 0; w < 3 ; w ++)
                  {
                   if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                   {
                    winFlag = 0;
                    break;
                   }
                   else
                   {
                    winFlag = 1;
                   }
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 4 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
              }

   if(matrix[mtxPosX-1][mtxPosY+1] == matrix[mtxPosX][mtxPosY])
              {
               if(matrix[mtxPosX-2][mtxPosY+2] == matrix[mtxPosX][mtxPosY])
               {
                if(matrix[mtxPosX-3][mtxPosY+3] == matrix[mtxPosX][mtxPosY])
                {
                 if(matrix[mtxPosX-4][mtxPosY+4] == matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 1;
                 }
                 else
                 {
                  if(matrix[mtxPosX+1][mtxPosY-1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
                else
                {
                 for(var w = 0; w < 2 ; w ++)
                 {
                  if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   break;
                  }
                  else
                  {
                   winFlag = 1;
                  }
                 }
                }
               }
               else
               {
                for(var w = 0; w < 3 ; w ++)
                {
                 if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  
 
break;
                 }
                 else
                 {
                  winFlag = 1;
                 }
                }
               }
              }
              else
              {
               for(var w = 0; w < 4 ; w ++)
               {
                if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 break;
                }
                else
                {
                 winFlag = 1;
                }
               }
              }
    }
              if(winFlag ==1){
         if(bow)
         alert("black win!");
         else
                         alert("white win!");
              }
      });

  </script>
</body>
</html>

JavaScript實現網頁版五子棋遊戲

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

JavaScript實現網頁版五子棋遊戲

本文例項為大家分享了實現版五子棋遊戲的具體程式碼，供大家參考，具體內容如下

JavaScript實現網頁版貪吃蛇遊戲

本文例項為大家分享了實現貪吃蛇遊戲的具體程式碼，供大家參考，具體內容如下

javaScript實現網頁版的彈球遊戲

利用javeScript物件以及方法實現的彈球遊戲，供大家參考，具體內容如下 <!DOCTYPE html>

原生JavaScript實現網頁版計算器

本文例項為大家分享了實現版計算器的具體程式碼，供大家參考，具體內容如下

js實現網頁版貪吃蛇遊戲

使用原生 js 實現貪吃蛇小遊戲，首先這個 小遊戲的目錄結構如下： 有 貪吃蛇 ， 食物 ，地圖 ，還有 遊戲

java實現單機版五子棋小遊戲

簡單的java小遊戲–單機版五子棋 學了java有一段時間了，今天就來搞一個簡單的單機版五子棋遊戲。

java實現簡單控制檯五子棋遊戲

本文例項為大家分享了java實現簡單控制檯五子棋的具體程式碼，供大家參考，具體內容如下

如何利用pygame實現簡單的五子棋遊戲

前言 寫程式已經丟掉很長一段時間了，最近覺得完全把技術丟掉可能是個死路，還是應該撿起來，所以打算借CSDN來記錄學習過程， 由於以前沒事的時候斷斷續續學習過python和用flask框架寫過點web，所以第一步想撿起pyt

Python基於pygame實現單機版五子棋對戰

python實現的五子棋，能夠自動判斷輸贏，沒有是實現電腦對戰功能 原始碼下載：pygame五子棋

javascript實現蒙版與禁止頁面滾動

本文例項為大家分享了javascript實現蒙版與禁止頁面滾動的具體程式碼，供大家參考，具體內容如下

python3實現網頁版raspberry pi（樹莓派）小車控制

關於樹莓派四驅小車的運動方向控制、攝像頭方向控制已經在前面的兩篇博文中介紹過。有需要的可以參考。本文也是基於上述兩個python檔案就緒的情況進行的。

JavaScript實現橫版選單欄

本文例項為大家分享了JavaScript實現橫版選單欄的具體程式碼，供大家參考，具體內容如下

javascript實現貪吃蛇經典遊戲

js面向物件程式設計之貪吃蛇，供大家參考，具體內容如下 首先：面向物件程式設計，我們要找到專案中具體的物件，此處為（食物（food），蛇（snake），遊戲本身（game））也可不把遊戲本身作為物件，邏輯體現出來即可

使用JavaScript實現網頁秒錶功能（含開始、暫停、繼續、重置功能）

效果圖展示，感覺不錯可以參考例項程式碼。 具體程式碼如下所示： <!DOCTYPE html>

javascript實現貪吃蛇小遊戲

本文例項為大家分享了js實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下

python實現簡單的五子棋遊戲

本文例項為大家分享了python實現五子棋遊戲的具體程式碼，供大家參考，具體內容如下

javascript實現打磚塊小遊戲（附完整原始碼）

小時候玩一天的打磚塊小遊戲，附完整原始碼 在？給個贊？ 實現如圖 需求分析

Javascript實現貪吃蛇小遊戲（含詳細註釋）

本文例項為大家分享了Javascript實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下

JavaScript實現網頁計算器功能

本文例項為大家分享了JavaScript實現網頁計算器的具體程式碼，供大家參考，具體內容如下

JavaScript實現網頁截圖方法總結

“ 關注『前端開發部落格』公眾號，回覆 加群 ” 最近研究了下如何利用JavaScript實現網頁截圖，包括在瀏覽器執行的JS，以及在後臺執行的nodeJs的方法。主要看了以下幾個：