一个简单的五子棋的JavaScript代码示例
一个简单的五子棋的JavaScript代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋游戏</title>
<style>
#board {
width: 500px;
height: 500px;
margin: auto;
border: 1px solid #000;
}
.cell {
width: 50px;
height: 50px;
float: left;
border: 1px solid #000;
}
body {
background-color: #898989;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
// 创建棋盘
var board = document.getElementById("board");
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
var cell = document.createElement("div");
cell.className = "cell";
cell.setAttribute("data-x", i);
cell.setAttribute("data-y", j);
board.appendChild(cell);
}
}
// 初始化游戏状态
var gameState = [];
for (var i = 0; i < 10; i++) {
var row = [];
for (var j = 0; j < 10; j++) {
row.push(0);
}
gameState.push(row);
}
// 玩家落子
board.addEventListener("click", function(event) {
var cell = event.target;
if (!cell.classList.contains("cell")) return;
var x = parseInt(cell.getAttribute("data-x"));
var y = parseInt(cell.getAttribute("data-y"));
if (gameState[x][y] !== 0) return;
if (isBlackTurn) {
cell.style.backgroundColor = "black";
gameState[x][y] = 1;
} else {
cell.style.backgroundColor = "white";
gameState[x][y] = -1;
}
isBlackTurn = !isBlackTurn;
});
// 判断胜利条件
function checkWin(x, y, color) {
var directions = [
[1, 0],
[0, 1],
[1, 1],
[-1, 1]
];
for (var i = 0; i < directions.length; i++) {
var dx = directions[i][0];
var dy = directions[i][1];
var count = 1;
for (var j = 1; j <= 4; j++) {
var nx = x + dx * j;
var ny = y + dy * j;
if (nx < 0 || nx >= gameState.length ||
ny < 0 || ny >= gameState[0].length ||
gameState[nx][ny] !== color) break;
count++;
if (count === 5) return true;
}
}
return false;
}
// 游戏结束
function gameOver(winner) {
alert(winner === "black" ? "黑方胜利！" : "白方胜利！");
board.removeEventListener("click", arguments.callee);
}
// 监听落子事件
var isBlackTurn = true;
board.addEventListener("click", function(event) {
var cell = event.target;
if (!cell.classList.contains("cell")) return;
var x = parseInt(cell.getAttribute("data-x"));
var y = parseInt(cell.getAttribute("data-y"));
if (gameState[x][y] !== 0) return;
if (isBlackTurn) {
cell.style.backgroundColor = "black";
gameState[x][y] = 1;
if (checkWin(x, y, 1)) gameOver("black");
} else {
cell.style.backgroundColor = "white";
gameState[x][y] = -1;
if (checkWin(x, y, -1)) gameOver("white");
}
isBlackTurn = !isBlackTurn;
});
</script>
</body>
</html>
以上代码实现了一个基本的五子棋游戏，包括落子、判断胜利条件和游戏结束等功能。你可以根据需要自行修改或扩展。
共有 0 条评论