基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲

第基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲目錄先看成品游戲初始化界面：玩家獲勝AI電腦獲勝思路生成棋盤(pán)重新開(kāi)始玩家落子電腦落子代碼HTMLCSSjs井字棋作為我們?cè)谏蠈W(xué)時(shí)代必玩的一款連珠游戲，你知道如何做到先手必然不會(huì)輸嗎？今天我們就用HTML、css、js來(lái)實(shí)現(xiàn)一款井字棋游戲。

先看成品

游戲初始化界面：

玩家獲勝

AI電腦獲勝

思路

生成棋盤(pán)

通過(guò)表格生成一個(gè)3*3的表格然后通過(guò)css屬性隱藏部分邊框?qū)崿F(xiàn)井字棋盤(pán)

重新開(kāi)始

清空文本數(shù)列刪除屬性

玩家落子

通過(guò)玩家點(diǎn)擊獲取id通過(guò)id將點(diǎn)擊的表格塊設(shè)置為O

電腦落子

通過(guò)算法來(lái)實(shí)現(xiàn)電腦最適合的塊id然后落子

代碼

HTML

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"/

metahttp-equiv="X-UA-Compatible"content="IE=edge"/

metaname="viewport"content="width=device-width,initial-scale=1.0"/

title井字棋/title

linkrel="stylesheet"href="css.css"rel="externalnofollow"/

/head

body

table

tdid="0"/td

tdid="1"/td

tdid="2"/td

/tr

tdid="3"/td

tdid="4"/td

tdid="5"/td

/tr

tdid="6"/td

tdid="7"/td

tdid="8"/td

/tr

/table

div

div/div

/div

button重新開(kāi)始/button

scriptsrc="js.js"/script

/body

/html

CSS

*{

margin:0;

padding:0;

button{

position:absolute;

position:absolute;

left:50%;

margin-left:-65px;

top:50px;

border:2pxsolid#333;

width:100px;

height:100px;

text-align:center;

vertical-align:middle;

font-family:'微軟雅黑';

font-style:italic;

font-size:70px;

cursor:pointer;

table{

/*margin:30pxauto;*/

position:absolute;

left:40%;

top:100px;

border-collapse:collapse;

tabletr:first-childtd{

border-top:0;

tabletr:last-childtd{

border-bottom:0;

tabletrtd:first-child{

border-left:0;

tabletrtd:last-child{

border-right:0;

.endgame{

display:none;

width:200px;

height:120px;

background-color:rgba(205,132,65,0.8);

position:absolute;

left:40%;

top:180px;

margin-left:50px;

text-align:center;

border-radius:5px;

color:white;

font-size:2em;

}

js

varorigBoard;

consthuPlayer='O';

constaiPlayer='X';

constwinCombos=[

[0,1,2],

[3,4,5],

[6,7,8],

[0,3,6],

[1,4,7],

[2,5,8],

[0,4,8],

[6,4,2]

/*獲取元素*/

constcells=document.querySelectorAll(".cell");

startGame();

functionstartGame(){

document.querySelector(".endgame").style.display="none";

//設(shè)置陣列點(diǎn)創(chuàng)建9個(gè)數(shù)組元素，元素的鍵0到8

origBoard=Array.from(Array(9).keys());

//console.log(origBoard);

for(vari=0;icells.length;i++){

//把文本先設(shè)置為空

cells[i].innerHTML="";

//刪除屬性知道已經(jīng)有人贏了

cells[i].style.removeProperty('background-color');

//點(diǎn)擊方塊

cells[i].addEventListener('click',turnClick,false);

functionturnClick(square){

//記住原來(lái)走過(guò)的方塊

if(typeoforigBoard[square.target.id]=='number'){

//人類玩家點(diǎn)擊

turn(square.target.id,huPlayer);

//由人類轉(zhuǎn)向AI玩家

if(!checkTie()){

//電腦玩家將棋子放到最合適的地方

turn(bestStep(),aiPlayer);

functionturn(squareId,player){

//這些id給玩家

origBoard[squareId]=player;

document.getElementById(squareId).innerHTML=player;

//讓游戲進(jìn)行檢查

vargameWin=checkWin(origBoard,player);

if(gameWin){

gameOver(gameWin);

//判斷勝利

functioncheckWin(board,player){

letplays=board.reduce((a,e,i)=

(e===player)a.concat(i):a,[])

letgameWin=null;

//如果是屬于之前winCombos勝利組合

for(let[index,win]ofwinCombos.entries()){

if(win.every(Element=plays.indexOf(Element)-1)){

//現(xiàn)在我們知道是哪一個(gè)組合勝利了

gameWin={index:index,player:player};

break;

returngameWin;

/*游戲結(jié)束*/

functiongameOver(gameWin){

for(letindexofwinCombos[gameWin.index]){

//人類獲勝則為藍(lán)色

document.getElementById(index).style.backgroundColor=

gameWin.player==huPlayer"blue":"red";

/*事件偵聽(tīng)器刪除單擊，已經(jīng)結(jié)束了，不能再點(diǎn)擊*/

for(vari=0;icells.length;i++){

cells[i].removeEventListener('click',turnClick,false);

declareWinner(gameWin.player==huPlayer"你贏了":"你輸了");

functionemptySquares(){

//過(guò)濾每一個(gè)元素,如果元素為number，返回所有方塊

returnorigBoard.filter(s=typeofs=='number');

/*AI最優(yōu)步驟*/

functionbestStep(){

//智能AI

returnminmax(origBoard,aiPlayer).index;

//檢查是否是平局

functioncheckTie(){

if(emptySquares().length==0){

for(vari=0;icells.length;i++){

cells[i].style.backgroundColor="green";

cells[i].removeEventListener('click',turnClick,false);

//誰(shuí)獲勝了

//declareWinner("玩家獲勝");

returntrue;

}else{

//平局

returnfalse;

functiondeclareWinner(who){

document.querySelector(".endgame").style.display='block';

document.querySelector(".endgame.text").innerHTML=who;

functionminmax(newBoard,player){

//找到索引，空方塊功能設(shè)置為a

varavailSpots=emptySquares(newBoard);

if(checkWin(newBoard,player)){

return{score:-10};

}elseif(checkWin(newBoard,aiPlayer)){

return{score:20};

}elseif(availSpots.length===0){

return{score:0};

//之后進(jìn)行評(píng)估

varmoves=[];

//收集每個(gè)動(dòng)作時(shí)的空白點(diǎn)

for(vari=0;iavailSpots.length;i++){

//然后設(shè)置空的索引號(hào)

varmove={};

move.index=newBoard[availSpots[i]];

newBoard[availSpots[i]]=player;

if(player==aiPlayer){

//存儲(chǔ)對(duì)象，包括得分屬性

varresult=minmax(newBoard,huPlayer);

move.score=result.score;

}else{

//存儲(chǔ)對(duì)象，包括得分屬性

varresult=minmax(newBoard,aiPlayer);

move.score=result.score;

newBoard[availSpots[i]]=move.index;

moves.push(move);

varbestMove;

//如果是AI玩家，以非常低的數(shù)字和循環(huán)通過(guò)

if(player===aiPlayer){

varbestScore=-1000;

for(vari=0;imoves.length;i++){

if(moves[i].scorebestScore){