帮我生成一个贪吃蛇游戏 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
display: block;
margin: 0 auto;
}
body {
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>贪吃蛇游戏</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

// 获取画布和绘图上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 设置贪吃蛇的初始状态
let snake = [{ x: 200, y: 200 }];
let direction = 'RIGHT';
let food = { x: getRandomCoordinate(), y: getRandomCoordinate() };
let score = 0;
// 随机生成食物的位置
function getRandomCoordinate() {
return Math.floor(Math.random() * 20) * 20;
}
// 绘制贪吃蛇
function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, 20, 20);
});
}
// 绘制食物
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, 20, 20);
}
// 更新贪吃蛇的位置
function updateSnake() {
const head = { ...snake[0] };
if (direction === 'RIGHT') head.x += 20;
if (direction === 'LEFT') head.x -= 20;
if (direction === 'UP') head.y -= 20;
if (direction === 'DOWN') head.y += 20;
snake.unshift(head);
// 检查是否吃到食物
if (head.x === food.x && head.y === food.y) {
food = { x: getRandomCoordinate(), y: getRandomCoordinate() };
score += 10;
} else {
snake.pop();
}
}
// 检查是否撞墙或撞到自己
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
return true;
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
// 更新方向
document.addEventListener('keydown', event => {
if (event.key === 'ArrowRight' && direction !== 'LEFT') direction = 'RIGHT';
if (event.key === 'ArrowLeft' && direction !== 'RIGHT') direction = 'LEFT';
if (event.key === 'ArrowUp' && direction !== 'DOWN') direction = 'UP';
if (event.key === 'ArrowDown' && direction !== 'UP') direction = 'DOWN';
});
// 游戏主循环
function gameLoop() {
if (checkCollision()) {
alert('游戏结束! 得分: ' + score);
document.location.reload();
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFood();
updateSnake();
drawSnake();
setTimeout(gameLoop, 100);
}
gameLoop();

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>五子棋游戏</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 30px;
height: 30px;
text-align: center;
font-size: 24px;
border: 1px solid black;
cursor: pointer;
}
.black {
color: black;
}
.white {
color: white;
}
body {
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>五子棋游戏</h1>
<table id="chessboard"></table>
<script src="gomoku.js"></script>
</body>
</html>

复制代码

document.addEventListener('DOMContentLoaded', () => {
const boardSize = 15;
const table = document.getElementById('chessboard');
let board = Array(boardSize).fill().map(() => Array(boardSize).fill(null));
let currentPlayer = 'black';
let gameOver = false;
// 创建棋盘
for (let i = 0; i < boardSize; i++) {
const row = document.createElement('tr');
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('td');
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
row.appendChild(cell);
}
table.appendChild(row);
}
function handleCellClick(event) {
if (gameOver) return;
const row = event.target.dataset.row;
const col = event.target.dataset.col;
if (!board[row][col]) {
board[row][col] = currentPlayer;
event.target.classList.add(currentPlayer);
if (checkWin(row, col, currentPlayer)) {
alert(`${currentPlayer === 'black' ? '黑棋' : '白棋'}胜利!`);
gameOver = true;
} else {
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
}
}
}
function checkWin(row, col, player) {
return (
checkDirection(row, col, player, 1, 0) || // 水平
checkDirection(row, col, player, 0, 1) || // 垂直
checkDirection(row, col, player, 1, 1) || // 正对角线
checkDirection(row, col, player, 1, -1) // 反对角线
);
}
function checkDirection(row, col, player, dr, dc) {
let count = 1;
for (let i = 1; i < 5; i++) {
const r = parseInt(row) + dr * i;
const c = parseInt(col) + dc * i;
if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break;
count++;
}
for (let i = 1; i < 5; i++) {
const r = parseInt(row) - dr * i;
const c = parseInt(col) - dc * i;
if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break;
count++;
}
return count >= 5;
}
});

复制代码