src/examples/jenga-game.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>Jenga Game</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 MainScene extends Scene3D {
        constructor() {
          super({ key: 'MainScene' })
        }

        init() {
          this.requestThirdDimension()

          this.selected = null
          this.mousePosition = new THREE.Vector3()
          this.blockOffset = new THREE.Vector3()
          this.prev == { x: 0, y: 0 }
        }

        create() {
          this.accessThirdDimension({ gravity: { x: 0, y: -20, z: 0 } })
          this.third.warpSpeed('-orbitControls')

          this.third.camera.position.set(-8, 8, 8)
          this.third.camera.lookAt(0, 2, 0)

          const blocks = []

          const addTower = () => {
            const material = this.third.add.material({ lambert: { color: 'chocolate' } })

            for (let i = 0; i < 12; i++) {
              if (i % 2 == 0) {
                blocks.push(
                  this.third.physics.add.box({ y: i * 0.85, z: -1.3, width: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, z: 0, width: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, z: 1.3, width: 4, height: 0.65 }, { custom: material })
                )
              } else {
                blocks.push(
                  this.third.physics.add.box({ y: i * 0.85, x: -1.3, depth: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, x: 0, depth: 4, height: 0.65 }, { custom: material }),
                  this.third.physics.add.box({ y: i * 0.85, x: 1.3, depth: 4, height: 0.65 }, { custom: material })
                )
              }
            }
            blocks.forEach(block => {
              block.body.setFriction(0.8)
            })
          }
          addTower()

          const raycaster = new THREE.Raycaster()

          this.input.on('pointerdown', () => {
            const { x, y } = this.getPointer()

            raycaster.setFromCamera({ x, y }, this.third.camera)

            const intersection = raycaster.intersectObjects(blocks)

            if (intersection.length > 0) {
              const block = intersection[0].object
              this.selected = block
              this.selected?.body.setCollisionFlags(2)

              this.mousePosition.copy(intersection[0].point)
              this.blockOffset.subVectors(this.selected.position, this.mousePosition)
            }

            this.prev = { x, y }
          })

          this.input.on('pointerup', () => {
            this.selected?.body.setCollisionFlags(0)
            this.selected = null
          })
        }

        getPointer() {
          // calculate mouse position in normalized device coordinates
          // (-1 to +1) for both components
          const pointer = this.input.activePointer
          const x = (pointer.x / this.cameras.main.width) * 2 - 1
          const y = -(pointer.y / this.cameras.main.height) * 2 + 1
          return { x, y }
        }

        update() {
          if (this.selected?.body.getCollisionFlags() === 2) {
            const { x, y } = this.getPointer()

            const speed = 5
            const movementX = (x - this.prev.x) * speed
            const movementZ = (y - this.prev.y) * -speed

            // since the scene has a rotation of -Math.PI / 4,
            // we adjust the movement by -Math.PI / 4
            const v3 = new THREE.Vector3(movementX, 0, movementZ)
            v3.applyAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI / 4)

            this.selected.position.x += v3.x
            this.selected.position.y += v3.y
            this.selected.position.z += v3.z

            this.selected.body.needUpdate = true

            this.prev = { x, y }
          }
        }
      }

      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: [MainScene],
        ...Canvas()
      }

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