Egret 跳一跳实战教程，带你飞驰在跳跃的轨道上

2024-01-01 21:29:17

引言

大家好，我是 [你的名字]，一位 Egret 技术爱好者。今天，我将为大家带来 Egret 跳一跳实战教程的第一部分。在开始之前，如果你对 Egret 一点了解都没有，建议你看一下我之前写的一篇入门教程（一看就会的 Egret 入门教程）。如果你了解一点，那就让我们愉快地开车吧🚗🚗🚗。

准备资源

这部分没什么好说的，准备好素材就是了🤷‍♀️🤷‍♂️，一般就是图片和音频。当前跳一跳项目中用到的素材有（包括但不限于）：

背景图片：一张背景图片，建议是竖直的，比如一张手机壁纸。
人物图片：一张人物图片，建议是正方形的，比如一个卡通人物。
障碍物图片：一张或多张障碍物图片，建议是正方形的，比如一个小方块。
音效：一个或多个音效，比如跳跃音效、得分音效、游戏结束音效等。

开始编码

准备工作完成后，我们就可以开始编码了。首先，创建一个新的 Egret 项目，并将其命名为 "JumpJump"。然后，在项目中创建一个名为 "Main" 的 TypeScript 文件，并将其作为项目的入口文件。

在 Main 文件中，我们需要先引入必要的库和类，然后定义游戏的主类。游戏的初始化逻辑和主循环也需要在这里编写。

// 引入必要的库和类
import { DisplayObject, Sprite, Stage } from "egret";

// 定义游戏的主类
class Main extends egret.DisplayObjectContainer {

    // 游戏的主舞台
    private stage: Stage;

    // 游戏的背景图片
    private background: Sprite;

    // 游戏的人物图片
    private character: Sprite;

    // 游戏的障碍物图片
    private obstacles: Array<Sprite>;

    // 游戏的分数
    private score: number;

    // 游戏是否结束
    private gameOver: boolean;

    // 构造函数
    public constructor() {
        super();

        // 初始化游戏
        this.stage = egret.MainContext.instance.stage;
        this.background = new Sprite();
        this.character = new Sprite();
        this.obstacles = [];
        this.score = 0;
        this.gameOver = false;

        // 添加背景图片
        this.background.graphics.beginFill(0x000000);
        this.background.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
        this.background.graphics.endFill();
        this.addChild(this.background);

        // 添加人物图片
        this.character.graphics.beginFill(0xffffff);
        this.character.graphics.drawCircle(0, 0, 20);
        this.character.graphics.endFill();
        this.character.x = this.stage.stageWidth / 2;
        this.character.y = this.stage.stageHeight / 2;
        this.addChild(this.character);

        // 添加障碍物图片
        for (var i = 0; i < 10; i++) {
            var obstacle = new Sprite();
            obstacle.graphics.beginFill(0xff0000);
            obstacle.graphics.drawRect(0, 0, 20, 20);
            obstacle.graphics.endFill();
            obstacle.x = Math.random() * (this.stage.stageWidth - 20);
            obstacle.y = Math.random() * (this.stage.stageHeight - 20);
            this.obstacles.push(obstacle);
            this.addChild(obstacle);
        }

        // 添加事件监听器
        this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);

        // 启动游戏主循环
        this.addEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);
    }

    // 触摸事件处理函数
    private onTouchTap(e: egret.TouchEvent): void {
        // 让人物跳跃
        this.character.y -= 100;
    }

    // 主循环函数
    private onEnterFrame(e: egret.Event): void {
        // 更新人物的位置
        this.character.y += 1;

        // 更新障碍物的位置
        for (var i = 0; i < this.obstacles.length; i++) {
            var obstacle = this.obstacles[i];
            obstacle.y += 1;

            // 如果人物与障碍物发生碰撞，则游戏结束
            if (this.character.hitTestPoint(obstacle.x, obstacle.y)) {
                this.gameOver = true;
            }
        }

        // 更新分数
        this.score++;

        // 如果游戏结束，则显示游戏结束画面
        if (this.gameOver) {
            this.stage.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
            this.removeEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this);

            var gameOverText = new egret.TextField();
            gameOverText.text = "Game Over!";
            gameOverText.size = 30;
            gameOverText.x = this.stage.stageWidth / 2 - gameOverText.width / 2;
            gameOverText.y = this.stage.stageHeight / 2 - gameOverText.height / 2;
            this.addChild(gameOverText);
        }
    }
}