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

哈哈哈，好神奇，AI生成的五子棋程序，不知道能不能运行

zhezhongyun 2025-08-06 23:59 54 浏览

<!DOCTYPE html>

<head>

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

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#8B5A2B',

secondary: '#D2B48C',

board: '#DEB887',

black: '#000000',

white: '#FFFFFF',

fontFamily: {

sans: ['Inter', 'system-ui', 'sans-serif'],

}

</script>

@layer utilities {

.content-auto {

content-visibility: auto;

}

.board-grid {

background-size: 100% 100%;

background-image: linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 1px),

linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 1px);

}

.piece-shadow {

filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

}

.piece-transition {

transition: all 0.2s ease-out;

}

.btn-hover {

transition: all 0.2s ease;

}

.btn-hover:hover {

transform: translateY(-2px);

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}

</style>

</head>

<p class="text-secondary mt-2">经典对弈游戏</p>

</div>

</div>

</div>

<i class="fa-solid fa-info-circle mr-2 text-primary"></i>游戏信息

</h2>

</div>

</div>

</div>

<i class="fa-solid fa-crown mr-2 text-primary"></i>游戏规则

</h2>

<span>黑棋和白棋轮流在棋盘上落子</span>

</li>

<span>先在横、竖或斜方向形成五子连线者获胜</span>

</li>

<span>点击棋盘上的交叉点放置棋子</span>

</li>

</ul>

</div>

<i class="fa-solid fa-refresh mr-2"></i>重新开始

</button>

<i class="fa-solid fa-undo mr-2"></i>悔棋

</button>

</div>

</div>

</div>

<p class="text-gray-600 mb-6">恭喜您赢得了这场精彩的比赛!</p>

开始新游戏

</button>

</div>

document.addEventListener('DOMContentLoaded', () => {

// 游戏常量

const BOARD_SIZE = 15; // 15x15的棋盘

const CELL_SIZE = Math.min(window.innerWidth * 0.8 / BOARD_SIZE, window.innerHeight * 0.6 / BOARD_SIZE);

const PIECE_SIZE = CELL_SIZE * 0.8;

// 游戏状态

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

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

let gameActive = true;

let moveHistory = [];

let gameTime = 0;

let timerInterval;

// DOM元素

const canvas = document.getElementById('gameCanvas');

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

const statusText = document.getElementById('statusText');

const currentPlayerEl = document.getElementById('currentPlayer');

const playerText = document.getElementById('playerText');

const moveCountEl = document.getElementById('moveCount');

const gameTimeEl = document.getElementById('gameTime');

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

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

const winModal = document.getElementById('winModal');

const winnerText = document.getElementById('winnerText');

const newGameBtn = document.getElementById('newGameBtn');

// 设置Canvas尺寸

canvas.width = CELL_SIZE * (BOARD_SIZE - 1);

canvas.height = CELL_SIZE * (BOARD_SIZE - 1);

// 绘制棋盘

function drawBoard() {

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

// 绘制网格线

ctx.strokeStyle = '#8B4513';

ctx.lineWidth = 1.5;

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

// 水平线

ctx.beginPath();

ctx.moveTo(0, i * CELL_SIZE);

ctx.lineTo(canvas.width, i * CELL_SIZE);

ctx.stroke();

// 垂直线

ctx.beginPath();

ctx.moveTo(i * CELL_SIZE, 0);

ctx.lineTo(i * CELL_SIZE, canvas.height);

ctx.stroke();

}

// 绘制天元和星位

const starPoints = [

{x: 3, y: 3}, {x: 3, y: 11}, {x: 7, y: 7},

{x: 11, y: 3}, {x: 11, y: 11}

];

starPoints.forEach(point => {

ctx.beginPath();

ctx.arc(point.x * CELL_SIZE, point.y * CELL_SIZE, 4, 0, Math.PI * 2);

ctx.fillStyle = '#8B4513';

ctx.fill();

});

// 绘制棋子

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

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

if (gameBoard[i][j] !== 0) {

drawPiece(i, j, gameBoard[i][j]);

}

// 绘制棋子

function drawPiece(row, col, player) {

const x = col * CELL_SIZE;

const y = row * CELL_SIZE;

// 棋子阴影

ctx.beginPath();

ctx.arc(x, y, PIECE_SIZE / 2 + 2, 0, Math.PI * 2);

ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';

ctx.fill();

// 棋子本体

ctx.beginPath();

ctx.arc(x, y, PIECE_SIZE / 2, 0, Math.PI * 2);

if (player === 1) {

// 黑棋 - 渐变效果

const gradient = ctx.createRadialGradient(

x - PIECE_SIZE / 6, y - PIECE_SIZE / 6, PIECE_SIZE / 10,

x, y, PIECE_SIZE / 2

);

gradient.addColorStop(0, '#555');

gradient.addColorStop(1, '#000');

ctx.fillStyle = gradient;

} else {

// 白棋 - 渐变效果

const gradient = ctx.createRadialGradient(

x - PIECE_SIZE / 6, y - PIECE_SIZE / 6, PIECE_SIZE / 10,

x, y, PIECE_SIZE / 2

);

gradient.addColorStop(0, '#fff');

gradient.addColorStop(1, '#ddd');

ctx.fillStyle = gradient;

}

ctx.fill();

// 棋子边缘

ctx.strokeStyle = player === 1 ? '#333' : '#ccc';

ctx.lineWidth = 1;

ctx.stroke();

}

// 检查胜利条件

function checkWin(row, col, player) {

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 newRow = row + i * dy;

const newCol = col + i * dx;

if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {

break;

}

if (gameBoard[newRow][newCol] === player) {

count++;

} else {

break;

}

// 反向检查

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

const newRow = row - i * dy;

const newCol = col - i * dx;

if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {

break;

}

if (gameBoard[newRow][newCol] === player) {

count++;

} else {

break;

}

if (count >= 5) {

return true;

}

return false;

}

// 检查平局

function checkDraw() {

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

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

if (gameBoard[i][j] === 0) {

return false; // 还有空位，不是平局

}

return true; // 棋盘已满，平局

}

// 更新游戏状态显示

function updateGameStatus() {

if (gameActive) {

statusText.textContent = `游戏进行中 - ${currentPlayer === 1 ? '黑棋' : '白棋'}回合`;

currentPlayerEl.className = `w-6 h-6 rounded-full ${currentPlayer === 1 ? 'bg-black' : 'bg-white border border-gray-300'} mr-2 piece-shadow`;

playerText.textContent = currentPlayer === 1 ? '黑棋' : '白棋';

}

moveCountEl.textContent = moveHistory.length;

}

// 更新游戏时间

function updateGameTime() {

gameTime++;

const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0');

const seconds = (gameTime % 60).toString().padStart(2, '0');

gameTimeEl.textContent = `${minutes}:${seconds}`;

}

// 开始计时

function startTimer() {

clearInterval(timerInterval);

timerInterval = setInterval(updateGameTime, 1000);

}

// 停止计时

function stopTimer() {

clearInterval(timerInterval);

}

// 显示胜利模态框

function showWinModal(winner) {

gameActive = false;

stopTimer();

winnerText.textContent = `${winner === 1 ? '黑棋' : '白棋'}获胜!`;

winModal.classList.remove('hidden');

// 添加动画效果

setTimeout(() => {

winModal.classList.add('opacity-100');

winModal.querySelector('div').classList.remove('scale-95');

winModal.querySelector('div').classList.add('scale-100');

}, 10);

}

// 隐藏胜利模态框

function hideWinModal() {

winModal.classList.remove('opacity-100');

winModal.querySelector('div').classList.remove('scale-100');

winModal.querySelector('div').classList.add('scale-95');

setTimeout(() => {

winModal.classList.add('hidden');

}, 300);

}

// 重置游戏

function resetGame() {

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

currentPlayer = 1;

gameActive = true;

moveHistory = [];

gameTime = 0;

drawBoard();

updateGameStatus();

gameTimeEl.textContent = '00:00';

stopTimer();

startTimer();

hideWinModal();

}

// 悔棋

function undoMove() {

if (moveHistory.length === 0 || !gameActive) {

return;

}

const lastMove = moveHistory.pop();

gameBoard[lastMove.row][lastMove.col] = 0;

currentPlayer = lastMove.player; // 回到上一个玩家

drawBoard();

updateGameStatus();

}

// 点击棋盘事件

canvas.addEventListener('click', (e) => {

if (!gameActive) return;

const rect = canvas.getBoundingClientRect();

const scaleX = canvas.width / rect.width;

const scaleY = canvas.height / rect.height;

// 计算点击的格子坐标

const x = (e.clientX - rect.left) * scaleX;

const y = (e.clientY - rect.top) * scaleY;

const col = Math.round(x / CELL_SIZE);

const row = Math.round(y / CELL_SIZE);

// 检查坐标是否在棋盘内且为空

if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE && gameBoard[row][col] === 0) {

// 落子

gameBoard[row][col] = currentPlayer;

moveHistory.push({row, col, player: currentPlayer});

// 添加落子动画效果

drawBoard();

// 检查是否胜利

if (checkWin(row, col, currentPlayer)) {

showWinModal(currentPlayer);

return;

}

// 检查是否平局

if (checkDraw()) {

gameActive = false;

stopTimer();

statusText.textContent = '游戏结束 - 平局!';

return;

}

// 切换玩家

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

updateGameStatus();

}

});

// 鼠标悬停预览效果

canvas.addEventListener('mousemove', (e) => {

if (!gameActive) return;

const rect = canvas.getBoundingClientRect();

const scaleX = canvas.width / rect.width;

const scaleY = canvas.height / rect.height;

// 计算鼠标所在的格子坐标

const x = (e.clientX - rect.left) * scaleX;

const y = (e.clientY - rect.top) * scaleY;

const col = Math.round(x / CELL_SIZE);

const row = Math.round(y / CELL_SIZE);

// 清除之前的预览

drawBoard();

// 如果坐标在棋盘内且为空，绘制预览棋子

if (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE && gameBoard[row][col] === 0) {

ctx.beginPath();

ctx.arc(col * CELL_SIZE, row * CELL_SIZE, PIECE_SIZE / 2, 0, Math.PI * 2);

if (currentPlayer === 1) {

ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';

} else {

ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';

}

ctx.fill();

}

});

// 鼠标离开棋盘时重绘

canvas.addEventListener('mouseleave', () => {

drawBoard();

});

// 事件监听

restartBtn.addEventListener('click', resetGame);

undoBtn.addEventListener('click', undoMove);

newGameBtn.addEventListener('click', resetGame);

// 初始化游戏

drawBoard();

updateGameStatus();

startTimer();

});

</script>

</body>

</html>

transition-duration 属性

上一篇：d3 v4 穿透图干货
下一篇：源码推荐(11.24):三维多选按钮，答题选择切换页

哈哈哈，好神奇，AI生成的五子棋程序，不知道能不能运行

相关推荐

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

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

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

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

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

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

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

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

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

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