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

游戏介绍

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

游戏目标

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

操作指南

使用点击进行游戏操作。

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

egret制作h5游戏 (一)Super Click

image.png

二.制作UI界面

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


egret制作h5游戏 (一)Super Click

image.png

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

egret制作h5游戏 (一)Super Click

image.png

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

egret制作h5游戏 (一)Super Click

image.png

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

egret制作h5游戏 (一)Super Click

image.png

4.通关UI 返回首页按钮

egret制作h5游戏 (一)Super Click

image.png

三.关卡设计

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

1.直线移动
主要是掌握位移公式:
x=cos(radian)移动速度
y=sin(radian)
移动速度

egret制作h5游戏 (一)Super Click

image.png

 

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

 

egret制作h5游戏 (一)Super Click

image.png

egret制作h5游戏 (一)Super Click

image.png

3.闪烁直线移动

 

egret制作h5游戏 (一)Super Click

image.png

4.闪烁曲线移动

 

egret制作h5游戏 (一)Super Click

image.png

四.编写游戏逻辑代码

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


egret制作h5游戏 (一)Super Click

image.png

 

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

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

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

关键代码部分

egret制作h5游戏 (一)Super Click

image.png

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


egret制作h5游戏 (一)Super Click

image.png

源码分享:

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

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

egret制作h5游戏 (一)Super Click

image

相关文章: