AI game creator

Click here for free DL of the app version that can save data.

No:9799

138

←

Prev Next

→

Snake Game
Developer User4428｜Date and time 23/7/27 16:22:56
Build time 61.052 sec｜Game capacity 6.831KB｜

Script

你好！以下是一个简单的贪吃蛇游戏的HTML和JavaScript代码，你可以将它保存为一个单独的HTML文件，在手机上运行并玩游戏。请注意我用了拼音代替了一些英文术语，这样你可以更方便地理解。

请将以上代码保存为一个名为`snake-game.html`的文件，在手机上用任何支持HTML的浏览器打开即可玩贪吃蛇游戏。在游戏中，你可以使用上下左右方向键（用于模拟手机上的滑动操作）来控制蛇的移动方向。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
    #game-board { 
        border: 1px solid #000; 
        width: 300px; 
        height: 300px; 
        position: relative; 
        margin: 0 auto; 
    }

.snake-body {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #333;
    }

.food {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #f00;
    }
</style>
</head>
<body>
<div id="game-board"></div>

function createGameBoard() {
        gameBoard = document.getElementById('game-board');
        gameBoard.style.width = '300px';
        gameBoard.style.height = '300px';
        gameBoard.style.position = 'relative';
        gameBoard.style.border = '1px solid #000';
        gameBoard.style.margin = '0 auto';
        gameBoard.innerHTML = ""; // 清空游戏面板

score = 0; // 重置得分
        snakeSpeed = 200; // 重置蛇的速度
    }

function createSnake() {
        // 初始位置为左上角
        snake = [
            { x: -20, y: 0 },
            { x: 0, y: 0 },
            { x: 20, y: 0 }
        ];
        direction = 'right'; // 初始移动方向为右
    }

function drawSnake() {
        snake.forEach(function (segment, index) {
            snakeBody = document.createElement('div');
            snakeBody.className = 'snake-body';
            snakeBody.style.left = segment.x + 'px';
            snakeBody.style.top = segment.y + 'px';
            gameBoard.appendChild(snakeBody);
        });
    }

function clearSnake() {
        if (snakeBody) {
            gameBoard.removeChild(snakeBody);
        }
    }

function createFood() {
        // 随机生成食物的位置
        var foodX = Math.floor(Math.random() * 15) * 20;
        var foodY = Math.floor(Math.random() * 15) * 20;

// 检查食物是否与蛇的身体重叠，若是则重新生成
        for (var i = 0; i < snake.length; i++) {
            if (foodX === snake[i].x && foodY === snake[i].y) {
                createFood();
                return;
            }
        }

// 创建食物
        food = document.createElement('div');
        food.className = 'food';
        food.style.left = foodX + 'px';
        food.style.top = foodY + 'px';
        gameBoard.appendChild(food);
    }

function updateSnake() {
        var snakeHeadX = snake[0].x;
        var snakeHeadY = snake[0].y;

// 根据方向更新蛇头的位置
        switch (direction) {
            case 'right':
                snakeHeadX += 20;
                break;
            case 'left':
                snakeHeadX -= 20;
                break;
            case 'up':
                snakeHeadY -= 20;
                break;
            case 'down':
                snakeHeadY += 20;
                break;
        }

// 创建新的蛇头
        var newHead = { x: snakeHeadX, y: snakeHeadY };

// 将新的蛇头加到蛇的数组中
        snake.unshift(newHead);

// 移除并返回蛇尾
        var removedTail = snake.pop();

// 清除蛇尾的显示
        clearSnake();

// 碰到边界或碰到自己时游戏结束
        if (snakeHeadX < 0 || snakeHeadY < 0 || snakeHeadX >= gameBoard.offsetWidth || snakeHeadY >= gameBoard.offsetHeight || checkSnakeCollision()) {
            gameover();
            return;
        }

// 检查是否吃到食物
        if (snakeHeadX === food.offsetLeft && snakeHeadY === food.offsetTop) {
            // 增加得分
            score++;
            // 加快蛇的速度
            if (snakeSpeed > 50) {
                snakeSpeed -= 10;
            }
            // 移除食物
            gameBoard.removeChild(food);
            // 创建新的食物
            createFood();
        } else {
            // 如果没有吃到食物则移除被移除的蛇尾和显示新的蛇头
            clearSnake();
            drawSnake();
        }
    }

function checkSnakeCollision() {
        var snakeHead = snake[0];

// 检查蛇头是否与蛇的身体的其他部分碰撞
        for (var i = 1; i < snake.length; i++) {
            if (snakeHead.x === snake[i].x && snakeHead.y === snake[i].y) {
                return true;
            }
        }

return false;
    }

function startGame() {
        createGameBoard();
        createSnake();
        createFood();

// 监听方向键按下事件
        window.addEventListener('keydown', changeDirection);

// 每隔一段时间更新蛇的位置
        setInterval(updateSnake, snakeSpeed);
    }

function gameover() {
        // 清空游戏面板
        gameBoard.innerHTML = "";

// 显示游戏结束消息
        var gameOverMsg = document.createElement('h1');
        gameOverMsg.innerText = '游戏结束';
        gameOverMsg.style.textAlign = 'center';
        gameBoard.appendChild(gameOverMsg);

// 显示最终得分
        var scoreMsg = document.createElement('p');
        scoreMsg.innerText = '得分: ' + score;
        scoreMsg.style.textAlign = 'center';
        scoreMsg.style.fontSize = '24px';
        gameBoard.appendChild(scoreMsg);

// 停止监听方向键事件
        window.removeEventListener('keydown', changeDirection);
    }

// 开始游戏
    startGame();
</script>
</body>
</html>
```