最近，我寫了一款基于HTML5的五子棋游戲，現在分享一下游戲源代碼。這款游戲采用了HTML5和JavaScript技術，實現了玩家對弈。以下是游戲源代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5五子棋游戲</title>
</head>
<body>
<canvas id="chessboard" width="460" height="460"></canvas>
<script>
var chess = document.getElementById("chessboard");
var context = chess.getContext("2d");
var turn = true; // 玩家黑棋先手，true表示黑棋
var chessData = []; // 存儲棋盤信息二維數組
// 繪制棋盤
function drawChessBoard() {
for (var i = 0; i < 15; i++) {
context.moveTo(20, 20 + i * 30);
context.lineTo(440, 20 + i * 30);
context.moveTo(20 + i * 30, 20);
context.lineTo(20 + i * 30, 440);
}
context.stroke();
}
drawChessBoard();
// 繪制棋子
function oneStep(x, y, turn) {
context.beginPath();
context.arc(20 + x * 30, 20 + y * 30, 13, 0, 2 * Math.PI);
context.closePath();
// 棋子樣式
var gradient = context.createRadialGradient(20 + x * 30 + 2, 20 + y * 30 - 2, 13, 20 + x * 30 + 2, 20 + y * 30 - 2, 0);
if (turn) {
gradient.addColorStop(0, "#0a0a0a"); // 黑色
gradient.addColorStop(1, "#636766"); // 灰色
} else {
gradient.addColorStop(0, "#d1d1d1"); // 白色
gradient.addColorStop(1, "#f9f9f9"); // 灰色
}
context.fillStyle = gradient;
context.fill();
}
// 判斷勝負
function judge(x,y,turn) {
var count=0;
// 判斷橫向
for (var i = 0; i < 15; i++) {
if (chessData[x][i] == turn) {
count++;
if (count == 5) {
return true;
}
} else {
count = 0;
}
}
// 判斷縱向
count=0;
for (var i=0;i<15;i++){
if (chessData[i][y] == turn) {
count++;
if (count == 5) {
return true;
}
} else {
count = 0;
}
}
// 判斷右上斜向
count=0;
for (var i=x,j=y;i>=0&&j<15;i--,j++){
if (chessData[i][j] == turn) {
count++;
if (count == 5) {
return true;
}
} else {
count = 0;
}
}
// 判斷右下斜向
count=0;
for (var i=x,j=y;i<15&&j<15;i++,j++){
if (chessData[i][j] == turn) {
count++;
if (count == 5) {
return true;
}
} else {
count = 0;
}
}
}
// 玩家落子
chess.onclick = function (e) {
if (over) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if (chessData[i][j] == 0) {
oneStep(i, j, turn);
chessData[i][j] = turn ? 1 : 2; //黑棋用1表示，白棋用2表示
if (judge(i, j, turn)) {
alert(turn ? "黑棋贏了" : "白棋贏了");
over = true;
}
turn = !turn;
}
}
// 初始化棋盤二維數組
for (var i = 0; i < 15; i++) {
chessData[i] = [];
for (var j = 0; j < 15; j++) {
chessData[i][j] = 0;
}
}
</script>
</body>
</html>以上就是HTML5五子棋游戲的源代碼，有興趣的朋友可以自己嘗試一下復制代碼，在本地運行這個游戲，體驗一下其中的樂趣。
上一篇mysql中搜索查詢