井字游戏HTML+CSS+Javascript

最新推荐文章于 2022-05-13 00:00:00 发布

高万禄

最新推荐文章于 2022-05-13 00:00:00 发布

阅读量846

点赞数 1

本文链接：https://blog.csdn.net/qq_45812941/article/details/104893141

版权

var array=["a_a","a_b","a_c","b_a","b_b","b_c","c_a","c_b","c_c"];
objarray=[];
const mewin=1;
const hewin=2;
judgefirst=0;
judgeworf=0;
var winc=[[0,4,8],[2,4,6],[0,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,5],[6,7,8]];
console.log(array);
let firstme=document.getElementById("me");
let firsthe=document.getElementById("tohe");
for(let i=0;i<9;i++){
    objarray[i]={
        id:document.getElementById(array[i]),
        judge:0,
        color:"",
        name:0,
    };
    console.log(objarray[i].name);
}
function heone(){
    //产生随机对方人机棋子
    let date=new Date();
    let ttt=parseInt(date.getSeconds())%8;
    objarray[ttt].id.style.backgroundColor="white";
    objarray[ttt].color="white";
    objarray[ttt].name=hewin;
    objarray[ttt].judge=1;
    //对方人机棋子完毕
}
function winjudge(){
      for(let i=0;i<winc.length;i++)
             {
            
                 if(objarray[winc[i][0]].name==mewin&&objarray[winc[i][1]].name==mewin&&objarray[winc[i][2]].name==mewin){
                   console.log("You win!");
                   firstme.innerHTML="你是赢家";
                   judgeworf=1;
                   return true;
                  }
                if(objarray[winc[i][0]].name==hewin&&objarray[winc[i][1]].name==hewin&&objarray[winc[i][2]].name==hewin){
                   console.log("He win!");
                   firstme.innerHTML="他是赢家";
                   judgeworf=1;
                   return true;
             }
             let temp=0;
             for(let i=0;i<9;i++)
             {
                 if(objarray[i].judge==0)
                 {
                     temp=1;
                     break;
                 }
             }
             if(temp==0){
                 firstme.innerHTML="这是平局";
             }
             }
             return false;
}
function he(){//敌方下棋
    judgefirst=1;
    for(let i=0;i<winc.length;i++)//阻止玩家赢
    {
        if((objarray[winc[i][0]].name==mewin&&objarray[winc[i][1]].name==mewin))
        {
            if(objarray[winc[i][2]].judge!=1)
        {
            objarray[winc[i][2]].color="white";
            objarray[winc[i][2]].id.style.backgroundColor="white";
            objarray[winc[i][2]].name=hewin;
            objarray[winc[i][2]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][0]].name==mewin&&objarray[winc[i][2]].name==mewin))
        {
            if(objarray[winc[i][1]].judge!=1)
        {
            objarray[winc[i][1]].color="white";
            objarray[winc[i][1]].id.style.backgroundColor="white";
            objarray[winc[i][1]].name=hewin;
            objarray[winc[i][1]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][1]].name==mewin&&objarray[winc[i][2]].name==mewin))
        {
            if(objarray[winc[i][0]].judge!=1)
        {
            objarray[winc[i][0]].color="white";
            objarray[winc[i][0]].id.style.backgroundColor="white";
            objarray[winc[i][0]].name=hewin;
            objarray[winc[i][0]].judge=1;
            return true;
        }
        }  
    }
    for(let i=0;i<winc.length;i++)//人机为自己赢
    {
        if((objarray[winc[i][0]].name==hewin&&objarray[winc[i][1]].name==hewin))
        {
            if(objarray[winc[i][2]].judge!=1)
        {
            objarray[winc[i][2]].color="white";
            objarray[winc[i][2]].id.style.backgroundColor="white";
            objarray[winc[i][2]].name=hewin;
            objarray[winc[i][2]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][0]].name==hewin&&objarray[winc[i][2]].name==hewin))
        {
            if(objarray[winc[i][1]].judge!=1)
        {
            objarray[winc[i][1]].color="white";
            objarray[winc[i][1]].id.style.backgroundColor="white";
            objarray[winc[i][1]].name=hewin;
            objarray[winc[i][1]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][1]].name==hewin&&objarray[winc[i][2]].name==hewin))
        {
            if(objarray[winc[i][0]].judge!=1)
        {
            objarray[winc[i][0]].color="white";
            objarray[winc[i][0]].id.style.backgroundColor="white";
            objarray[winc[i][0]].name=hewin;
            objarray[winc[i][0]].judge=1;
            return true;
        }
        }
    }
    //都没有战略时
    for(let i=0;i<winc.length;i++)//人机为自己赢
    {
        if((objarray[winc[i][0]].name==hewin))
        {
            if(objarray[winc[i][1]].judge!=1)
        {
            objarray[winc[i][1]].color="white";
            objarray[winc[i][1]].id.style.backgroundColor="white";
            objarray[winc[i][1]].name=hewin;
            objarray[winc[i][1]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][0]].name==hewin))
        {
            if(objarray[winc[i][1]].judge!=1)
        {
            objarray[winc[i][1]].color="white";
            objarray[winc[i][1]].id.style.backgroundColor="white";
            objarray[winc[i][1]].name=hewin;
            objarray[winc[i][1]].judge=1;
            return true;
        }
        }
        else if((objarray[winc[i][1]].name==hewin))
        {
            if(objarray[winc[i][2]].judge!=1)
        {
            objarray[winc[i][2]].color="white";
            objarray[winc[i][2]].id.style.backgroundColor="white";
            objarray[winc[i][2]].name=hewin;
            objarray[winc[i][2]].judge=1;
            return true;
        }
        }
    }
    //完全没有策略，随机下子
for(let i=0;i<winc.length;i++)
{
    for(let j=0;j<3;j++)
    {
        if(objarray[winc[i][j]].judge!=1)
        {
            objarray[winc[i][j]].color="white";
            objarray[winc[i][j]].id.style.backgroundColor="white";
            objarray[winc[i][j]].name=hewin;
            objarray[winc[i][j]].judge=1;
            return true;
        }
    }
}
    
}
function me(){
    for(let i=0;i<9;i++){
        objarray[i].id.onclick=function(){
            judgefirst=1;
            if(judgeworf==0)
            {
            console.log('test'+i+' '+objarray[i].judge);
            if(objarray[i].judge!=1){
                if(objarray[i].color!=="black"){
                 objarray[i].color="black";
                 objarray[i].judge=1;
                 objarray[i].name=mewin;
                 }
                 objarray[i].id.style.backgroundColor=objarray[i].color;
            }
            if(winjudge()==false)
            he();
            winjudge(); 
        }
    }
    }
}
firsthe.onclick=function(){
    if(judgefirst==0)
    {
         heone();
    }
}
me();
console.log(winc[1][1]);

body{
    margin:0px;
    padding: 0px;
}
#abc{
    width:384px;
    height:500px;
    border:4px black solid;
    background-color:teal;
    border-radius: 10px;
}
#a_a{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#a_b{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#a_c{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#b_a{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;

}
#b_b{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;

}
#b_c{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#c_a{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#c_b{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
} 
#c_c{
    width:120px;
    height:120px;
    float: left;
    border:4px black solid;
    border-radius: 60px;
}
#tome{
    width:100px;
    height:50px;
    float: left;
    background-color: tomato;
    position: absolute;
    margin-top: 440px;
    margin-left: 30px;
    border-radius: 10px;
}
#tohe{
    width:100px;
    height:50px;
    float: left;
    background-color: thistle;
    position: absolute;
    margin-top: 440px;
    margin-left: 250px;
    border-radius: 10px;
}
#me{
    position: absolute;
    margin-top: 12px;
    margin-left: 21px;
    font-size: 16px;
    font-weight: 600;
}
#he{
    position: absolute;
    margin-top: 12px;
    margin-left: 27px;
    font-size: 16px;
    font-weight: 600;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <div id="abc">
        <div id="a"><div id="a_a"></div><div id="a_b"></div><div id="a_c"></div></div>
        <div id="b"><div id="b_a"></div><div id="b_b"></div><div id="b_c"></div></div>
        <div id="c"><div id="c_a"></div><div id="c_b"></div><div id="c_c"></div></div>
        <div id="tome"><span id="me">胜负揭晓</span></div>
        <div id="tohe"><span id="he">他先下</span></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

在这里插入图片描述

高万禄

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
井字游戏HTML+CSS+Javascript

var array=["a_a","a_b","a_c","b_a","b_b","b_c","c_a","c_b","c_c"];objarray=[];const mewin=1;const hewin=2;judgefirst=0;judgeworf=0;var winc=[[0,4,8],[2,4,6],[0,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,...
复制链接

扫一扫