仿跳一跳小游戏
文章目录
- 一、游戏玩法介绍：
- 二、新建项目：
-
-
-
- 1. 新建 EUI 项目：
- 2. 游戏场景分析：
- 3. 加入图片资源。
-
-
- 三、创建游戏开始场景：
-
-
-
- 4. 分别在 resource 目录和 src 目录创建 scene 文件夹，并创建 EUI 组件 BeginScene：
- 5. 游戏开始场景 BeginScene 的布局
-
-
- 四、创建游戏场景界面：
-
-
-
- 6. 创建 EUI 组件 GameScene.ts：
- 7. 在 GameScene.exml 中实现布局：
- 8. 创建场景控制器 SceneManager类，并把它设计成单例：
- 9. 为游戏开始场景绑定点击方法，在 BeginScene.ts 中复制自定义粘贴开始按钮：
- 10. 在 GameScene.ts 中复制自定义属性：
-
-
- 五、小人跳跃轨迹：
-
-
-
- 11. 运动轨迹的表示：
- 12. 判断是否跳跃成功：
- 13. 跳跃失败的游戏结束界面：
-
-
一、游戏玩法介绍：
- 跳一跳使用手指按压屏幕蓄力；
- 根据力量大小控制小 i 来跳跃；
- 跳到下一个盒子上后积分累加；
- 落到下一个盒子之外游戏结束。
二、新建项目：
1. 新建 EUI 项目：
2. 游戏场景分析：
-
开始场景：
-
游戏场景：
-
游戏结束场景：
3. 加入图片资源。
三、创建游戏开始场景：
4. 分别在 resource 目录和 src 目录创建 scene 文件夹，并创建 EUI 组件 BeginScene：
5. 游戏开始场景 BeginScene 的布局
四、创建游戏场景界面：
6. 创建 EUI 组件 GameScene.ts：
7. 在 GameScene.exml 中实现布局：
-
image 组件设置背景图 bg_png，并填充上下左右；
-
添加容器组件 Group，设置 ID：blockPanel，同样填充上下左右：
-
在容器内添加 Label 组件，这是 ID：scoreLabel；
-
在容器内添加 image 组件，这是 ID：player；
8. 创建场景控制器 SceneManager类，并把它设计成单例：
// 场景控制单例
private static shared: SceneManager;
// 实例化单例获取方法
public static Shared(): SceneManager {
if(!SceneManager.shared) {
SceneManager.shared = new SceneManager();
}
return SceneManager.shared;
}
- 声明两个场景
// 开始场景
private beginScene: BeginScene;
// 游戏场景
private gameScene: GameScene;
- 修改 SceneMangager 控制器为容器，以便于在 Main.ts 的 createGameScene 创建场景界面添加此控制器：
class SceneManager extends egret.Sprite{}
- 在 Main.ts 的 createGameScene() 方法内添加场景控制器：
protected createGameScene(): void {
this.addChild(SceneManager.Shared());
}
- 在 SceneManger.ts 中实现初始化方法，实现数据初始化：
public constructor() {
super(); this.init();
}
/**
* 初始化
* */
private init() {
// 实例化两个场景
this.beginScene = new BeginScene();
this.gameScene = new GameScene();
// 默认添加开始场景
this.addChild(this.beginScene);
}
- 实现切换场景的方法：
// 切换场景
public changeScene(type) {
if(type == 'gameScene') {
this.beginScene.release();
}
// 移除所有显示列表中的对象
this.removeChildren();
// 添加下一个场景
this.addChild(this.gameScene);
}
- 注意：在 BeginScene.ts 内，release 方法是用来解绑按钮点击事件：
// 移除事件
public release() {
if(this.beginBtn.hasEventListener(egret.TouchEvent.TOUCH_TAP)) {
this.beginBtn.removeEventListener(
egret.TouchEvent.TOUCH_TAP,
this.tapHandler,
this);
}
}
9. 为游戏开始场景绑定点击方法，在 BeginScene.ts 中复制自定义粘贴开始按钮：
// 开始按钮
public beginBtn:eui.Button;
- 为按钮绑定点击事件：
protected childrenCreated():void {
super.childrenCreated();
// 页面加载完毕后，调用自定义初始化方法
this.init();
}
/**
* 初始化方法（给开始按钮绑定点击事件）
* */
private init() {
this.beginBtn.addEventListener(
egret.TouchEvent.TOUCH_TAP,
this.tapHandler,
this
);
}
// 点击按钮调用的方法
private tapHandler() {
// 切换场景
SceneManager.Shared().changeScene('gameScene');
}
10. 在 GameScene.ts 中复制自定义属性：
// 游戏场景组
public blockPanel:eui.Group;
// 游戏场景中的积分
public scoreLabel:eui.Label;
// 小 i
public player:eui.Image;
- 使用工厂设计模式来创建盒子方块（回收 / 复用）：
/**************************工厂设计模式*****************************/
// 所有方块资源的数组
private blockSourceNames: Array<string> = [];
// 所有方块的数组
private blockArr: Array<eui.Image> = [];
// 所有回收方块的数组
private reBackBlockArr: Array<eui.Image> = [];
- 工厂方法：
/**
* 工厂方法，创建一个方块
* */
private createBlock(): eui.Image {
// 定义一个方块盒子
var blockNode: eui.Image = null;
if(this.reBackBlockArr.length) {
// 回收池里有，则直接取
blockNode = this.reBackBlockArr.splice(0,1)[0];
}else {
// 回收池里面没有，则重新创建
blockNode = new eui.Image();
}
// 使用随机背景
let n = Math.floor(Math.random() * this.blockSourceNames.length);
blockNode.source = this.blockSourceNames[n];
this.blockPanel.addChild(blockNode);
// 设置方块的锚点
blockNode.anchorOffsetX = 222;
blockNode.anchorOffsetY = 78;
// 把新建的 block 添加进入 blockArr 里
this.blockArr.push(blockNode);
return blockNode;
}
- 初始化方法，定义音频变量，在初始化方法里加载音频：
/**************************音频*****************************/
// 按下的音频
private pushVoice: egret.Sound;
// 弹跳的音频
private jumpVoice: egret.Sound;
- 绑定手指按下屏幕和放开的事件；
- 设置玩家的锚点，选中底部圆心点的位置为锚点；
protected childrenCreated():void {
super.childrenCreated();
this.init();
}
/**
* 初始化
* */
private init() {
this.blockSourceNames = ['block1_png','block2_png','block3_png'];
// 初始化音频
this.pushVoice = RES.getRes('push_mp3');
this.jumpVoice = RES.getRes('jump_mp3');
// 打开 touchEnabled 属性
this.blockPanel.touchEnabled = true;
this.blockPanel.addEventListener(
egret.TouchEvent.TOUCH_TAP,
this.onKeyDown,
this
);
this.blockPanel.addEventListener(
egret.TouchEvent.TOUCH_END,
this.onKeyUp,
this
);
// 设置玩家锚点
this.player.anchorOffsetX = this.player.width / 2;
this.player.anchorOffsetY = this.player.height - 20;
}
- 添加方向变量，往右添加是正值1，往左是负值-1：
// 下一个盒子方向（1 靠右侧出现 / -1 靠左侧出现）
public direction: number = 1;
- 重置游戏的方法：
// 重置游戏
public reset() {
// 清空舞台
this.blockPanel.removeChildren();
this.blockArr = [];
// 添加一个方块
let blockNode = this.createBlock();
blockNode.touchEnabled = false;
// 设置方块的起始位置
blockNode.x = 200;
blockNode.y = this.height / 2 + blockNode.height;
this.currentBlock = blockNode;
// 摆正小人的位置
this.player.x = this.currentBlock.x;
this.player.y = this.currentBlock.y;
this.blockPanel.addChild(this.player);
// 添加积分
this.blockPanel.addChild(this.scoreLabel);
// 重置盒子方向
this.direction = 1;
// 添加下一块方块
this.addBlock();
}
- tan 的角度并声明落脚点
// tanθ 角度值
public tanAngle: number = 0.55604719640118;
// 落脚点
private targetPos: egret.Point;
- 添加方块盒子的方法：
/**
* 添加一个方块
* */
private addBlock() {
// 随机一个方块
let blockNode = this.createBlock();
// 设置位置
let distance = this.minDistance + Math.random()*(this.maxDistance - this.minDistance);
if(this.direction > 0) {
blockNode.x = this.currentBlock.x + distance;
blockNode.y = this.currentBlock.y - distance*this.tanAngle;
}else {
blockNode.x = this.currentBlock.x - distance;
blockNode.y = this.currentBlock.y - distance*this.tanAngle;
}
this.currentBlock = blockNode;
}
- 实现手指按下执行的方法：
/**
* 按下的事件逻辑
* */
private onKeyDown() {
// 播放按下的音频
this.pushSoundChannel = this.pushVoice.play(0,1);
// 变形
egret.Tween.get(this.player).to({
scaleY: 0.5
}, 3000);
this.isReadyJump = true;
}
- 实现手指松开的方法：停止按压
/**
* 放开的事件逻辑
* */
private onKeyUp() {
// 判断是否在按下状态
if(!this.isReadyJump) {
return;
}
// 声明落脚点坐标
if(!this.targetPos) {
this.targetPos = new egret.Point();
}
// 立即让屏幕不可点，等小人落下后重新可点
this.blockPanel.touchEnabled = false;
// 停止播放按压音频，并且播放跳跃音频
this.pushSoundChannel.stop();
this.jumpVoice.play(0,1);
// 清除所有动画
egret.Tween.removeAllTweens();
this.blockPanel.addChild(this.player);
// 结束跳跃状态
this.isReadyJump = false;
// 落脚点坐标
this.targetPos.x = this.player.x + this.jumpDistance * this.direction;
// 根据落点重新计算斜率，确保小人往目标中心跳跃
this.targetPos.y = this.player.y + this.jumpDistance * (this.currentBlock.y - this.player.y)/(this.currentBlock.x - this.player.x) * this.direction;
// 执行跳跃动画
egret.Tween.get(this).to({factor: 1}, 500).call(() => {
this.player.scaleY = 1;
this.jumpDistance = 0;
});
// 执行小人空翻动画
this.player.anchorOffsetY = this.player.height / 2;
egret.Tween.get(this.player).to({rotation: this.direction > 0 ? 360 : -360}, 200).call(() => {
this.player.rotation = 0;
}).call(() => {
this.player.anchorOffsetY = this.player.height - 20;
});
}
五、小人跳跃轨迹：
11. 运动轨迹的表示：
// 添加 factor 的 set，get 方法，注意使用 public
public get factor(): number {
return 0;
}
// 计算方法参考，二次贝塞尔曲线公式
public set factor(value: number) {
this.player.x = (1-value)*(1-value) * this.player.x + 2 * value * (1-value)*(this.player.x + this.targetPos.x) / 2 + value * value * (this.targetPos.x);
this.player.y = (1-value)*(1-value) * this.player.y + 2 * value * (1-value)*(this.player.y - 300) / 2 + value * value * (this.targetPos.y);
}
对应 onKeyUp方法里执行跳跃动画的变量 factro：
// 执行跳跃动画
egret.Tween.get(this).to({factor: 1}, 500).call(() => { …… });
12. 判断是否跳跃成功：
// 根据 this.jumpDistance 来判断跳跃是否成功
private judgeResult(){
// pow 函数用于求幂
if(Math.pow(this.currentBlock.x - this.player.x, 2) + Math.pow(this.currentBlock.y - this.player.y, 2) <= 70*70) {
// 跳跃成功
// 更新积分
this.score++;
this.scoreLabel.text = this.score.toString();
// 随机下一个方块出现的位置
this.direction = Math.random() > 0.5 ? 1 : -1;
// 当前方块要移到相应的跳跃点的距离
var blockX, blockY;
blockX = this.direction > 0 ? this.leftOrigin.x : this.rightOrigin.x;
blockY = this.height / 2 + this.currentBlock.height;
// 小人要移动到的点
var playerX, playerY;
playerX = this.player.x - (this.currentBlock.x - blockX);
playerY = this.player.y - (this.currentBlock.y - blockY);
// 更新页面的位置
this.update(this.currentBlock.x - blockX, this.currentBlock.y - blockY);
// 更新小人的位置
egret.Tween.get(this.player).to({
x: playerX,
y: playerY
}, 1000).call(() => {
// 开始创建下一块方块
this.addBlock();
// 让屏幕重新可点
this.blockPanel.touchEnabled = true;
})
console.log("x" + this.currentBlock.x);
}else {
// 跳跃失败
console.log("游戏失败！");
this.overPanel.visible = true;
this.overScoreLabel.text = this.score.toString();
}
}
// 更新页面
private update(x, y) {
egret.Tween.removeAllTweens();
for(var i: number = this.blockArr.length - 1; i >= 0; i--) {
var blockNode = this.blockArr[i];
if(blockNode.x + (blockNode.width - 222) < 0 ||
blockNode.x - 222 > this.width || blockNode.y - 78 > this.height) {
// 方块超出屏幕，从显示列表中移除
this.blockPanel.removeChild(blockNode);
this.blockArr.splice(i,1);
// 添加到回收数组中
this.reBackBlockArr.push(blockNode);
}else {
// 没有超出屏幕的范围，则移动
egret.Tween.get(blockNode).to({
x: blockNode.x - x,
y: blockNode.y - y
}, 1000)
}
}
}
- 调用 judgeResult 来判断当前跳跃是否成功在 onKeyUp 方法里：
// 执行跳跃动画
egret.Tween.get(this).to({factor: 1}, 500).call(() => {
this.player.scaleY = 1;
this.jumpDistance = 0;
// 判断是否跳跃成功
this.judgeResult();
});
-
导入第三方库（使用 egret build -a 命令导入）：
-
导入第三方库到工程文件目录中，将该文件夹下的内容拷贝到所创建的 egret 项目文件目录中，命名为 game
-
在项目中的 egretProperties.json 文件中加入 game 文件名和路径
-
在项目编辑器的终端输入 egret build -e 命令，等待编译成功
-
使用第三方库 game 里的Ticker 心跳计时器，用来计时手指按下屏幕的时间长度，通过时间长度来计算跳跃的距离
// 心跳计时器
egret.Ticker.getInstance().register(function(dt){
dt /= 1000;
if(this.isReadyJump) {
this.jumpDistance += 300 * dt;
}
}, this)
13. 跳跃失败的游戏结束界面：
