写一个html5的五子棋小游戏
时间: 2023-05-12 19:07:06 浏览: 69
非常感谢您的提问!以下是一个简单的 HTML5 五子棋小游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋小游戏</title>
<style>
#board {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
left: -20px;
top: -20px;
background-color: white;
box-shadow: 1px 1px 1px black;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
border: 1px solid black;
}
#message {
margin-top: 20px;
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<div id="board"></div>
<div id="message"></div>
<script>
var board = document.getElementById('board');
var message = document.getElementById('message');
var pieces = [];
var currentPlayer = 'black';
var gameOver = false;
var winner = null;
// 创建棋盘
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var div = document.createElement('div');
div.className = 'piece';
div.setAttribute('data-x', i);
div.setAttribute('data-y', j);
board.appendChild(div);
pieces.push(div);
}
}
// 下棋
board.addEventListener('click', function(event) {
if (gameOver) {
return;
}
var target = event.target;
if (target.className !== 'piece') {
return;
}
if (target.classList.contains('black') || target.classList.contains('white')) {
return;
}
target.classList.add(currentPlayer);
if (checkWin(target)) {
gameOver = true;
winner = currentPlayer;
message.textContent = winner + ' 赢了!';
return;
}
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
});
// 检查胜负
function checkWin(piece) {
var x = parseInt(piece.getAttribute('data-x'));
var y = parseInt(piece.getAttribute('data-y'));
var count = 1;
var i, j;
// 横向
for (i = x - 1; i >= 0; i--) {
if (getPiece(i, y).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
for (i = x + 1; i < 15; i++) {
if (getPiece(i, y).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
if (count >= 5) {
return true;
}
// 纵向
count = 1;
for (j = y - 1; j >= 0; j--) {
if (getPiece(x, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
for (j = y + 1; j < 15; j++) {
if (getPiece(x, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
if (count >= 5) {
return true;
}
// 左上到右下
count = 1;
for (i = x - 1, j = y - 1; i >= 0 && j >= 0; i--, j--) {
if (getPiece(i, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
for (i = x + 1, j = y + 1; i < 15 && j < 15; i++, j++) {
if (getPiece(i, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
if (count >= 5) {
return true;
}
// 右上到左下
count = 1;
for (i = x + 1, j = y - 1; i < 15 && j >= 0; i++, j--) {
if (getPiece(i, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
for (i = x - 1, j = y + 1; i >= 0 && j < 15; i--, j++) {
if (getPiece(i, j).classList.contains(currentPlayer)) {
count++;
} else {
break;
}
}
if (count >= 5) {
return true;
}
return false;
}
// 获取指定位置的棋子
function getPiece(x, y) {
return pieces[x * 15 + y];
}
</script>
</body>
</html>
```
希望这个代码示例能够帮助您!