上一节，我们完成了平行背景滚动的效果，这一节我们要在变化背景的前方加入精灵动画以及检测碰撞。我们现在背景的前方加入一个奔跑的小人，打开gamescenecomponent.vue,在style标签里添加代码如下：
#player {position: absolute;width: 100px;height: 100px;background-image: url(../../static/images/running.png);bottom: 100px;}#player.lane1{-webkit-transform: translate3d(100px, 0, 0);}#player.lane2{-webkit-transform: translate3d(200px, 0, 0);}
接着我们在script标签里添加代码，让前方小人根据键盘按键变换位置，添加代码如下：
init () {this.startOver()window.onkeyup = this.handleKeyUp},handleKeyUp (e) {if (e.keyCode === 37) {this.isOnLane1 = true} else if (e.keyCode === 39) {this.isOnLane1 = false}return false},
当keyCode的值是37时，表示键盘左箭头按键被按下，当keyCode的值是39时，表示键盘右箭头按键被按下。最后我们调整一下template中的代码：
<template><div id="game-scene" class="scene"><div id="floor" class="floor" :style="backgroundStyle"><div v-for="tile in tiles"><div :class="tile.class" :style="tile.style"></div><div id="player" :class="{lane1: isOnLane1,lane2: !isOnLane1}"></div></div></div></div></template>
完成上面代码后，把页面加载起来，可以看到一个小人出现在页面上，点击左箭头，小人处于跑道左边：
点击右箭头，小人处于跑道右边：
接着我们看看如何实现碰撞检测。打开gamecontainer.vue,在style标签中，我们能看到如下代码：
#game {width: 480px;height: 600px;margin: 0 auto;border-radius: 8px;text-align: center;position: relative;overflow: hidden;}
也就是说，整个游戏场景的高度是600个像素，前面我们定义的player属性中，设置bottom属性为100，有就是小人图片的底部距离游戏场景底部有100个像素的位置，也就是底部位于游戏场景下标为500px的地方，由于小人图片的像素高度是100px,因此小人图片的起始点始终位于游戏场景400px处。障碍物的图片宽度和高度都是100px, 在上节实现的背景滚动功能里，每个一个时间段，我们会把页面背景的小图片下移100个像素，于是检测碰撞时，在背景的每一个小图片下移时，我们先检测当前挪动的图片是否是障碍物，并且障碍物所在的位置是否和小人位置一致就可以，这个检测算法可用下图表示：
实框是小人处于左边时的坐标，当我们点击右箭头按钮后，小人会向右边挪动100个像素，处于x坐标是200px处，当障碍物背景图片往下移动到坐标是x=200px, y = 400px时，那么碰撞就发生了，根据这个原理，我们添加一下代码实现碰撞检测功能，在style标签中添加如下代码：
createTile (type, x, y) {var tile = {}tile.class = 'tile tile-' + typetile.x = xtile.y = ytile.style = 'transform: translate3d(' + x + 'px, ' + y + 'px, 0)'if (type === 100) {tile.isBlock = true}this.tiles.push(tile)}
在创建背景图片时，我们给tile增加了isBlock变量，如果当前创建的背景图片时障碍物，也就是type的值是100时，我们把isBlock设置成true,在style标签中继续添加如下代码：
moveTilesDown () {for (var i = 0; i < this.tiles.length; i++) {this.tiles[i].y += this.TILE_HEIGHTif (this.tiles[i].y > this.BOUNDARY) {this.tiles.splice(i, 1)} else {this.checkCollision(this.tiles[i])}}},checkCollision (tile) {if (tile.isBlock) {if (tile.y === 400) {if ((tile.x === this.TILE_WIDTH && this.isOnLane1 === true) || (tile.x === this.TILE_WIDTH * 2 && this.isOnLane1 === false)) {console.log('collision')this.isGameOver = trueConstant.Event.$emit(Constant.MSG_SHOW_GAMEOVER_SCENE)}}}}
moveTilesDown函数是上一节实现的，它的作用是把组成背景的小图片往下挪动，形成背景移动的效果，每移动组成背景的一小块图片时，调用checkCollision判断碰撞是否发生，判断的办法就是先看当前背景图片是否是障碍物，如果是，再判断图片移动后的位置是否跟前面讲解过的坐标重合，如果小人处于左边，也就是坐标(100px, 400px)处，或者处于右边也就是坐标(200px, 400px)处，并且障碍物也处于同样坐标，那么碰撞就发生了，一旦碰撞发生，我们就结束游戏。上面代码完成，加载到页面后，一旦碰撞发生时，效果如下：
最后我们看看，小人跑动时手脚动起来的精灵动画效果是怎么实现的，我们先看看用于在页面上显示小人的背景图片：
我们看到，图片上有两个小人，要实现小人跑动时的动画效果，我们只要在页面上显示小人时，反复在这两个小人形态间切换就可以实现一种动画效果了。所谓精灵动画本质上是一张图片有好几部分组成，然后把单位时间切割成若干部分，在对应时间段内显示图片中的某一部分，于是单位时间内，页面上就显示了图片的不同部分，进而形成一种动画效果，这种显示方式就叫精灵动画。我们看看如何通过代码实现精灵动画。我们要通过css3提供的功能实现精灵动画，所以需要在style标签里增加代码：
@-webkit-keyframes running {from {background-position: 0px;}to {background-position: -200px;}}#player {position: absolute;width: 100px;height: 100px;background-image: url(../../static/images/running.png);bottom: 100px;-webkit-animation-name: running;-webkit-animation-duration: .4s;-webkit-animation-timing-function: steps(2, end);-webkit-animation-iteration-count: infinite;}
@-webkit-keyframes 用于定义动画流程，running动画有两个流程，第一步是从背景图片最左边的坐标值为0处，在页面上显示图案，根据player的css定义，它的宽度是100px，也就是执行第一步时，将背景图片宽度为0px到100px这部分图案贴到页面上，也就是上面两个小人中左边抬起右脚的那个小人图案，第二步则是把背景图左移动200px后，把剩余部分显示到页面上，从上面的背景图看到，第一个小人和第二个小人间有一个间隔，这个间隔是100px,所以挪动200px后，正好是第二个小人开始的位置,webkit-animation-timing-function用于表示显示以怎样的时序来显示背景图的不同部分，step(2,end)的意思把把动画显示总时间0.4s分成两部分，那意味着背景图中第一个小人在页面上存在0.2秒，然后第二个小人在页面上存在0.2秒，这个流程不断的重复,step函数的第二个参数解释起来比较麻烦，大家可通过链接：https://idiotwu.me/understanding-css3-timing-function-steps/
来仔细了解他的作用。
上面的代码添加完成后，加载页面，你会看到小人两条腿在不停晃荡，表现出一种在奔跑的生动形象，更详细的讲解和代码调试演示过程，请点击链接
至此，整个游戏的设计就完成了，如果你运行起来，会觉得当前游戏很傻逼，因为障碍物始终位于跑道的右边，小人跑动的形象也不是很好看，整个游戏感觉比较粗糙，这个游戏设计的目的其实是为了引入几个重要概念，例如游戏主循环，平行背景移动，碰撞检测，精灵动画等几个概念，掌握这些概念和相关技术后，我们便可以把他们运用到更复杂更强大的游戏设计和开发中。
欢迎关注公众号，让我们一起学习，交流，成长：
