怎样用JS做出井字棋游戏-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

怎样用JS做出井字棋游戏

php中世界最好的语言

May 28, 2018 pm 02:40 PM

javascript permainan

这次给大家带来怎样用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>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua

1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7677

Tutorial CakePHP

1393

Tutorial C#

1207

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Tunjukkan Lagi

Related knowledge

Apakah penggunaan CPU yang sepatutnya semasa bermain permainan? Feb 19, 2024 am 11:21 AM

Adalah perkara biasa bagi permainan untuk memperlahankan komputer anda kerana ia menggunakan banyak sumber. Adalah penting untuk memahami penggunaan CPU anda semasa bermain permainan supaya anda boleh mengelak daripada membebankannya. Oleh itu, menjejaki penggunaan CPU yang sesuai adalah kunci untuk memastikan pengalaman permainan anda lancar. Dalam artikel ini, kami akan melihat penggunaan CPU yang sesuai yang perlu anda capai semasa permainan anda sedang berjalan. Penggunaan CPU semasa penggunaan CPU permainan ialah penunjuk penting beban kerja pemproses dan bergantung pada spesifikasi prestasi CPU. CPU yang lebih berkuasa biasanya mempunyai penggunaan yang lebih tinggi. CPU dengan lebih banyak teras dan benang boleh meningkatkan prestasi keseluruhan sistem anda. Sokongan berbilang benang membantu melepaskan potensi penuh CPU anda. Dalam permainan, penggunaan CPU bergantung pada penggunaan pemproses, yang boleh menjejaskan permainan

NAT Boost vs. Qos untuk permainan; Feb 19, 2024 pm 07:00 PM

Dalam keadaan hari ini di mana hampir semua permainan adalah dalam talian, adalah tidak digalakkan untuk mengabaikan pengoptimuman rangkaian rumah. Hampir semua penghala dilengkapi dengan ciri NATBoost dan QoS yang direka untuk meningkatkan pengalaman permainan pengguna. Artikel ini akan meneroka definisi, kelebihan dan keburukan NATBoost dan QoS. NATBoost vs. Qos untuk permainan; NATBoost, juga dikenali sebagai Rangsangan Penterjemahan Alamat Rangkaian, ialah ciri terbina dalam penghala yang meningkatkan prestasinya. Ia amat penting untuk permainan kerana ia membantu mengurangkan kependaman rangkaian, iaitu masa yang diperlukan untuk data dipindahkan antara peranti permainan dan pelayan. Dengan mengoptimumkan kaedah pemprosesan data dalam penghala, NATBoost mencapai kelajuan pemprosesan data yang lebih pantas dan kependaman yang lebih rendah, sekali gus mengubah

Nvgpucomp64.dll menyebabkan permainan Windows PC ranap; Mar 26, 2024 am 08:20 AM

Jika Nvgpucomp64.dll menyebabkan permainan anda kerap ranap, penyelesaian yang disediakan di sini boleh membantu anda. Masalah ini biasanya disebabkan oleh pemacu kad grafik yang lapuk atau rosak, fail permainan yang rosak, dsb. Membetulkan isu ini boleh membantu anda menangani ranap permainan. Fail Nvgpucomp64.dll dikaitkan dengan kad grafik NVIDIA. Apabila fail ini ranap, permainan anda juga akan ranap. Ini biasanya berlaku dalam permainan seperti LordsoftheFallen, LiesofP, RocketLeague dan ApexLegends. Nvgpucomp64.dll ranap permainan pada Windows PC jika N

NVIDIA melancarkan fungsi RTX HDR: permainan yang tidak disokong menggunakan penapis AI untuk mencapai kesan visual HDR yang cantik Feb 24, 2024 pm 06:37 PM

Menurut berita dari laman web ini pada 23 Februari, NVIDIA mengemas kini dan melancarkan aplikasi NVIDIA malam tadi, menyediakan pemain dengan pusat kawalan GPU bersatu baharu, membolehkan pemain merakam detik indah melalui alat rakaman berkuasa yang disediakan oleh terapung dalam permainan. tingkap. Dalam kemas kini ini, NVIDIA turut memperkenalkan fungsi RTXHDR Pengenalan rasmi dilampirkan seperti berikut: RTXHDR ialah penapis Freestyle baharu yang diperkasakan AI yang boleh memperkenalkan kesan visual cantik julat dinamik tinggi (HDR) ke dalam permainan yang tidak pada asalnya. menyokong HDR. Apa yang anda perlukan ialah monitor serasi HDR untuk menggunakan ciri ini dengan pelbagai jenis permainan berasaskan DirectX dan Vulkan. Selepas pemain mendayakan fungsi RTXHDR, permainan akan berjalan walaupun ia tidak menyokong HD

Pengenalan kepada cara memuat turun dan memasang permainan superpeople Mar 30, 2024 pm 04:01 PM

Permainan superpeople boleh dimuat turun melalui klien wap Saiz permainan ini ialah kira-kira 28G Ia biasanya mengambil masa satu setengah jam untuk memuat turun dan memasang Berikut ialah tutorial muat turun dan pemasangan khusus untuk anda. Kaedah baharu untuk memohon ujian tertutup global 1) Cari "SUPERPEOPLE" dalam kedai Steam (muat turun klien stim) 2) Klik "Minta akses kepada ujian tertutup SUPERPEOPLE" di bahagian bawah halaman kedai "SUPERPEOPLE" 3) Selepas mengklik butang minta butang akses, Permainan "SUPERPEOPLECBT" boleh disahkan dalam perpustakaan Steam 4) Klik butang pasang dalam "SUPERPEOPLECBT" dan muat turun

Di manakah Spider Solitaire dalam win11 Bagaimana untuk bermain permainan Spider Solitaire dalam win11 Mar 01, 2024 am 11:37 AM

Rakan-rakan yang telah cukup bermain karya AAA dan permainan mudah alih, adakah anda ingin menghidupkan semula permainan komputer zaman kanak-kanak anda? Kemudian mari kita cari Spider Solitaire dalam Windows 11 bersama-sama! Klik menu Mula pada antara muka, klik butang "Semua Apl"; Cari dan pilih "MicrosoftSolitaireCollection", iaitu aplikasi permainan siri Solitaire Microsoft; Selepas pemuatan selesai, masukkan antara muka pemilihan dan cari "Spider Solitaire"; Walaupun antara muka telah berubah sedikit, ia masih sama seperti dahulu

Panel kawalan Thrustmaster tidak berfungsi atau dipaparkan dengan betul [Tetap] Feb 19, 2024 am 10:45 AM

Thrustmaster ialah syarikat yang mengkhusus dalam pengeluaran roda permainan dan aksesori permainan lain Produk rodanya sangat popular dalam komuniti permainan. Tetapan roda Thrustmaster boleh dipasang dan dilaraskan menggunakan panel kawalan Thrustmaster. Jika anda menghadapi masalah dengan panel kawalan tidak berfungsi atau dipaparkan, ia mungkin menjejaskan pengalaman permainan anda. Oleh itu, apabila ini berlaku, anda perlu menyemak sama ada sambungan adalah normal dan memastikan pemacu perisian dipasang dengan betul dan dikemas kini kepada versi terkini. Selain itu, anda juga boleh cuba memulakan semula peranti atau menyambung semula peranti untuk menyelesaikan kemungkinan kegagalan. Apabila anda menghadapi masalah, anda boleh merujuk kepada tapak web rasmi Thrustmaster atau menghubungi perkhidmatan pelanggan untuk mendapatkan bantuan lanjut. Bagaimana untuk mengakses Thrustma

ASUS mengeluarkan kemas kini BIOS untuk meningkatkan kestabilan permainan pada pemproses generasi ke-13/14 Intel Apr 20, 2024 pm 05:01 PM

Menurut berita dari laman web ini pada 20 April, ASUS baru-baru ini mengeluarkan kemas kini BIOS, yang meningkatkan ketidakstabilan seperti ranap ketika menjalankan permainan pada pemproses generasi ke-13/14 Intel. Tapak ini sebelum ini melaporkan bahawa pemain melaporkan masalah termasuk apabila menjalankan versi demo PC permainan pertempuran Bandai Namco "Tekken 8", walaupun jika komputer mempunyai memori dan memori video yang mencukupi, sistem akan ranap dan menggesa mesej ralat yang menunjukkan memori tidak mencukupi. Isu ranap yang sama juga muncul dalam banyak permainan seperti "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" dan "The Finals". RAD menerbitkan artikel panjang pada Februari tahun ini, menjelaskan bahawa masalah ranap permainan adalah gabungan tetapan BIOS, frekuensi jam tinggi dan penggunaan kuasa tinggi pemproses Intel.

See all articles

怎样用JS做出井字棋游戏

Alat AI Hot

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Artikel Panas

Alat panas

Notepad++7.3.1

SublimeText3 versi Cina

Hantar Studio 13.0.1

Dreamweaver CS6

SublimeText3 versi Mac

Topik panas