src/examples/dash-and-blast-prototype.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dash and Blast prototype</title>
    <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
    <script src="/js/examples.js?ver=1.0.0"></script>
    <script src="/lib/phaser.min.js"></script>
    <script src="/lib/enable3d.phaserExtension.0.19.1.min.js"></script>
  </head>

  <body>
    <script>
      const { enable3d, Scene3D, Canvas, THREE } = ENABLE3D

      class Player {
        constructor(scene) {
          this.object = scene.third.physics.add.cylinder({ z: 10, y: 1, radiusSegments: 16, radiusTop: 1, radiusBottom: 1, collisionFlags: 0 })
          this.object.body.setAngularFactor(0, 0, 0)
          this.object.body.setRestitution(0.25)
          // https://docs.panda3d.org/1.10/python/programming/physics/bullet/ccd
          // https://github.com/chandlerprall/Physijs/wiki/Collisions#motion-clamping
          this.object.body.setCcdMotionThreshold(1e-2)
          this.object.body.setCcdSweptSphereRadius(0.8)
        }
      }

      class Goal {
        activate() {
          this.active = true
          this.object.body.setCollisionFlags(0)
          this.object.body.setAngularVelocityY(this.speed)
        }

        deactivate() {
          this.active = false
          this.object.body.setCollisionFlags(1)
          this.object.body.setAngularVelocityY(0)
        }

        constructor(scene, centerX, centerZ, index) {
          this.centerX = centerX
          this.centerZ = centerZ
          this.index = index

          this.start = Math.random() * Math.PI * 2
          this.length = (Math.random() * Math.PI) / 2 + Math.PI / 2
          this.radius = Math.random() * 3 + 4
          this.speed = Math.random() * 2 + 2

          const addCurve = (x = 0, z = 0, speed = 1, length = 3.16, radius = 4, width = 1, depth = 1) => {
            const curve = new THREE.Shape()
            curve.arc(0, 0, radius, 0, length, false)
            let currentPoint = curve.getPoint(1)
            curve.arc(-currentPoint.x, -currentPoint.y, radius - width, length, 2 * Math.PI, true)

            let object = scene.third.add.extrude(
              {
                y: 1,
                shape: curve,
                curveSegments: Math.round(length * 3),
                depth: depth,
                bevelEnabled: false
              },
              { lambert: { color: 0xcccccc } }
            )

            // offset the center of mass (before adding a physical body)
            // add center to one corner (the corner where the circle starts)
            object.geometry.computeBoundingBox()
            object.geometry.translate(-object.geometry.boundingBox.max.x, object.geometry.boundingBox.max.y, 0)
            // offset the center by the radius
            object.geometry.translate(radius, 0, 0)

            object.rotateX(Math.PI / 2)
            object.position.set(x, 0, z)

            object.shape = 'concave'
            scene.third.physics.add.existing(object, { autoCenter: false })

            object.body.setAngularVelocityY(speed)
            object.body.setLinearFactor(0, 0, 0)
            object.body.setAngularFactor(0, 1, 0)
            object.body.setFriction(0)
            object.body.setCollisionFlags(2)
            object.body.setRestitution(1)

            return object
          }

          this.object = addCurve(this.centerX, this.centerZ, this.speed, this.length, this.radius)

          if (this.index === 0 || this.index === 1) this.activate()

          // the cylinder in the middle
          scene.third.add.cylinder(
            {
              height: 0.2,
              x: centerX,
              y: -0.2,
              z: centerZ,
              radiusTop: 0.95,
              radiusBottom: 0.95,
              collisionFlags: 4,
              radiusSegments: 32
            },
            { lambert: { color: 0xcccccc } }
          )
        }
      }

      class DashAndBlast extends Scene3D {
        constructor() {
          super({ key: 'DashAndBlast' })
        }

        init() {
          this.requestThirdDimension()
          this.goals = []
          delete this.player
          this.goalIndex = 0
          this.ready = false
        }

        create() {
          this.accessThirdDimension({ maxSubSteps: 10, fixedTimeStep: 1 / 120 })
          this.third.warpSpeed('camera', 'sky', 'light', 'lookAtCenter')

          // this.third.physics.debug.enable()

          for (let i = 0; i < 10; i++) {
            this.goals.push(new Goal(this, Phaser.Math.RND.integerInRange(-6, 6), i * -20, i))
          }

          this.player = new Player(this)

          this.third.physics.add.ground({ width: 35, height: 220, y: -1, z: -95 }, { lambert: { color: 0x95a7ef } })

          this.input.on('pointerdown', pointer => {
            const { x: vx, y: vy, z: vz } = this.player.object.body.velocity
            if (Math.abs(vx) > 1 || Math.abs(vy) > 1 || Math.abs(vz) > 1) return

            this.player.object.body.ammo.setMassProps(1, new Ammo.btVector3(1, 1, 1))
            const speed = 75
            // apply force in direction of the next goal
            const pos = this.player.object.position
            const goal = this.goals[this.goalIndex]
            const angle = Math.atan2(goal.centerX - pos.x, goal.centerZ - pos.z)

            const x = Math.sin(angle) * speed,
              y = this.player.object.body.velocity.y,
              z = Math.cos(angle) * speed

            this.player.object.body.setVelocity(x, y, z)
          })
          this.ready = true
        }

        update(time, delta) {
          if (!this.ready) return

          // camera follow
          const pos = this.player.object.position.clone()
          this.third.camera.position.set(pos.x, pos.y + 20, pos.z + 20)
          this.third.camera.lookAt(pos.x, pos.y, pos.z - 5)

          // update player
          if (this.player.object.position.y < -10) this.scene.restart()
          if (this.player.object.position.z <= this.goals[this.goalIndex].centerZ) {
            this.player.object.body.setVelocity(0, 0, 0)
            this.player.object.body.ammo.setMassProps(100, new Ammo.btVector3(1, 1, 1))

            this.player.object.body.setCollisionFlags(2)

            // set the player at the center of the goal
            this.player.object.position.x = this.goals[this.goalIndex].centerX
            this.player.object.position.z = this.goals[this.goalIndex].centerZ
            this.player.object.body.needUpdate = true

            this.time.addEvent({
              delay: 50,
              callback: () => this.player.object.body.setCollisionFlags(0)
            })

            if (this.goalIndex < this.goals.length - 1) {
              this.goalIndex++
              this.goals.forEach((goal, i) => {
                if (this.goalIndex === i || this.goalIndex === i + 1 || this.goalIndex === i - 1) goal.activate()
                else goal.deactivate()
              })
            }
          }
        }
      }

      const config = {
        type: Phaser.WEBGL,
        scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH,
          width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
          height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
        },
        scene: [DashAndBlast],
        ...Canvas()
      }

      window.addEventListener('load', () => {
        enable3d(() => new Phaser.Game(config)).withPhysics('/lib')
      })
    </script>
  </body>
</html>