AI game creator

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

No:9346

222

←

Prev Next

→

Snake Game
Developer User4338｜Date and time 23/7/23 20:49:23
Build time 43.329 sec｜Game capacity 4.475KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

// 定义蛇的初始位置和速度
    var snake = [
        { x: 200, y: 200 },
        { x: 190, y: 200 },
        { x: 180, y: 200 },
        { x: 170, y: 200 },
        { x: 160, y: 200 }
    ];
    var dx = 10; // 每次移动的横向距离
    var dy = 0;  // 每次移动的纵向距离

// 定义食物的初始位置
    var foodX;
    var foodY;

// 游戏得分
    var score = 0;

// 初始化游戏
    function initGame() {
        createFood();
        document.addEventListener("keydown", changeDirection);
        setInterval(move, 100);
    }

// 绘制蛇和食物
    function drawSnake() {
        snake.forEach(drawSnakePart);
    }

// 绘制蛇的每个部分
    function drawSnakePart(snakePart) {
        context.fillStyle = "green";
        context.fillRect(snakePart.x, snakePart.y, 10, 10);
        context.strokeStyle = "darkgreen";
        context.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }

// 移动蛇
    function move() {
        // 创建新的蛇头
        var head = { x: snake[0].x + dx, y: snake[0].y + dy };

// 判断是否撞墙或撞到自身
        if (
            head.x < 0 ||
            head.x >= canvas.width ||
            head.y < 0 ||
            head.y >= canvas.height ||
            checkCollision(head)
        ) {
            gameOver();
            return;
        }

snake.unshift(head); // 将新的蛇头添加到蛇数组的开头

// 判断是否吃到食物
        if (head.x === foodX && head.y === foodY) {
            score += 10;
            createFood();
        } else {
            snake.pop(); // 如果没有吃到食物，则移除蛇尾
        }

drawGame();
    }

// 检查蛇头是否与蛇身相撞
    function checkCollision(head) {
        for (var i = 1; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
                return true;
            }
        }
        return false;
    }

// 创建食物的位置
    function createFood() {
        foodX = Math.floor(Math.random() * (canvas.width / 10)) * 10;
        foodY = Math.floor(Math.random() * (canvas.height / 10)) * 10;

snake.forEach(function (part) {
            if (part.x === foodX && part.y === foodY) {
                createFood();
            }
        });
    }

// 绘制食物
    function drawFood() {
        context.fillStyle = "red"
        context.fillRect(foodX, foodY, 10, 10);
    }

// 绘制游戏画面
    function drawGame() {
        context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
        drawSnake();
        drawFood();
        drawScore();
    }

// 绘制游戏得分
    function drawScore() {
        context.fillStyle = "black";
        context.font = "20px Arial";
        context.fillText("得分: " + score, 10, 20);
    }

// 改变蛇的移动方向
    function changeDirection(event) {
        var LEFT_KEY = 37;
        var RIGHT_KEY = 39;
        var UP_KEY = 38;
        var DOWN_KEY = 40;

var keyPressed = event.keyCode;

var goingUp = dy === -10;
        var goingDown = dy === 10;
        var goingRight = dx === 10;
        var goingLeft = dx === -10;

if (keyPressed === LEFT_KEY && !goingRight) {
            dx = -10;
            dy = 0;
        }

if (keyPressed === UP_KEY && !goingDown) {
            dx = 0;
            dy = -10;
        }

if (keyPressed === RIGHT_KEY && !goingLeft) {
            dx = 10;
            dy = 0;
        }

if (keyPressed === DOWN_KEY && !goingUp) {
            dx = 0;
            dy = 10;
        }
    }

// 游戏结束
    function gameOver() {
        context.fillStyle = "black";
        context.font = "40px Arial";
        context.fillText("游戏结束", 100, 200);
        context.fillText("得分: " + score, 130, 240);
    }

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