首页 > 代码库 > 五子棋游戏:使用javascript
五子棋游戏:使用javascript
文件夹建立:
UI
image
logo.jsp
yw.jsp
cw.jsp
js
script.js
css
style.css
index.html
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>五子棋游戏</title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css"> </head> <body> <canvas id="chess" width="450px" height="450px"></canvas> <script type="text/javascript" src="http://www.mamicode.com/js/script.js"></script> </body> </html>
script.js
var wins = []; 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++; } } var over = false; var myWin = []; var compWin = []; for (var i = 0; i < count; ++i) { myWin[i] = 0; compWin[i] = 0; } var chess = document.getElementById(‘chess‘); var context = chess.getContext(‘2d‘); context.strokeStyle = "#BFBFBF"; var logo = new Image(); logo.src = "images/logo.jpg"; var yw = new Image(); yw.src = "images/yw.png"; var cw = new Image(); cw.src = "images/cw.png"; var me = true; var chessBoard = []; for (var i = 0; i < 15; ++i) { chessBoard[i] = []; for (var j = 0; j < 15; ++j) { chessBoard[i][j] = 0; } } logo.onload = function () { context.drawImage(logo, 0, 0, 450, 450); 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(); } } 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, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 20); if (me) { gradient.addColorStop(0, "#0A0A0A"); gradient.addColorStop(1, "#636766"); } else { gradient.addColorStop(0, "#D1D1D1"); gradient.addColorStop(1, "#F9F9F9"); } context.fillStyle = gradient; context.fill(); } var compAI = function () { var myScore = []; var compScore = []; var max = 0; var x = 0, y = 0; for (var i = 0; i < 15; ++i) { myScore[i] = []; compScore[i] = []; for (var j = 0; j < 15; ++j) { myScore[i][j] = 0; compScore[i][j] = 0; } } for (var i = 0; i < 15; ++i) { for (var j = 0; j < 15; ++j) { if (chessBoard[i][j] == 0) { for (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] += 600; else if (myWin[k] == 4) myScore[i][j] += 800; if (compWin[k] == 1) compScore[i][j] += 220; else if (compWin[k] == 2) compScore[i][j] += 420; else if (compWin[k] == 3) compScore[i][j] += 620; else if (compWin[k] == 4) compScore[i][j] += 820; } } if (myScore[i][j] > max) { max = myScore[i][j]; x = i; y = j; } else if (myScore[i][j] == max) { if (compScore[i][j] > compScore[x][y]) { x = i; y = j; } } if (compScore[i][j] > max) { max = compScore[i][j]; x = i; y = j; } else if (compScore[i][j] == max) { if (myScore[i][j] > myScore[x][y]) { x = i; y = j; } } } } } oneStep(x, y, false); chessBoard[x][y] = 2; for (var k = 0; k < count; ++k) { if (wins[x][y][k]) { compWin[k]++; myWin[k] = 6;//不可能赢 if (compWin[k] == 5) { window.alert("computer win"); context.drawImage(cw, 0, 0, 450, 450); over = true; } } } if (!over) { me = !me; } } chess.onclick = function (e) { if (over) return; if (!me) return; 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; for (var k = 0; k < count; ++k) { if (wins[i][j][k]) { myWin[k]++; compWin[k] = 6;//不可能赢 if (myWin[k] == 5) { window.alert("you win"); context.drawImage(yw, 0, 0, 450, 450); over = true; } } } if (!over) { me = !me; compAI(); } } }
style.css
canvas{ display:block; margin:50px auto; box-shadow:-2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9; }
结果显示:
本文出自 “小止” 博客,请务必保留此出处http://10541556.blog.51cto.com/10531556/1875554
五子棋游戏:使用javascript
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。