The last article was about cutting the main characters into valid areas and invalid areas

The valid area is placed in the scene as the base plate, and the invalid area is free fall and deleted

The camera goes to

The camera moves up with each placement of the protagonist

  moveCamera(){
    // Define the y value of the controller target
    const oldty = this.controls.target.y
    const newty = oldty + 1 // Move up by 1 each time
    console.log(oldty, newty)
    let tween:any = NumberAnimate(oldty, newty, 100)
    tween.onUpdate(() = >{
      this.controls.target.setY(tween._object.p)
    })
  }
Copy the code

End of game decision

To determine the end of the game, first determine that there is no intersection between the base plate and the protagonist, that is, the vertex information of the effective area of the cutting is empty

intersectResult.geometry.vertices.length > 0
Copy the code

The other case where the place is left blank is when the protagonist’s movement ends without clicking

After deciding the game is over, pull the camera to the panorama

Show everything in the scene

Scoring link

You can score by stack height or you can score by stack number or you can score by remaining total area

Let’s do a hard one, based on the surface area

The effective area surface area of each stack is added to obtain the score result

Get the size of the valid areas through Box3, and record each valid area on the page

The method for calculating the valid region was previously encapsulated with getSize, which is then used to encapsulate a getaREA again

export function getArea(mesh) :number {
  const size = new THREE.Vector3()
  getSize(mesh, size)
  const area = Math.floor(size.x * size.z)
  return area
}
Copy the code

You need a DOM node on the page to render the score

fractionDom:HTMLElement = document.querySelector('#fraction')
Copy the code

Assign values to dom nodes

 upDateFraction(){
    this.fractionDom.innerText = this.areaCount + ' '
  }
Copy the code

Make start button

Start button function

const mark: HTMLElement = document.querySelector('#mark')
const startBtn: HTMLElement = document.querySelector('#start-game')
console.log(mark, startBtn)
if (mark && startBtn) {
  console.log(startBtn)
  startBtn.onclick = function () {
    mark.style.display = 'none'
    // Zoom the lens
    createGame.restart()
  }
}
Copy the code

The restart function resets the variables, zooms in, adjusts the perspective, and redraws the main character

restart() {
  if (this.isOver) {
    this.floorGroup.remove(... this.floorGroup.children)this.leadCount = 0
    this.leadCube = null
    this.tween = null
    this.T = 2000
    this.flag = false
    this.isOver = false // Whether the game is over
    this.areaCount = 0  / / score
    this.upDateFraction()
    this.scene.updateMatrix()
    this.initFloor()
  }
  this.undateCameraZoom(5.5.() = > {
    // Start creating the first protagonist
    this.createlead()
  })
}
Copy the code

The end of the

Game development is almost done at this time, the rest is some code specification

Avoid the any type specification in TS

Take interfaces as an example

interface Element {
  scene: THREE.Object3D
  camera: THREE.OrthographicCamera
  controls: OrbitControls
}

constructor(element: Element) {
  this.scene = element.scene
  this.camera = element.camera
  this.controls = element.controls
  this.floorGroup = new THREE.Group()
  this.scene.add(this.floorGroup)
  this.initFloor()
  window.addEventListener('keydown', this.leadStop.bind(this))
}
Copy the code

If you want to specify a three element type such as scene, you can look at the scene’s base class on the website

Its base class is object3d so you can constrain it with three.object3d

If you’re using a method that doesn’t exist in the base class like scene autoUpdate that method is in itself

Then we need to normalize the values to three.scene

scene: THREE.Scene
Copy the code

And then you don’t report any errors

Or you could just write it, depending on the demand

In fact, it can be compatible with mobile terminal, after all, mobile games are more popular at present

Poke here to experience

Feel free to post your scores in the comments section

3D stacking game – The first basic initialization game

3D stacking game – The second step controls the main character to move and stop

3D stacking game — third step cutting and other functions

code

Happy New Year to you all

Ready to indulge, finish today’s shift, no work for the year

2021 Ben To the good