createjs实现贪吃蛇，包含成长及游戏条件重置

本文链接：https://blog.csdn.net/jyl919221lc/article/details/136946490
由于给定内容中没有具体信息，无法生成包含关键信息的摘要。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreateJS 贪吃蛇游戏</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        var canvas, stage, snake, food, score, direction, gameLoop;

        function init() {
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);
            score = 0;
            direction = "right";
            snake = new createjs.Container();
            stage.addChild(snake);
            createSnake();
            createFood();
            gameLoop = setInterval(updateGame, 100); //移动速度0.1s一格
            window.addEventListener("keydown", changeDirection);
            //设置帧率
            createjs.Ticker.setFPS(10);
            createjs.Ticker.addEventListener("tick", stage);
        }

        // 添加蛇
        function createSnake() {
            var snakePart = new createjs.Shape();
            snakePart.graphics.beginFill("#000").drawRect(0, 0, 20, 20);
            snakePart.x = 0;
            snake.addChild(snakePart);
        }

        // 添加食物
        function createFood() {
            food = new createjs.Shape();
            food.graphics.beginFill("#f00").drawRect(0, 0, 20, 20);
            food.x = Math.floor(Math.random() * 20) * 20;
            food.y = Math.floor(Math.random() * 20) * 20;
            stage.addChild(food);
        }

        // 添加蛇身
        function addSnakePart() {
            var newPart = new createjs.Shape();
            newPart.graphics.beginFill("#000").drawRect(0, 0, 20, 20);
            newPart.x = snake.getChildAt(0).x;
            newPart.y = snake.getChildAt(0).y;
            snake.addChildAt(newPart, 0);
        }

        // 移动
        function updateGame() {
            var head = snake.getChildAt(0); //蛇头
            var newHead = head.clone(); //克隆蛇头 -- 如果未吃到食物则替换蛇头
            switch (direction) {
                case "right":
                    newHead.x += 20;
                    break;
                case "left":
                    newHead.x -= 20;
                    break;
                case "up":
                    newHead.y -= 20;
                    break;
                case "down":
                    newHead.y += 20;
                    break;
            }
            
            snake.addChildAt(newHead, 0);

            if (checkCollision()) {
                resetGame();
                return;
            }
            //判断是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                score++;
                stage.removeChild(food);
                createFood();
                addSnakePart();
            } else {
                //如果没有吃到食物，移除蛇尾
                snake.removeChildAt(snake.getNumChildren() - 1);
            }

            stage.update();
        }

        //碰撞检测,蛇头碰到蛇身，或者蛇头碰到边界
        function checkCollision() {
            var head = snake.getChildAt(0);
            if (head.x < 0 || head.x >= 400 || head.y < 0 || head.y >= 400) {
                return true;
            }
            for (var i = 1; i < snake.getNumChildren(); i++) {
                var part = snake.getChildAt(i);
                if (head.x === part.x && head.y === part.y) {
                    return true;
                }
            }
            return false;
        }

        // 游戏重置
        function resetGame() {
            clearInterval(gameLoop);
            stage.removeAllChildren();
            snake.removeAllChildren();
            init();
        }

        //键盘控制 决定蛇头移动方向
        function changeDirection(event) {
            var newDirection = "";
            switch (event.keyCode) {
                case 37:
                    newDirection = "left";
                    break;
                case 38:
                    newDirection = "up";
                    break;
                case 39:
                    newDirection = "right";
                    break;
                case 40:
                    newDirection = "down";
                    break;
            }
            if (newDirection !== "" && (newDirection === "left" && direction !== "right" || newDirection === "right" && direction !== "left" || newDirection === "up" && direction !== "down" || newDirection === "down" && direction !== "up")) {
                direction = newDirection;
            }
        }

        init();
    </script>
</body>
</html>