怎样用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邮箱登陆入口在哪里

7655

CakePHP 教程

1393

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

110

显示更多

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

华硕发布 BIOS 更新，提高英特尔第 13/14 代处理器游戏稳定性 Apr 20, 2024 pm 05:01 PM

本站4月20日消息，华硕公司近日发布了BIOS更新，改善了英特尔第13/14代处理器运行游戏时崩溃等不稳定情况。本站此前报道，玩家反馈的问题包括运行万代南梦宫格斗游戏《铁拳8》PC演示版时，即便电脑拥有充足的内存和显存，也会出现系统崩溃并提示内存不足的错误信息。类似的崩溃问题也出现在《战地风云2042》、《遗迹2》、《堡垒之夜》、《堕落之主》、《霍格沃茨之遗》以及《TheFinals》等多款游戏中。RAD公司今年2月发布长文，解释说游戏崩溃问题是BIOS设置、英特尔处理器的高时钟频率和高功耗共同

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版

热门话题