egret制作h5游戏 （一）Super Click

今天抽出时间给大家讲解一个非常简单的小游戏（Super Click），本文主要是学习游戏的设计思维和一些简单的数学算法。

游戏介绍

这是一个挑战手速和反应力的游戏，看看你能闯过多少关。

游戏目标

在图标移出舞台之前点中它即可过关。

操作指南

使用点击进行游戏操作。

一..新建egret项目，项目名：SuperClick 尺寸：1280*720 宽屏

image.png

二.制作UI界面

本游戏有三个UI界面，使用eui制作两个界面

image.png

1.首页UI，新游戏按钮 继续游戏 历史最高记录

image.png

2.失败UI 重新开始按钮，当前关卡，历史最高关卡记录

image.png

3.胜利UI 下一关按钮，当前关卡，历史最高关卡记录

image.png

4.通关UI 返回首页按钮

image.png

三.关卡设计

（我设计了四种关卡逻辑，都是从左到右移动，你可以设计其他玩法的关卡，如上下移动，增加障碍等，为了使难度不断增加，还可以使对象移动速度加快）

1.直线移动
主要是掌握位移公式：
x=cos（radian）移动速度
y=sin（radian）移动速度

image.png

 

2.曲线移动
主要是掌握正弦公式的移动，即x坐标横向移动，y轴做正弦波形移动
y=Math.sin(radian)*移动速度;

 

image.png

image.png

3.闪烁直线移动

 

image.png

4.闪烁曲线移动

 

image.png

四.编写游戏逻辑代码

1.在Main删除原有代码，添加游戏主类GameMain

image.png

 

2.GameMain主要负责游戏的调度，判断显示UI的逻辑，判断胜利失败，执行角色的移动和暂停，监听各子UI发送来的按钮事件，执行相应逻辑
3.HomeUI.ts，负责首页UI的逻辑，HomeUI.exml负责首页UI布局

4.ResultUI.ts负责结算界面UI的逻辑，ResultUI.exml负责结算界面的UI布局

5.Level.ts负责关卡运行的逻辑，关卡的数据设定

关键代码部分

image.png

6.运行
在命令行执行egret startserver -a则启动浏览器看到运行效果

image.png

源码分享：

链接：https://pan.baidu.com/s/1Nrg3Tx7ZwOFu_mBrJdT3uA 密码：s335

这个是我们的微信小游戏（微信小程序搜索：幻想英雄大乱斗）,欢迎吐槽

image