当前位置：首页 > article >正文

用AI写游戏1——js实现贪吃蛇

article 2025/2/9 2:10:31

使用模型通义千问
提示词：
用js html css 做一个贪吃蛇的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <link rel="stylesheet" href="css/test023.css">
</head>
<body>
<div id="gameBoard"></div>
<script src="js/test023.js"></script>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

#gameBoard {
    display: grid;
    width: 400px;
    height: 400px;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    border: 5px solid #333;
}

.cell {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ddd;
}

.snake {
    background-color: #28a745;
}

.food {
    background-color: #dc3545;
}

const board = document.getElementById('gameBoard');
const rows = 20, cols = 20;
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: -1 };
let food = createFood();
let gameOver = false;

function createBoard() {
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            board.appendChild(cell);
        }
    }
}

function updateBoard() {
    const cells = document.querySelectorAll('.cell');
    cells.forEach(cell => cell.className = 'cell');

    snake.forEach(segment => {
        const index = segment.y * cols + segment.x;
        cells[index].classList.add('snake');
    });

    const foodIndex = food.y * cols + food.x;
    cells[foodIndex].classList.add('food');
}

function createFood() {
    let newFood;
    do {
        newFood = { x: Math.floor(Math.random() * cols), y: Math.floor(Math.random() * rows) };
    } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
    return newFood;
}

function moveSnake() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
    if (head.x < 0 || head.x >= cols || head.y < 0 || head.y >= rows || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
        food = createFood();
    } else {
        snake.pop();
    }
}

document.addEventListener('keydown', event => {
    switch (event.key) {
        case 'ArrowUp':
            if (direction.y === 0) direction = { x: 0, y: -1 };
            break;
        case 'ArrowDown':
            if (direction.y === 0) direction = { x: 0, y: 1 };
            break;
        case 'ArrowLeft':
            if (direction.x === 0) direction = { x: -1, y: 0 };
            break;
        case 'ArrowRight':
            if (direction.x === 0) direction = { x: 1, y: 0 };
            break;
    }
});

createBoard();

const gameLoop = setInterval(() => {
    if (gameOver) {
        clearInterval(gameLoop);
        alert('Game Over!');
        return;
    }
    moveSnake();
    updateBoard();
}, 100);