HTML5 2D平台游戏开发#10Wall Jump

时间:2023-03-09 07:40:30
HTML5 2D平台游戏开发#10Wall Jump

  这个术语不知道怎么翻译比较贴切,但并不妨碍对字面意思的理解,大概就是飞檐走壁。比如:

HTML5 2D平台游戏开发#10Wall Jump

这是游戏《忍者龙剑传》中的场景,玩家可以通过操纵角色在墙面上移动并跳跃。

首先需要实现角色抓墙这一动作,整理一下思路:

  • 角色在平地时不能爬上墙面
  • 在跳跃时并且处于下降状态才能爬上墙面
  • 当角色有机会爬上墙面时,需要按下墙面所在方向才能抓住墙

HTML5 2D平台游戏开发#10Wall Jump

在抓墙过程中,还可以操作角色执行一系列动作:

  • 松开所有按键,角色从墙上跌落
  • 按下与墙面所在方向相反的按键,角色离开墙面
  • 相反方向键与跳跃键同时按下,角色跳离墙面

HTML5 2D平台游戏开发#10Wall Jump

以左边的墙面为例,可以将角色的动作用下图表示出来:

HTML5 2D平台游戏开发#10Wall Jump

这是完成后的效果:

input{
position: relative;
z-index: 2;
}
#debugTools ul{
transition: all .3s;
opacity: 1;
left: 70px;
top: 0;
position: absolute;
}
#debugTools ul li{
float: left;
margin-right: 15px;
}
#debugTools.active ul {
left: 0;
opacity: 0;
}
-->

  • 网格
  • 精灵框
  • 碰撞框
  • 坐标

//

// {

game.start();
};
// ]]>