用html js 写一个五子棋游戏
时间: 2023-12-13 22:05:59 浏览: 30
好的,以下是一个简单的五子棋游戏的HTML和JavaScript代码,你可以在浏览器中运行它:
```html
<!DOCTYPE html>
<html>
<head>
<title>五子棋游戏</title>
<style>
table {
border-collapse: collapse;
margin: auto;
}
td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
font-size: 36px;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<script>
var ROWS = 15;
var COLS = 15;
var board = [];
var currentPlayer = 1;
var isGameOver = false;
for (var i = 0; i < ROWS; i++) {
var row = [];
for (var j = 0; j < COLS; j++) {
row.push(0);
}
board.push(row);
}
function play(row, col) {
if (isGameOver || board[row][col] !== 0) {
return;
}
board[row][col] = currentPlayer;
drawBoard();
if (isWin(row, col)) {
alert('Player ' + currentPlayer + ' wins!');
isGameOver = true;
return;
}
currentPlayer = 3 - currentPlayer;
}
function isWin(row, col) {
var count = 0;
for (var i = row - 4; i <= row + 4; i++) {
if (i < 0 || i >= ROWS) {
continue;
}
if (board[i][col] === currentPlayer) {
count++;
if (count === 5) {
return true;
}
} else {
count = 0;
}
}
count = 0;
for (var j = col - 4; j <= col + 4; j++) {
if (j < 0 || j >= COLS) {
continue;
}
if (board[row][j] === currentPlayer) {
count++;
if (count === 5) {
return true;
}
} else {
count = 0;
}
}
count = 0;
for (var k = -4; k <= 4; k++) {
var i = row + k;
var j = col + k;
if (i < 0 || i >= ROWS || j < 0 || j >= COLS) {
continue;
}
if (board[i][j] === currentPlayer) {
count++;
if (count === 5) {
return true;
}
} else {
count = 0;
}
}
count = 0;
for (var k = -4; k <= 4; k++) {
var i = row - k;
var j = col + k;
if (i < 0 || i >= ROWS || j < 0 || j >= COLS) {
continue;
}
if (board[i][j] === currentPlayer) {
count++;
if (count === 5) {
return true;
}
} else {
count = 0;
}
}
return false;
}
function drawBoard() {
var table = document.getElementsByTagName('table')[0];
for (var i = 0; i < ROWS; i++) {
var row = table.rows[i];
for (var j = 0; j < COLS; j++) {
var cell = row.cells[j];
cell.innerHTML = board[i][j] === 1 ? '●' :
board[i][j] === 2 ? '○' : '';
}
}
}
function init() {
var table = document.getElementsByTagName('table')[0];
for (var i = 0; i < ROWS; i++) {
var row = table.insertRow(i);
for (var j = 0; j < COLS; j++) {
var cell = row.insertCell(j);
cell.onclick = (function(i, j) {
return function() {
play(i, j);
};
})(i, j);
}
}
drawBoard();
}
init();
</script>
</table>
</body>
</html>
```
这个游戏使用HTML表格来绘制棋盘,使用JavaScript来处理游戏逻辑。每个单元格都绑定了一个点击事件,当玩家点击某个单元格时,会在该位置放置一个棋子,并检查游戏是否结束。如果有一个玩家连成了五个棋子,游戏就结束了。