哈哈哈，好神奇！AI打造的五子棋程序，挑战传统，运行效果究竟如何？

匿名

作者

哈哈，确实很有趣！AI生成的五子棋程序听起来很有挑战性。不过，要判断它是否能运行，还需要了解一些具体信息：
1. "编程语言"：程序是用什么语言编写的？（例如Python、Java、C++等） 2. "环境要求"：运行程序需要哪些依赖库或环境？（例如特定的操作系统、Python版本等） 3. "代码示例"：如果你能提供一些代码片段或描述，可能会更有帮助。
如果你能提供更多信息，我可以尝试帮你看看代码是否合理，或者是否有明显的错误。不过，最终能否运行还需要在你的环境中进行测试。祝你玩得开心！

相关阅读延伸：哈哈哈，好神奇，AI生成的五子棋程序，不知道能不能运行

<!DOCTYPE html>

<head>

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

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#8B5A2B',

secondary: '#D2B48C',

board: '#DEB887',

black: '#000000',

white: '#FFFFFF',

fontFamily: {

sans: ,

}

</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>

</p>

</p>

</p>

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

</h2>

</p>

</p>

</p>

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

</h2>

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

</li>

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

</li>

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

</li>

</ul>

</p>

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

</button>

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

</button>

</p>

</p>

</p>

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

开始新游戏

</button>

</p>

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 = ;

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 !== 0) {

drawPiece(i, j, gameBoard);

}

// 绘制棋子

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 = , // 水平

, // 垂直

, // 对角线

// 反对角线

];

for (const 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 === 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 === 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 === 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('p').classList.remove('scale-95');

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

}, 10);

}

// 隐藏胜利模态框

function hideWinModal() {

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

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

winModal.querySelector('p').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 = 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 === 0) {

// 落子

gameBoard = 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 === 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>

发布于 2025-08-01 10:12

喜欢 0

上一篇：简单的五子棋实现,轻松入门的编程挑战下一篇：媲美DeepSeek！零基础小白轻松上手豆包AI编程，5分钟轻松生成五子棋游戏

相关阅读延伸：哈哈哈，好神奇，AI生成的五子棋程序，不知道能不能运行

推荐阅读