给我一个浏览器能运行的五子棋代码
时间: 2024-05-14 12:15:04 浏览: 10
以下是一个简单的五子棋代码,可在浏览器中运行:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<style>
#board {
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.black {
background-color: black;
}
.white {
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="board"></div>
<script src="五子棋.js"></script>
</body>
</html>
```
JavaScript代码:
```
var board = document.getElementById("board");
var ctx = board.getContext("2d");
var pieces = [];
var currentPlayer = "black";
// 绘制棋盘
ctx.beginPath();
for (var i = 0; i < 15; i++) {
ctx.moveTo(20 + i * 30, 20);
ctx.lineTo(20 + i * 30, 440);
ctx.moveTo(20, 20 + i * 30);
ctx.lineTo(440, 20 + i * 30);
}
ctx.stroke();
// 点击事件
board.onclick = function(event) {
var x = Math.floor(event.offsetX / 30);
var y = Math.floor(event.offsetY / 30);
if (pieces[x][y] == "") {
drawPiece(x, y);
checkWin(x, y);
switchPlayer();
}
}
// 绘制棋子
function drawPiece(x, y) {
var piece = document.createElement("div");
piece.className = "piece " + currentPlayer;
piece.style.top = (y * 30 + 20) + "px";
piece.style.left = (x * 30 + 20) + "px";
board.appendChild(piece);
pieces[x][y] = currentPlayer;
}
// 切换玩家
function switchPlayer() {
currentPlayer = (currentPlayer == "black") ? "white" : "black";
}
// 检查胜利条件
function checkWin(x, y) {
var directions = [
[0, 1], [1, 0], [1, 1], [1, -1]
];
for (var i = 0; i < directions.length; i++) {
var count = 1;
var dx = directions[i][0];
var dy = directions[i][1];
for (var j = 1; j < 5; j++) {
var nx = x + j * dx;
var ny = y + j * dy;
if (nx < 0 || nx >= 15 || ny < 0 || ny >= 15 || pieces[nx][ny] != currentPlayer) {
break;
}
count++;
}
for (var j = 1; j < 5; j++) {
var nx = x - j * dx;
var ny = y - j * dy;
if (nx < 0 || nx >= 15 || ny < 0 || ny >= 15 || pieces[nx][ny] != currentPlayer) {
break;
}
count++;
}
if (count >= 5) {
alert(currentPlayer + " wins!");
board.onclick = null;
break;
}
}
}
// 初始化棋子数组
for (var i = 0; i < 15; i++) {
pieces[i] = [];
for (var j = 0; j < 15; j++) {
pieces[i][j] = "";
}
}
```
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)