生活随笔
收集整理的這篇文章主要介紹了
JavaScript五子棋
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個代碼是按照網上一個JS教程寫的。
這個代碼有點bug吧，那就是一直封你的棋而不會去贏。
html：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五子棋</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><canvas id="chess" width="450px" height="450px"></canvas><script type="text/javascript" src="script.js"></script></body>
</html>
JS：
var chessBoard = [];
var me = true;
var over = false;var wins = [];//贏法數組var myWin = [];//玩家贏法統計數組
var computerWin = [];//計算機贏法統計數組//初始化棋盤的標記數組
for(var i=0;i<15;++i){chessBoard[i] = [];for(var j=0;j<15;++j){chessBoard[i][j] = 0;}
}//贏法數組開三維空間
for(var i=0;i<15;++i){wins[i] = [];for(var j=0;j<15;++j){wins[i][j] = [];}
}//贏法統計
var count = 0;
//橫向贏法
for(var i=0;i<15;++i){for(var j=0;j<11;++j){for(var k =0;k<5;++k){wins[i][j+k][count] = true;}count++;}
}
//豎向贏法
for(var i=0;i<15;++i){for(var j=0;j<11;++j){for(var k =0;k<5;++k){wins[j+k][i][count] = true;}count++;}
}//斜向贏法
for(var i=0;i<11;++i){for(var j=0;j<11;++j){for(var k =0;k<5;++k){wins[i+k][j+k][count] = true;}count++;}
}//反斜向贏法
for(var i=0;i<11;++i){for(var j=14;j>3;--j){for(var k =0;k<5;++k){wins[i+k][j-k][count] = true;}count++;}
}console.log(count);//初始化玩家和電腦的贏法統計數組
for(var i=0;i<count;++i){myWin[i] = 0;computerWin[i] = 0;
}var chess = document.getElementById('chess');
var context = chess.getContext('2d');context.strokeStyle = "#BFBFBF";//加載完代碼立即運行函數的內容
onload = function()
{if(over)return;if(!me)return;drawChessBoard();
}//畫棋盤
var drawChessBoard = function(){for(var i=0;i<15;++i){context.moveTo(15 + i*30,15);context.lineTo(15 + i*30,435);context.stroke();context.moveTo(15,15 + i*30);context.lineTo(435,15 + i*30);context.stroke();}
}//下棋（i，j）地方，me表示是計算機還是玩家
var oneStep = function(i,j,me){context.beginPath();context.arc(15 + i*30,15 + j*30,13,0,2*Math.PI);context.closePath();var gradient = context.createRadialGradient(15 + i*30+2,15 + j*30-2,50,15 + i*30+2,15 + j*30-2,0);if(me){gradient.addColorStop(0,"#0A0A0A");gradient.addColorStop(1,"#636766");}else{gradient.addColorStop(0,"#D1D1D1");gradient.addColorStop(1,"#F9F9F9");}context.fillStyle = gradient;context.fill();
}chess.onclick = function(e){var x = e.offsetX;var y = e.offsetY;var i = Math.floor(x/30);var j = Math.floor(y/30);//沒有棋在此位置if(chessBoard[i][j]==0){oneStep(i,j,me);chessBoard[i][j] = 1;//枚舉count種贏法for(var k=0;k<count;++k){if(wins[i][j][k]){//第k種贏法玩家占有了myWin[k]++;//計算機不可能從第k種贏法贏computerWin[k] = 6;if(myWin[k] == 5){window.alert("You Win!");over = true;}}}//沒有結束，計算機下棋if(!over){me = !me;computerAI();}}
}var computerAI = function(){//玩家分數var myScore = [];//計算機分數var computerScore = [];var max = 0;var u = 0,v = 0;//初始化為二維數組for(var i=0;i<15;++i){myScore[i] = [];computerScore[i] = [];for(var j=0;j<15;++j){myScore[i][j] = 0;computerScore[i][j] = 0;}}//枚舉整個棋盤的位置，每個位置的count種贏法for(var i=0;i<15;++i){for(var j=0;j<15;++j){if(chessBoard[i][j]==0){for(var k=0;k<count;++k){if(wins[i][j][k]){if(myWin[k] == 1){myScore[i][j] += 200;}else if(myWin[k]==2){myScore[i][j] += 400;}else if(myWin[k]==3){myScore[i][j] += 2000;}else if(myWin[k]==4){myScore[i][j] += 10000;}}if(computerWin[k]){if(myWin[k] == 1){computerScore[i][j] += 220;}else if(computerWin[k]==2){computerScore[i][j] += 420;}else if(computerWin[k]==3){computerScore[i][j] += 2200;}else if(computerWin[k]==4){computerScore[i][j] += 20000;}}}if(myScore[i][j]>max){max = myScore[i][j];u = i,v = j;}else if(myScore[i][j] == max){if(computerScore[i][j]>computerScore[u][v]){u = i,v = j;}}if(computerScore[i][j]>max){max = computerScore[i][j];u = i,v = j;}else if(computerScore[i][j] == max){if(myScore[i][j]>myScore[u][v]){u = i,v = j;}}}}}oneStep(u,v,false);chessBoard[u][v] = 2;for(var k=0;k<count;++k){if(wins[u][v][k]){computerWin[k]++;myWin[k] = 6;if(computerWin[k] == 5){window.alert("computer Win!");over = true;}}}if(!over){me = !me;}
}
CSS：
canvas {display: block;margin: 50px auto;box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}
總結
以上是生活随笔為你收集整理的JavaScript五子棋的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
