上一节，我们完成了平行背景滚动的效果，这一节我们要在变化背景的前方加入精灵动画以及检测碰撞。我们现在背景的前方加入一个奔跑的小人，打开gamescenecomponent.vue,在style标签里添加代码如下：
接着我们在script标签里添加代码，让前方小人根据键盘按键变换位置，添加代码如下：
当keyCode的值是37时，表示键盘左箭头按键被按下，当keyCode的值是39时，表示键盘右箭头按键被按下。最后我们调整一下template中的代码：
完成上面代码后，把页面加载起来，可以看到一个小人出现在页面上，点击左箭头，小人处于跑道左边：
接着我们看看如何实现碰撞检测。打开gamecontainer.vue,在style标签中，我们能看到如下代码：
也就是说，整个游戏场景的高度是600个像素，前面我们定义的player属性中，设置bottom属性为100，有就是小人图片的底部距离游戏场景底部有100个像素的位置，也就是底部位于游戏场景下标为500px的地方，由于小人图片的像素高度是100px,因此小人图片的起始点始终位于游戏场景400px处。障碍物的图片宽度和高度都是100px, 在上节实现的背景滚动功能里，每个一个时间段，我们会把页面背景的小图片下移100个像素，于是检测碰撞时，在背景的每一个小图片下移时，我们先检测当前挪动的图片是否是障碍物，并且障碍物所在的位置是否和小人位置一致就可以，这个检测算法可用下图表示：
最后我们看看，小人跑动时手脚动起来的精灵动画效果是怎么实现的，我们先看看用于在页面上显示小人的背景图片：
文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树webpack打包工具前端模块化23419 人正在系统学习中
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！