怎麼用JS做出井字棋遊戲-js教程-PHP中文網

首頁

web前端

js教程

怎麼用JS做出井字棋遊戲

php中世界最好的语言

May 28, 2018 pm 02:40 PM

javascript 遊戲

這次帶給大家怎麼用JS做出井字棋遊戲，用JS做出井字棋遊戲的注意事項有哪些，下面就是實戰案例，一起來看一下。

最近有一門課結束了，需要做一個井字棋的遊戲，我用JavaScript#寫了一個。首先介面應該問題不大，用html稍微寫一下就可以。主要是人機對弈時的ai演算法，如何讓電腦方聰明起來，是值得思考的。開始遊戲後，由玩家先行。那麼站在計算機的角度，可以對多種情況進行分析，並按照重要程度賦予權值。

情況如下：

1、同一排（行。列。對角線）有且只有兩個棋子，並且都是自己的，只要再進一步就能獲勝，那麼剩下的那個位置權值最高，優先權最大。賦予一級權值。

2、同一排（行。列。對角線）有且只有兩個棋子，並且都是對方的（也就是玩家的），只要再進一步，玩家就會成功，所以「我「要堵住，剩下的那個位置賦予二級權值。

3、因為電腦方後行，如果聰明點，需要一直堵玩家方，所以當一排只有一個棋，且是玩家的棋子，那麼該排其他位置的權值設為三級。

4、四級權值：一排只有己方（電腦方）的棋子。

5、五級權限：同排沒有棋子，包括對方和己方。

實現的時候，每個位置的棋子，可以用二維數組full表示，每個位置的權值大小也用一個二維數組val來表示。玩家方下完後，呼叫AI方的函數，AI方行棋前，先更新一下權值，再選出權值最大的位置落子（最優解）。無論是ai還是玩家方，每次落子後都要判斷有沒有產生輸贏。用alert（）函數輸出結果。

為了表示權值的大小，規定依照一級到五級順序，依序加 10000、1000、10、5、3

碼，我沒有分開提交來源出css樣式和js文件，不過最好還是分開寫比較規範。如有不足之處，歡迎批評指正。

原始碼如下：

<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
<script>
//定义全局变量
var full=[[0,0,0],[0,0,0],[0,0,0]];//0表示null，1表示我下的，2表示电脑下的
var val=[[1,1,1],[1,1,1],[1,1,1]];//表示每个位置的权值
function judge(){
   //检测是否有人赢
   //行
   for(var i=0;i<3;i++){
     if(full[i][0]==full[i][1]&&full[i][1]==full[i][2]&&full[i][0]!=0){
             if(full[i][0]==1){
                window.alert("you win!");
                return true;
             }
             else {
                window.alert("you lose");
                return true;
             }                
     }
   }
   //列
   for(var i=0;i<3;i++){
     if(full[0][i]==full[1][i]&&full[1][i]==full[2][i]&&full[0][i]!=0){
             if(full[0][i]==1){
                window.alert("you win!"); 
                return true;
             }
             else {
                window.alert("you lose");  
                return true;
             }                
     }
   }
   //主对角线
   if(full[0][0]==full[1][1]&&full[1][1]==full[2][2]&&full[0][0]!=0){
             if(full[0][0]==1){
                window.alert("you win!");
                return true;
            }
             else {
                window.alert("you lose");
                return true;
            }                
   }
   if(full[0][2]==full[1][1]&&full[2][0]==full[1][1]&&full[0][2]!=0){
             if(full[0][2]==1){
                window.alert("you win!");
                return true;
            }
             else {
               window.alert("you lose");
               return true;
            }
   }
   for(var i=0;i<3;i++){
     for(var j=0;j<3;j++){
      if(full[i][j]==0)
        return false;//说明还没结束
       if(i==2&&j==2)
        {window.alert("平局！");  
        return true;
        }        
     }
   }
   return false;//无结果
}
function bn(i,j){
   //如果已经下过，则无效
   if(full[i][j]!=0){
      return 0;
   }else{
      //没下过
      full[i][j]=1;
      num1=(i*3+j+1)+"";
      document.getElementById(num1).value="X";
      if(judge()==true){
        return;
      }
      ai();//切换
   }
}
//重置权值：
function resetValue(){
   for(var i=0;i<3;i++){
      for(var j=0;j<3;j++){
        if(full[i][j]!=0)
          val[i][j]=0;
        else{
      //看行和列：  
         //最高权值
         if(((full[0][j]+full[1][j]+full[2][j])==4)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
            val[i][j]=val[i][j]+10000;
         if(((full[i][0]+full[i][1]+full[i][2])==4)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
            val[i][j]=val[i][j]+10000;
         //次级权值
         if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
            val[i][j]=val[i][j]+1000;
         if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
            val[i][j]=val[i][j]+1000;
         //三级权值（一排只有一个X）
         if(((full[0][j]+full[1][j]+full[2][j])==1)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==0)
            val[i][j]=val[i][j]+10;
         if(((full[i][0]+full[i][1]+full[i][2])==1)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==0)
            val[i][j]=val[i][j]+10;
         //四级权值（一排只有一个O）
         if(((full[0][j]+full[1][j]+full[2][j])==2)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==1)
            val[i][j]=val[i][j]+5;
         if(((full[i][0]+full[i][1]+full[i][2])==2)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==1)
            val[i][j]=val[i][j]+5;
         //五级权限（该行没有X或O）
         if(((full[0][j]+full[1][j]+full[2][j])==0)&&(full[0][j]*full[1][j]*full[2][j])==0
         &&((full[0][j]-1)*(full[1][j]-1)*(full[2][j]-1))==-1)
            val[i][j]=val[i][j]+2;
         if(((full[i][0]+full[i][1]+full[i][2])==0)&&(full[i][0]*full[i][1]*full[i][2])==0
         &&((full[i][0]-1)*(full[i][1]-1)*(full[i][2]-1))==-1)
            val[i][j]=val[i][j]+2;
    //主对角线：同上
          if((i==0&&j==0)||(i==2&&j==2)||(i==1&&j==1)){
            if(((full[0][0]+full[1][1]+full[2][2])==4)&&(full[0][0]*full[1][1]*full[2][2])==0
            &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
            val[i][j]=val[i][j]+10000;
         //次级权值
         if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
            val[i][j]=val[i][j]+1000;
         //三级权值（一排只有一个X）
         if(((full[0][0]+full[1][1]+full[2][2])==1)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==0)
            val[i][j]=val[i][j]+10;
         //四级权值（一排只有一个O）
         if(((full[0][0]+full[1][1]+full[2][2])==2)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==1)
            val[i][j]=val[i][j]+5;
         //五级权值（该行没有X或O）
         if(((full[0][0]+full[1][1]+full[2][2])==0)&&(full[0][0]*full[1][1]*full[2][2])==0
         &&((full[0][0]-1)*(full[1][1]-1)*(full[2][2]-1))==-1)
            val[i][j]=val[i][j]+2;
        }
     //副对角线(同上)
        if((i==0&&j==2)||(i==2&&j==0)||(i==1&&j==1)){
            //一级
           if(((full[0][2]+full[1][1]+full[2][0])==4)&&(full[0][2]*full[1][1]*full[2][0])==0
           &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
            val[i][j]=val[i][j]+10000;
            //二级
            if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
            val[i][j]=val[i][j]+1000;
            //三级权值（一排只有一个X）
            if(((full[0][2]+full[1][1]+full[2][0])==1)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==0)
            val[i][j]=val[i][j]+10;
            //四级权值（一排只有一个O）
            if(((full[0][2]+full[1][1]+full[2][0])==2)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==1)
            val[i][j]=val[i][j]+5;
            //五级权值（该行没有X或O）
            if(((full[0][2]+full[1][1]+full[2][0])==0)&&(full[0][2]*full[1][1]*full[2][0])==0
            &&((full[0][2]-1)*(full[1][1]-1)*(full[2][0]-1))==-1)
            val[i][j]=val[i][j]+2;
           }
          }
      }
   }  
}
function ai(){
   if(judge()==true){
     return;
   }
   //挑选权值最大的
   resetValue();
   var mi=0,mj=0,temp=0;
   for(var i=0;i<3;i++)
     for(var j=0;j<3;j++){
       if(val[i][j]>temp){
         temp=val[i][j];
         mi=i;
         mj=j;
       }
     }
     full[mi][mj]=2;
     num1=(mi*3+mj+1)+"";
     document.getElementById(num1).value="O";
     if(judge()==true){
     return;
   }
}
function lose(){
window.alert("you lose");
location.reload();
}
</script>
</head>
<body>
<h1 align=center> 井字棋</h1>
<table border=2px bordercolor="blue"width="300"height="300" style="font-size:50 " align=center>
<tr>
<td><input type="button" id="1" Style="width:100px;height:100px;" value=" " onclick="bn(0,0)"/></td>
<td><input type="button" id="2" Style="width:100px;height:100px;" value=" " onclick="bn(0,1)"/></td>
<td><input type="button" id="3" Style="width:100px;height:100px;" value=" " onclick="bn(0,2)"/></td>
</tr>
<tr>
<td><input type="button" id="4" Style="width:100px;height:100px;" value=" " onclick="bn(1,0)"/></td>
<td><input type="button" id="5" Style="width:100px;height:100px;" value=" " onclick="bn(1,1)"/></td>
<td><input type="button" id="6" Style="width:100px;height:100px;" value=" " onclick="bn(1,2)"/></td>
</tr>
<tr >
<td><input type="button" id="7" Style="width:100px;height:100px;" value=" " onclick="bn(2,0)"/></td>
<td><input type="button" id="8" Style="width:100px;height:100px;" value=" " onclick="bn(2,1)"/></td>
<td><input type="button" id="9" Style="width:100px;height:100px;" value=" " onclick="bn(2,2)"/></td>
</tr>
</table>
<p ><input type="button" style="position:relative;left:500px;top:5px;width:100px;height:50px;" value="重新开始" onclick="location.reload() "/>
   <input type="button" style="position:relative;left:550px;top:5px;width:100px;height:50px;" value="认  输" onclick="lose()"/>
</p>
<body>
</html>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7818

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

在遊戲時，CPU利用率應該是多少？ Feb 19, 2024 am 11:21 AM

遊戲因消耗大量資源而導致電腦運作速度變慢是常見現象。了解遊戲時CPU的使用率是至關重要的，這樣可以避免過度負荷。因此，掌握適當的CPU使用率是維持遊戲體驗流暢的關鍵。在本文中，我們將探討遊戲執行時間CPU應該達到的適當使用率。遊戲時的CPU使用率CPU使用率是指衡量處理器工作負載的重要指標，取決於CPU的效能規格。功率較大的CPU通常具有更高的使用率。擁有更多核心和執行緒的CPU可以提高系統的整體效能。多執行緒支援有助於充分發揮CPU的潛力。在遊戲中，CPU使用率取決於處理器的使用率，這會影響遊戲

NAT Boost與遊戲的Qos；哪個比較好？ Feb 19, 2024 pm 07:00 PM

在當下幾乎所有遊戲都在線上的情況下，忽視家庭網路的最佳化是不可取的。幾乎所有路由器都配備了NATBoost和QoS功能，旨在提升使用者的遊戲體驗。本文將探討NATBoost和QoS的定義、優點和缺點。 NATBoost與遊戲的Qos；哪個比較好？ NATBoost，又稱網路位址轉換Boost，是一種內建於路由器的功能，可提升其效能。對於遊戲而言尤其重要，因為它有助於減少網路延遲，即遊戲設備和伺服器之間資料傳輸的時間。透過優化路由器內的資料處理方式，NATBoost實現了更快的資料處理速度和更低的延遲，從而改

Nvgpucomp64.dll導致Windows PC遊戲崩潰; Mar 26, 2024 am 08:20 AM

如果Nvgpucomp64.dll導致遊戲經常崩潰，這裡提供的解決方案可能會對您有所幫助。這種問題通常是由於過時或損壞的顯示卡驅動程式、遊戲檔案損壞等原因引起的。修復這些問題可以幫助您解決遊戲崩潰的困擾。 Nvgpucomp64.dll檔案與NVIDIA顯示卡關聯。當這個檔案崩潰時，你的遊戲也會崩潰。這通常發生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等遊戲中。 Nvgpucomp64.dll使WindowsPC上的遊戲崩潰如果N

英偉達上線 RTX HDR 功能：不支援的遊戲透過 AI 濾鏡達到 HDR 艷麗視覺效果 Feb 24, 2024 pm 06:37 PM

本站2月23日消息，英偉達昨晚更新推出了NVIDIA‏‏應用程序，為玩家提供了全新的統一GPU控制中心，便於玩家透過遊戲內懸浮窗提供的強大錄影工具捕捉精彩時刻。在本次更新中，英偉達也引入了RTXHDR功能，本站附上官方介紹如下：RTXHDR是一款AI賦能的全新Freestyle濾鏡，可以將高動態範圍(HDR)的艷麗視覺效果無縫引入到原本不支援HDR的遊戲中。你只需擁有相容HDR的顯示器，即可對大量基於DirectX和Vulkan的遊戲使用此功能。玩家在啟用RTXHDR功能之後，運行即便不支援HD

超級人類（superpeople）遊戲下載安裝方法介紹 Mar 30, 2024 pm 04:01 PM

超級人類（superpeople）遊戲可以透過steam客戶端下載遊戲，這款遊戲的大小在28G左右，下載到安裝通常需要一個半小時，以下為大家帶來具體的下載安裝教學！新的申請全球封閉測試方法1)在Steam商店（steam客戶端下載）搜尋“SUPERPEOPLE”2)點擊“SUPERPEOPLE”商店頁面下方的“請求SUPERPEOPLE封閉測試訪問權限”3)點擊請求訪問權限按鈕後，將在Steam庫中可確認「SUPERPEOPLECBT」遊戲4)在「SUPERPEOPLECBT」中點選安裝按鈕並下

win11蜘蛛紙牌在哪 win11玩蜘蛛紙牌遊戲的方法 Mar 01, 2024 am 11:37 AM

在玩夠3A大作以及手遊的小夥伴們，是不是想重溫一下兒時的電腦遊戲呀？那我們一起在windows11中尋找蜘蛛紙牌吧！點選介面上的開始選單，點選「所有應用」按鈕；點選「所有應用」。找到並選擇“MicrosoftSolitaireCollection”，這是微軟的紙牌系列遊戲應用程式；紙牌系列遊戲選擇。載入完成後，進入選擇介面，找到“蜘蛛紙牌”；選擇“蜘蛛紙牌”。雖然介面有些許變化，但還是以前的

Thrustmaster控制面板無法正常運作或顯示[修復] Feb 19, 2024 am 10:45 AM

Thrustmaster是一家專門生產遊戲輪和其他遊戲配件的公司，其車輪產品在遊戲界備受歡迎。使用Thrustmaster控制面板可以安裝和調整Thrustmaster輪的設定。如果遇到控制面板無法運作或無法顯示的問題，可能會影響遊戲體驗。因此，當發生這種情況時，需要檢查連接是否正常，確保軟體驅動程式已正確安裝並更新至最新版本。另外，也可以嘗試重新啟動設備或重新連接設備，以解決可能的故障。在遇到問題時，可以參考Thrustmaster的官方網站或聯絡客服以獲得進一步協助。如何訪問Thrustma

任務召喚：PC或Xbox上的幽靈卡在加載畫面上、崩潰或凍結 Feb 19, 2024 pm 12:03 PM

《決勝時刻：幽靈》會一直停留在開始畫面、崩潰或凍結嗎？許多玩家報告說，這款遊戲在他們的設備上表現不佳。它在啟動時一直顯示空白的黑屏，或在中間凍結或隨機崩潰。這些問題在PC和Xbox遊戲機上都有報告。如果你是受影響的用戶之一，這篇文章將幫助你修復任務召喚：幽靈遊戲中的效能問題。任務召喚：PC或Xbox上的幽靈卡在加載畫面上、崩潰或凍結如果在加載畫面上遇到卡頓或遊戲持續凍結，以下解決方案可能有助於解決幽靈遊戲的問題。確保您的主機或電腦符合CodGhost系統需求。重新啟動您的控制台。在任務管理

See all articles

怎麼用JS做出井字棋遊戲

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題