简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Detailed explanation of steps to implement Tic-Tac-Toe game with JS

php中世界最好的语言
Release： 2018-05-23 10:01:55
Original
2788 people have browsed it

This time I will bring you a detailed explanation of the steps to implement the Tic-Tac-Toe game with JS. What are the precautions for implementing the Tic-Tac-Toe game with JS. The following is a practical case, let’s take a look.

Recently, a class ended and I needed to make a tic-tac-toe game. I wrote one using JavaScript. First of all, the interface should not be a big problem, just write it in html. It is mainly about the AI ​​algorithm used in human-machine games. How to make computers smart is worth thinking about. After starting the game, the player goes first. From a computer perspective, multiple situations can be analyzed and weighted according to importance.

The situation is as follows:

1. There are only two chess pieces in the same row (row, column, diagonal), and they are all yours. As long as you go further can win, then the remaining position has the highest weight and priority is the highest. Assign first-level weight.

2. There are only two chess pieces in the same row (row, column, diagonal), and they are both the opponent's (that is, the player's). As long as one step further, the player will succeed, so "I "To block, the remaining position is given a secondary weight.

3. Because the computer side moves backward, if you are smart, you need to block the player side all the time. Therefore, when there is only one chess piece in a row and it is the player's chess piece, then the weights of other positions in the row are set to level three. .

4. Level 4 weight: There are only your own (computer side) chess pieces in a row.

5. Level 5 authority: There are no chess pieces in the same row, including the opponent's and your own.

When implemented, the chess pieces in each position can be represented by two-dimensional arrayfull, and the weight of each position is also represented by a two-dimensional array val. After the player finishes playing, the AI ​​side's function is called. Before the AI ​​side moves, it updates the weight first, and then selects the position with the largest weight (optimal solution). Whether it is the AI ​​or the player, they must determine whether there is a win or loss after each move. Use the alert() function to output the results.

In order to represent the size of the weight, the regulations are stipulated in the order of level to level 5, add 10000, 1000, 10, 5, 3

Note: Since the source code may be submitted, I have no separation of separation. Create css styles and js files, but it is best to write them separately to be more standardized. If there are any deficiencies, criticisms and corrections are welcome.

The source code is as follows: 

<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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of JavaScript callback function use cases

What are the precautions for using React Navigation

The above is the detailed content of Detailed explanation of steps to implement Tic-Tac-Toe game with JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
javascript step Detailed explanation
source：php.cn
Previous article：The solution to the problem of question marks and garbled characters in Chinese when passing json to the front desk using ajax Next article：AJAX is used to determine whether the user is registered
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Stream data from OpenAI's API using AJAX, PHP, and server-sent events How can I use Server Sent Events (SSE) to stream data from the above API to a browser clie...
From 2023-11-11 12:03:23
0
1
497
Uncaught TypeError: Cannot set property of undefined (set 'innerHTML') I'm trying to create a webpage using php, on an element of class "Continuous TextBox&...
From 2023-11-08 21:06:09
0
1
278
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0
2
210
Why do so many JavaScript scripts append random numbers to things? collision? I've been learning JavaScript lately and have seen many examples of using Math.rand() to a...
From 2023-11-04 20:00:04
0
2
296
Identify performance limitations in JavaScript I'm trying to find the bottleneck in my Javascript. Basically I'm developing a chrome exte...
From 2023-10-31 20:47:17
0
1
229
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！