当前位置：网站首页 > 技术文章 > 正文

网页五指棋游戏（五指棋单机）

zhezhongyun 2025-07-03 02:24 4 浏览

完整代码如下，大家可以保存到html文件点击打开，就可以看到如上效果
<!DOCTYPE html>

<head>

<title>五子棋游戏</title>

<style>

body {

font-family: 'Microsoft YaHei', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

background-color: #f5f5dc;

margin: 0;

padding: 20px;

}

h1 {

color: #8B4513;

text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

}

#game-container {

position: relative;

margin: 20px 0;

}

#chess-board {

background-color: #DEB887;

border: 2px solid #8B4513;

box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

#status {

margin: 10px 0;

font-size: 18px;

font-weight: bold;

color: #8B4513;

height: 24px;

}

#controls {

margin-top: 10px;

}

button {

background-color: #8B4513;

color: white;

border: none;

padding: 8px 15px;

margin: 0 5px;

border-radius: 4px;

cursor: pointer;

font-size: 14px;

transition: background-color 0.3s;

}

button:hover {

background-color: #A0522D;

}

.piece {

position: absolute;

border-radius: 50%;

pointer-events: none;

}

.black {

background: radial-gradient(circle at 30% 30%, #666, #000);

box-shadow: 1px 1px 2px rgba(0,0,0,0.7);

}

.white {

background: radial-gradient(circle at 30% 30%, #fff, #ccc);

box-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}

.last-move {

box-shadow: 0 0 5px 3px rgba(255, 215, 0, 0.7);

}

</style>

</head>

<body>

<h1>五子棋游戏</h1>

</div>

</div>

document.addEventListener('DOMContentLoaded', function() {

const canvas = document.getElementById('chess-board');

const ctx = canvas.getContext('2d');

const statusDisplay = document.getElementById('status');

const restartBtn = document.getElementById('restart');

const undoBtn = document.getElementById('undo');

const BOARD_SIZE = 15;

const CELL_SIZE = canvas.width / (BOARD_SIZE + 1);

const PIECE_RADIUS = CELL_SIZE * 0.4;

let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));

let currentPlayer = 1; // 1: 黑棋, 2: 白棋

let gameOver = false;

let moveHistory = [];

let lastMove = null;

// 初始化棋盘

function initBoard() {

// 清空棋盘

board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));

currentPlayer = 1;

gameOver = false;

moveHistory = [];

lastMove = null;

statusDisplay.textContent = '黑方回合';

// 清除所有棋子DOM元素

document.querySelectorAll('.piece').forEach(el => el.remove());

// 绘制棋盘

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#DEB887';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制网格线

ctx.strokeStyle = '#000';

ctx.lineWidth = 1;

for (let i = 0; i < BOARD_SIZE; i++) {

// 横线

ctx.beginPath();

ctx.moveTo(CELL_SIZE, CELL_SIZE * (i + 1));

ctx.lineTo(CELL_SIZE * BOARD_SIZE, CELL_SIZE * (i + 1));

ctx.stroke();

// 竖线

ctx.beginPath();

ctx.moveTo(CELL_SIZE * (i + 1), CELL_SIZE);

ctx.lineTo(CELL_SIZE * (i + 1), CELL_SIZE * BOARD_SIZE);

ctx.stroke();

}

// 绘制五个黑点

const dots = [

[3, 3], [3, 11], [7, 7], [11, 3], [11, 11]

];

ctx.fillStyle = '#000';

dots.forEach(([x, y]) => {

ctx.beginPath();

ctx.arc(

CELL_SIZE * (x + 1),

CELL_SIZE * (y + 1),

CELL_SIZE * 0.1,

Math.PI * 2

);

ctx.fill();

});

}

// 放置棋子

function placePiece(x, y) {

if (gameOver || board[x][y] !== 0) return false;

board[x][y] = currentPlayer;

moveHistory.push({x, y, player: currentPlayer});

lastMove = {x, y};

// 创建棋子DOM元素

const piece = document.createElement('div');

piece.className = `piece ${currentPlayer === 1 ? 'black' : 'white'}`;

if (lastMove && lastMove.x === x && lastMove.y === y) {

piece.classList.add('last-move');

}

piece.style.width = `${PIECE_RADIUS * 2}px`;

piece.style.height = `${PIECE_RADIUS * 2}px`;

piece.style.left = `${CELL_SIZE * (x + 1) - PIECE_RADIUS}px`;

piece.style.top = `${CELL_SIZE * (y + 1) - PIECE_RADIUS}px`;

document.getElementById('game-container').appendChild(piece);

// 检查胜利

if (checkWin(x, y)) {

gameOver = true;

statusDisplay.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}获胜!`;

return true;

}

// 切换玩家

currentPlayer = currentPlayer === 1 ? 2 : 1;

statusDisplay.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}回合`;

return true;

}

// 检查是否获胜

function checkWin(x, y) {

const directions = [

[1, 0], [0, 1], [1, 1], [1, -1] // 横、竖、斜、反斜

];

for (const [dx, dy] of directions) {

let count = 1;

// 正向检查

for (let i = 1; i < 5; i++) {

const nx = x + dx * i;

const ny = y + dy * i;

if (nx < 0 || nx >= BOARD_SIZE || ny < 0 || ny >= BOARD_SIZE || board[nx][ny] !== currentPlayer) {

break;

}

count++;

}

// 反向检查

for (let i = 1; i < 5; i++) {

const nx = x - dx * i;

const ny = y - dy * i;

if (nx < 0 || nx >= BOARD_SIZE || ny < 0 || ny >= BOARD_SIZE || board[nx][ny] !== currentPlayer) {

break;

}

count++;

}

if (count >= 5) return true;

}

return false;

}

// 悔棋

function undoMove() {

if (gameOver || moveHistory.length === 0) return;

const lastMove = moveHistory.pop();

board[lastMove.x][lastMove.y] = 0;

currentPlayer = lastMove.player;

// 移除最后一个棋子DOM

const pieces = document.querySelectorAll('.piece');

if (pieces.length > 0) {

pieces[pieces.length - 1].remove();

}

// 如果有上一个棋子，添加高亮

if (moveHistory.length > 0) {

const prevMove = moveHistory[moveHistory.length - 1];

const prevPieces = document.querySelectorAll('.piece');

prevPieces.forEach(p => p.classList.remove('last-move'));

for (let i = 0; i < prevPieces.length; i++) {

const piece = prevPieces[i];

const pieceX = Math.round((parseInt(piece.style.left) + PIECE_RADIUS) / CELL_SIZE) - 1;

const pieceY = Math.round((parseInt(piece.style.top) + PIECE_RADIUS) / CELL_SIZE) - 1;

if (pieceX === prevMove.x && pieceY === prevMove.y) {

piece.classList.add('last-move');

break;

}

statusDisplay.textContent = `${currentPlayer === 1 ? '黑方' : '白方'}回合`;

}

// 点击事件处理

canvas.addEventListener('click', function(e) {

if (gameOver) return;

const rect = canvas.getBoundingClientRect();

const x = Math.round((e.clientX - rect.left) / CELL_SIZE) - 1;

const y = Math.round((e.clientY - rect.top) / CELL_SIZE) - 1;

if (x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE) {

placePiece(x, y);

}

});

// 按钮事件

restartBtn.addEventListener('click', initBoard);

undoBtn.addEventListener('click', undoMove);

// 初始化游戏

initBoard();

});

</script>

</body>

</html>

margin-top 属性

上一篇：2020年度中央机关公开遴选和公开选调公务员报名即将开始
下一篇：Grafana可视化平台面板之Gauge仪表和Bar Gauge条形仪表

网页五指棋游戏（五指棋单机）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?