h5實現五子棋遊戲 js原生實現
<html>
<head>
<meta charset="utf-8" />
<title>郭勝學習項目-五子棋遊戲-小小AI</title>
<style>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
}
</style>
</head>
<body>
<canvas id="guoshengcanvas" width="450px" height="450px"></canvas>
</body>
</html>
<script>
var chessBoard = [],
me = true,
over = false,
wins = [],
mywin = [],
computerwin = [];
/*
* 初始化贏法數組
* 郭勝
* 三維數組
*/
for(var i = 0; i < 15; i++) {
wins[i] = [];
for(var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
/*
* 贏法種類：x軸向左，y軸向下，所有的贏法，即"|"放下
* 郭勝
*/
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++;
}
}
/*
* 贏法種類：x軸向下，y軸向左，所有的贏法，即"——"方向
* 郭勝
*/
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++;
}
}
/*
* 初始化畫板
* 郭勝
*/
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 < count; i++) {
mywin[i] = 0;
computerwin[i] = 0;
}
var guoshengcanvas = document.getElementById("guoshengcanvas");
var context = guoshengcanvas.getContext("2d");
//設置或返回用於筆觸的顏色、漸變或模式
context.strokeStyle = "#bfbfbf";
/*
* 畫棋盤
* 郭勝
*/
window.onload = function() {
for(var i = 0; i < 15; i++) {
//把路徑移動到畫布中的指定點，不創建線條
context.moveTo(15 + i * 30, 15);
//添加一個新點，然後在畫布中創建從該點到最後指定點的線條
context.lineTo(15 + i * 30, 435);
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
// 繪製已定義的路徑
context.stroke();
}
}
/*
* 走琪
* 郭勝
*/
var onestep = function(i, j, me) {
context.beginPath();
//畫圓
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
context.closePath();
//創建放射狀/環形的漸變（用在畫布內容上）
var grandient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
if(me) {//判斷是我走琪還是計算機，true是我，false是計算機
grandient.addColorStop(0, "#0A0A0A");
grandient.addColorStop(1, "#636766");
} else {
grandient.addColorStop(0, "#D1D1D1");
grandient.addColorStop(1, "#f9f9f9");
}
context.fillStyle = grandient;
context.fill();
}
guoshengcanvas.onclick = function(e) {
if(over) {//如果已經結束，停止
return;
}
if(!me) {//如果不是我走琪，停止
return;
}
var x = e.offsetX;//畫布的x軸像素
var y = e.offsetY;//畫布的y軸像素
var i = Math.floor(x / 30);//遊戲的x軸座標
var j = Math.floor(y / 30);//遊戲的y軸座標
if(chessBoard[i][j] == 0) {//如果該座標沒有棋子
onestep(i, j, me);
chessBoard[i][j] = 1;
for(var k = 0; k < count; k++) {
if(wins[i][j][k]) {
mywin[k]++;//我在count這個贏法中已經佔了幾個子了。
computerwin[k] = 8;//我已經佔了，計算機在這個贏法上就沒有了，給設置爲8
if(mywin[k] == 5) {//如果這個贏法中我已經佔了五個，那麼我就贏了。
window.alert("臭小子，你贏了……");
over = true;
}
}
}
}
if(!over) {//遊戲尚未結束
me = !me;//換計算機走琪
computerai();//計算機走琪
}
}
var computerai = function() {
var myscore = [],
computerscore = [];
var max = 0,
uu = 0,
vv = 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;
}
}
for(var i = 0; i < 15; i++) {//從0,0到14,14遍歷，選擇最合適的位置
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] == 1) {//判斷，計算機在這個位置上的所有贏法賦值分數，在贏法中佔的位置越多，分數越高
computerscore[i][j] += 220;
} else if(computerwin[k] == 2) {
computerscore[i][j] += 420;
} else if(computerwin[k] == 3) {
computerscore[i][j] += 2100;
} else if(computerwin[k] == 4) {
computerscore[i][j] += 20000;
}
}
}
/*
* 比較出我的權重值和計算機的權重值，哪一個最大的位置
*/
if(myscore[i][j]>max){
max = myscore[i][j];
uu = i;
vv = j;
}else if(myscore[i][j]==max){
if(computerscore[i][j]>computerscore[uu][vv]){
uu = i;
vv = j;
}
}
if(computerscore[i][j] > max){
max = computerscore[i][j];
uu = i;
vv = j;
}else if(computerscore[i][j] == max){
if(myscore[i][j] > myscore[uu][vv]){
uu = i;
vv = j;
}
}
}
}
}
onestep(uu,vv,false);
chessBoard[uu][vv] = 2;
for(var k=0;k<count;k++){
if(wins[uu][vv][k]){
computerwin[k] ++;
mywin[k] = 8;//在這個贏法上，我已經不可能贏了
if(computerwin[k] == 5){
window.alert("小崽子，一點用都沒有，計算機都玩不過！");
over = true;
}
}
}
if(!over){
me = !me;
}
}
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章