html双人对战源码,双人对战五子棋游戏 综合运用HTML、CSS、JavaScript实现
时间: 2023-07-10 15:14:11 浏览: 74
以下是一个基于HTML、CSS、JavaScript实现的双人对战五子棋游戏的源码,供参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>双人对战五子棋游戏</title>
<style>
#game {
margin: 0 auto;
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game">
<script src="game.js"></script>
</div>
</body>
</html>
```
JavaScript代码:
```
var game = document.getElementById("game");
var pieces = [];
var currentPlayer = "black";
var winner = null;
// 创建棋盘
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var piece = document.createElement("div");
piece.className = "piece";
piece.style.left = j * 40 + "px";
piece.style.top = i * 40 + "px";
piece.addEventListener("click", play);
game.appendChild(piece);
pieces.push({
element: piece,
x: j,
y: i,
player: null
});
}
}
// 下棋
function play() {
if (winner !== null) {
return;
}
if (this.className.indexOf("black") !== -1 || this.className.indexOf("white") !== -1) {
return;
}
this.classList.add(currentPlayer);
var piece = getPieceByElement(this);
piece.player = currentPlayer;
checkWin(piece);
switchPlayer();
}
// 切换玩家
function switchPlayer() {
if (currentPlayer === "black") {
currentPlayer = "white";
} else {
currentPlayer = "black";
}
}
// 获取棋子对象
function getPieceByElement(element) {
for (var i = 0; i < pieces.length; i++) {
if (pieces[i].element === element) {
return pieces[i];
}
}
return null;
}
// 检查是否有玩家获胜
function checkWin(piece) {
var count = 0;
// 横向
for (var i = piece.x - 4; i <= piece.x + 4; i++) {
var p = getPieceByCoordinate(i, piece.y);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 纵向
for (var j = piece.y - 4; j <= piece.y + 4; j++) {
var p = getPieceByCoordinate(piece.x, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 正斜线
for (var i = piece.x - 4, j = piece.y - 4; i <= piece.x + 4; i++, j++) {
var p = getPieceByCoordinate(i, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
// 反斜线
for (var i = piece.x - 4, j = piece.y + 4; i <= piece.x + 4; i++, j--) {
var p = getPieceByCoordinate(i, j);
if (p !== null && p.player === piece.player) {
count++;
if (count === 5) {
winner = piece.player;
alert(winner + " wins!");
return;
}
} else {
count = 0;
}
}
}
// 根据坐标获取棋子对象
function getPieceByCoordinate(x, y) {
for (var i = 0; i < pieces.length; i++) {
if (pieces[i].x === x && pieces[i].y === y) {
return pieces[i];
}
}
return null;
}
```
CSS代码:
```
.piece.black {
background-color: black;
}
.piece.white {
background-color: white;
border: 1px solid black;
}
```
以上代码实现了一个简单的双人对战五子棋游戏,玩家可以通过点击棋盘上的空位下棋,游戏会自动判断是否有玩家获胜。该代码中使用了HTML、CSS和JavaScript技术,可以通过浏览器打开运行。