五子棋游戏html代码
时间: 2023-08-28 14:07:58 浏览: 47
以下是一个简单的五子棋游戏的HTML代码,仅供参考:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋游戏</title>
<style>
body {
margin: 0;
padding: 0;
}
#board {
width: 600px;
height: 600px;
margin: 0 auto;
background-color: #FFCE9E;
position: relative;
}
.piece {
width: 40px;
height: 40px;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
top: -9999px;
left: -9999px;
box-shadow: 2px 2px 2px #888888;
cursor: pointer;
}
.piece.black {
background-color: #000000;
}
.piece.white {
background-color: #FFFFFF;
}
#result {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="board">
<!-- 棋子 -->
</div>
<div id="result"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var isBlack = true; // 黑棋先手
var board = []; // 记录棋盘
var pieces = []; // 记录棋子元素
var result = $("#result");
// 初始化棋盘
function initBoard() {
for (var i = 0; i < 15; i++) {
board[i] = [];
for (var j = 0; j < 15; j++) {
board[i][j] = 0;
}
}
}
// 初始化棋子元素
function initPieces() {
for (var i = 0; i < 15; i++) {
pieces[i] = [];
for (var j = 0; j < 15; j++) {
var piece = $("<div class='piece'></div>");
piece.attr("data-x", i);
piece.attr("data-y", j);
piece.on("click", function() {
placePiece($(this));
});
$("#board").append(piece);
pieces[i][j] = piece;
}
}
}
// 放置棋子
function placePiece(piece) {
var x = parseInt(piece.attr("data-x"));
var y = parseInt(piece.attr("data-y"));
if (board[x][y] === 0) { // 该位置没有棋子
if (isBlack) {
piece.addClass("black");
board[x][y] = 1;
result.html("轮到白棋");
} else {
piece.addClass("white");
board[x][y] = 2;
result.html("轮到黑棋");
}
checkWin(x, y);
isBlack = !isBlack;
}
}
// 检查是否胜利
function checkWin(x, y) {
var count = 1;
var color = board[x][y];
var i, j;
// 水平方向
for (i = x - 1; i >= 0; i--) {
if (board[i][y] == color) {
count++;
} else {
break;
}
}
for (i = x + 1; i < 15; i++) {
if (board[i][y] == color) {
count++;
} else {
break;
}
}
if (count >= 5) {
gameOver(color);
return;
} else {
count = 1;
}
// 垂直方向
for (j = y - 1; j >= 0; j--) {
if (board[x][j] == color) {
count++;
} else {
break;
}
}
for (j = y + 1; j < 15; j++) {
if (board[x][j] == color) {
count++;
} else {
break;
}
}
if (count >= 5) {
gameOver(color);
return;
} else {
count = 1;
}
// 左斜方向
for (i = x - 1, j = y - 1; i >= 0 && j >= 0; i--, j--) {
if (board[i][j] == color) {
count++;
} else {
break;
}
}
for (i = x + 1, j = y + 1; i < 15 && j < 15; i++, j++) {
if (board[i][j] == color) {
count++;
} else {
break;
}
}
if (count >= 5) {
gameOver(color);
return;
} else {
count = 1;
}
// 右斜方向
for (i = x - 1, j = y + 1; i >= 0 && j < 15; i--, j++) {
if (board[i][j] == color) {
count++;
} else {
break;
}
}
for (i = x + 1, j = y - 1; i < 15 && j >= 0; i++, j--) {
if (board[i][j] == color) {
count++;
} else {
break;
}
}
if (count >= 5) {
gameOver(color);
return;
} else {
count = 1;
}
}
// 游戏结束
function gameOver(color) {
if (color == 1) {
result.html("黑棋胜利!");
} else {
result.html("白棋胜利!");
}
$(".piece").off("click");
}
// 初始化
$(function() {
initBoard();
initPieces();
});
</script>
</body>
</html>
```