专栏首页Coding迪斯尼实现小球在弹射前的拉伸特效和动态障碍物特效

实现小球在弹射前的拉伸特效和动态障碍物特效

当前我们实现小球弹射时,会先用鼠标点击小球,然后移动鼠标,当松开鼠标时,小球会弹射向鼠标松开的位置。我们按住小球的时间越长,小球弹射的力度就越大,但有一个问题是,玩家并不知道,当前施加在小球上的推力有多大,这节我们就增加一个动画功能,当玩家在小球上点击鼠标时,小球前方会出现一个变动着的箭头,箭头的红色部分越多,表明小球被施加的推力就越大,我们实现功能后,效果如下:

当鼠标在小球身上按下时,有一个箭头出现在小球旁边,箭头的指向根据鼠标的移动来变化,箭头中的红色块根据鼠标按下的时间长短而变化,鼠标按下时间越长,红色块就越长,它表示作用在小球上面的力度就越大。

我们看看相关代码的实现,首先对canvas控件的属性做些修改:

<script>
canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black;
}
</script>

我们把原来在canvas前面的井号去掉,这样两个canvas控件就会重叠在一起。接着我们引入箭头的资源库,在index.html中增加如下代码:

<script  type="text/javascript" src="./static/assets.js">
    </script>
    <script type="text/javascript">
      window.createjs = createjs
      window.Box2D = Box2D
      window.assetsLib = lib
    </script>

assets.js是资源库,我们在页面上绘制的箭头就是从这个库中获得的。接下来在控件初始化时,将资源加载到页面里:

init () {
....
// change 1 引入资源库
        this.assetsLib = window.assetsLib
        this.initPowerIndicator()
}

然后添加代码,实现箭头图片的显示,以及箭头能根据鼠标的移动来转动:

// change2 加载箭头图片资源
      initPowerIndicator () {
        this.power = new this.assetsLib.PowerArrow()
        this.stage.addChild(this.power)
        this.power.visible = false
      },
      showPowerIndicator (x, y) {
        this.power.visible = true
        this.power.x = x
        this.power.y = y
      },
      hidePowerIndicator () {
        this.power.visible = false
      },
      rotatePowerIndicator (rotation) {
        this.power.rotation = rotation
      },
      updatePowerBar (value) {
        this.power.powerBar.scaleY = Math.min(30, value)
      }
    }

上面代码实现了箭头图片的加载和旋转,接着我们修改鼠标消息响应函数,让箭头在小球被点击时出现,并且跟着鼠标的移动而转动:

stageMouseDown (e) {
        if (!this.isPlaying) {
          console.log('mouse down return')
          return
        }
        // change 3
        var position = this.ballPosition()
        this.showPowerIndicator(position.x, position.y)
        var rotation = this.launchAngle(e.stageX, e.stageY)
        this.rotatePowerIndicator(rotation * 180 / Math.PI)
        this.tickWhenDown = this.cjs.Ticker.getTicks()
        this.updatePowerBar(0)
      },
      stageMouseUp (e) {
        if (!this.isPlaying) {
          return
        }
        // change 4
        this.hidePowerIndicator()
        this.tickWhenUp = this.cjs.Ticker.getTicks()
        var ticksDiff = this.tickWhenUp - this.tickWhenDown
        this.shootBall(e.stageX, e.stageY, ticksDiff)
        // 发射后500毫秒再生成一个小球
        setTimeout(this.spawnBall, 500)
      },
      // change 5
      stageMouseMove (e) {
        if (!this.isPlaying) {
          return
        }

        var rotation = this.launchAngle(e.stageX, e.stageY)
        this.rotatePowerIndicator(rotation * 180 / Math.PI)
      },
update () {
        this.world.Step(1 / 60, 10, 10)
        if (this.shouldDrawDebug) {
          this.world.DrawDebugData()
        }

        this.world.ClearForces()

        // change 7
        var ticksDiff = this.cjs.Ticker.getTicks() - this.tickWhenDown
        this.updatePowerBar(ticksDiff)
      },

添加完上面代码后,加载页面,点击小球是就可以看到箭头动画了。接下来我们添加代码,为游戏添加一个十字架障碍物,代码如下:

     // change 10
      createCross (obstacle) {
        var bodyDef = new this.B2BodyDef()
        var fixDef = new this.B2FixtureDef()

        fixDef.density = 0.2
        fixDef.friction = 0.5
        fixDef.restitution = 0.2
        // 绘制一个交叉十字架物体
        bodyDef.type = this.B2Body.b2_dynamicBody
        bodyDef.position.x = obstacle.position.x / this.pxPerMeter
        bodyDef.position.y = obstacle.position.y / this.pxPerMeter
        fixDef.shape = new this.B2PolygonShape()
        fixDef.shape.SetAsBox(obstacle.length / this.pxPerMeter, obstacle.width / this.pxPerMeter)

        var cross = this.world.CreateBody(bodyDef)
        cross.CreateFixture(fixDef)
        fixDef.shape.SetAsBox(obstacle.width / this.pxPerMeter, obstacle.length / this.pxPerMeter)
        cross.CreateFixture(fixDef)
        // 在交叉处添加一个小圆圈
        bodyDef.type = this.B2Body.b2_staticBody
        fixDef.shape = new this.B2CircleShape(10 / this.pxPerMeter)
        var circle = this.world.CreateBody(bodyDef)
        circle.CreateFixture(fixDef)
        console.log('create cross:', this.B2RevoluteJointDef)
        var revoluteJointDef = new this.B2RevoluteJointDef()
        revoluteJointDef.bodyA = cross
        revoluteJointDef.bodyB = circle
        revoluteJointDef.collideConnected = false

        revoluteJointDef.maxMotorTorque = obstacle.maxTorque
        revoluteJointDef.motorSpeed = obstacle.motorSpeed
        revoluteJointDef.enableMotor = obstacle.enableMotor

        this.world.CreateJoint(revoluteJointDef)
      }

上面代码构造了两个长方体,并将长方体交叉重叠,在交叉处再绘制一个圆形作为固定两个长方体的连接点,最后我们使用B2RevoluteJointDef类把两个长方体和一个圆形结合起来,形成一个整体,最后我们在createObstacles函数中添加调用上面函数的代码:

createObstacles (level) {
   ....
    if (o.type === 'rect') {
            fixDef.shape = new this.B2PolygonShape()
            fixDef.shape.SetAsBox(o.dimension.width / this.pxPerMeter, 
           o.dimension.height / this.pxPerMeter)
            body = this.world.CreateBody(bodyDef)
            body.CreateFixture(fixDef)
          }
          // change 11
          if (o.type === 'cross') {
            this.createCross(o)
          }
}

接着我们生成用于构建十字架障碍物的关卡数据:

levels: [
....
    { // change 12
            hoopPosition: {x: 50, y: 160},
            ballName: 'SlowBall',
            ballPosition: {x: 350, y: 250},
            ballRandomRange: {x: 80, y: 80},
            obstacles: [
              {
                type: 'cross',
                graphicName: 'cross',
                position: {x: 165, y: 140},
                length: 60,
                width: 10,
                enableMotor: true,
                maxTorque: 25,
                motorSpeed: 3.0
              }
            ]
    }
}

然后我们在初始化时,将currentLevel指向上面的数据就大功告成了:

init () {
    ....
    this.currentLevel = this.levels[3]
}

完成上面代码后我们可以看到如下效果:

上图中红色的十字架障碍物是不断转动的。

本文分享自微信公众号 - Coding迪斯尼(gh_c9f933e7765d)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • 使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    望月从良
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳

扫码关注云+社区

领取腾讯云代金券