VUE+WebPack游戏设计:实现碰撞检测和动画精灵

31 篇文章 0 订阅
28 篇文章 0 订阅

上一节,我们完成了平行背景滚动的效果,这一节我们要在变化背景的前方加入精灵动画以及检测碰撞。我们现在背景的前方加入一个奔跑的小人,打开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-' + type
        tile.x = x
        tile.y = y
        tile.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_HEIGHT
          if (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 = true
              Constant.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/
来仔细了解他的作用。

上面的代码添加完成后,加载页面,你会看到小人两条腿在不停晃荡,表现出一种在奔跑的生动形象,更详细的讲解和代码调试演示过程,请点击链接

至此,整个游戏的设计就完成了,如果你运行起来,会觉得当前游戏很傻逼,因为障碍物始终位于跑道的右边,小人跑动的形象也不是很好看,整个游戏感觉比较粗糙,这个游戏设计的目的其实是为了引入几个重要概念,例如游戏主循环,平行背景移动,碰撞检测,精灵动画等几个概念,掌握这些概念和相关技术后,我们便可以把他们运用到更复杂更强大的游戏设计和开发中。

欢迎关注公众号,让我们一起学习,交流,成长:
文章公众号.jpg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值