× 提示:平板电脑上请横向浏览,以获得更好的效果!确实需要竖向浏览的话,请点击【 手机版本网站 】

【HTML5开发】躲避障碍游戏设计

本文档针对一个躲避障碍游戏进行了类和流程的设计。

设计需求:

  • 用户通过点击或键盘方向键来控制Player的左右(上下)移动
  • 游戏过程中会随机出现奖品和障碍物,并以一定速度运动
  • 当Player碰到奖品时增加Player的分数
  • 当Player碰到障碍物时游戏结束
  • 游戏结束时记录Player的分数(距离、时间)数据
  • 游戏支持暂停、继续、重新开始等操作
  • 游戏支持更换背景图片、Player头像、背景音乐播放
  • 支持结束后分享游戏成绩等操作

根据游戏设计的需求,可能用到的模块(类)如下

  • 障碍类
  • 主角类
  • 主控制器
  • 游戏类
  • 关卡类(本游戏不涉及)

障碍类(Obstacle)设计

属性

name value
id int,障碍身份ID
width float,宽度
height float,高度
speed float,速度
type string,障碍物类型:如prize,stone
position[left,top] 位置 left:距离坐标原点的left值;top:距离坐标原点的top值

方法

name value
moveTo(position) 移动到指定位置,速度根据自身的speed值而定
destroy() 销毁,例如碰撞后或越过边界时销毁自身

事件

name value
oninit 初始化时
ondestroy 销毁时触发销毁事件
oncollide 当碰撞时触发,如产生爆炸效果

游戏主角类(Player)设计

属性

name value
playerId int,Player身份,用于区分同时游戏时的其他player
uniqueId string,Player唯一ID,用于区分其他player
playerName string,Player名称
playerRoleId int,Player角色ID
energy int,Player能量值
score int,分数
position object,位置,包括left和top两个值,分别为相对于原点的距离

方法

name value
moveUp(step) 向上移动,step为步数
moveDown(step) 向下移动
moveLeft(step) 向左移动
moveRight(step) 向右移动
changeEnergy(mount) 改变能量值,mount为正时增加能量值,为负则减少能量值
changeScore(mount) 改变分数,mount为正加分,为负减分
die Player死亡

事件

name value
oninit 实例化时触发,返回当前player对象
onchangeEnergy 改变能量值时触发
onchangeScore 改变分数时触发
ondie 死亡时触发

游戏主体类(Game)设计

假设Game只有一个CheckPoint,即只有一关。
属性

name value
timer object,计时器
gameElapseTime int,游戏运行时间,以秒计时
gameSpeed int,游戏运行速度,可以理解为背景运行速度
gameBackground 游戏背景图
gameMusic 游戏音乐

方法

name value
setGameTime(seconds) 设置游戏运行时间
getGameTime() 获取游戏运行时间
setPlayerScore(playerId,score) 改变Player的分数
start() 游戏开始
pause() 游戏暂停
stop() 游戏结束
resume() 继续游戏
restart() 重新游戏
init(option) 初始化游戏,option:object.游戏属性对象

事件

name value
ongamestart 当游戏开始时
ongamepause 当游戏暂停
ongamestop 当游戏关闭
ongameresume 当游戏继续
ongamerestart 档游戏重启

游戏控制类(Controller)设计

方法

name value
init 初始化
bindLeft function,绑定左移控制键
bindRight function,绑定右移控制
bindUp function,绑定上移控制
bindDown function,绑定下移控制
existObstacle(position) 在position是否存在障碍物

属性

name value
timer 控制器时钟

流程设计

要开始一个游戏需要先实例化一个游戏类

var game = new Game();

然后初始化game的各项属性:

game.init({
    speed:10,
    bg:"http://someexample.com/images/bg.jpg",
    music:"sample.mp3",
    playerId:"player1",
    uniqueId:"uid",
    obstacleSpeed:10,//障碍物移动速度 obstacleDistance:200,//障碍物距离 });

在game.init方法中,初始化Game类、Player类和Obstacle类.
最后调用start方法开始游戏

game.start();

游戏初始化时,声明一个控制器接口对象,并执行控制器的init方法,在控制器中绑定控制键及事件处理程序。

var controller = new Controller();
controller.bindLeft("leftKey",function(){
    game.player.moveLeft();
}); //...

在控制器中加入一个timer,用来监听Player的位置。如果某个时刻,Player的位置存在障碍物controller.existObstable(player.position) == true,则认为Player与障碍物碰撞,判断障碍物类型,如果是prize则给Player加分player.changeScore(10);如果是stone则结束游戏game.stop(),并触发ongamestop事件处理程序。
在ongamestop中可以定义接受后的动作,如:

  • 记录Player分数(可以使用活动系统报名来实现)弹窗
  • 转发微博
  • 抽奖


文/codemarker(简书作者)
原文链接:http://www.jianshu.com/p/83f3860ea115


  点作科技是一家专业的软件定制、网站定制服务商,提供APP开发、微信公众号开发、微信小程序开发等定制服务!


分享到:

关闭本页