3D小游戏(three)-更新Block与gameOover重启

更新Block

pages/game-page.js

updateNextBlock () {//更新下一个Block

const seed = Math.round(Math.random())

const type = seed ? 'cuboid' : 'cylinder'

const direction = Math.round(Math.random()) // 0 -> x 1 -> z

const width = Math.round(Math.random() * 12) + 8

const distance = Math.round(Math.random() * 20) + 20

this.currentBlock = this.nextBlock

const targetPosition = this.targetPosition = {}

if (direction == 0) { // x

targetPosition.x = this.currentBlock.instance.position.x + distance

targetPosition.y = this.currentBlock.instance.position.y

targetPosition.z = this.currentBlock.instance.position.z

} else if (direction == 1) { // z

targetPosition.x = this.currentBlock.instance.position.x

targetPosition.y = this.currentBlock.instance.position.y

targetPosition.z = this.currentBlock.instance.position.z - distance

}

this.setDirection(direction)

if (type == 'cuboid') {

this.nextBlock = new Cuboid(targetPosition.x, targetPosition.y, targetPosition.z, 'popup', width)

} else if (type == 'cylinder') {

this.nextBlock = new Cylinder(targetPosition.x, targetPosition.y, targetPosition.z, 'popup', width)

}

// this.nextBlock.instance.position.set(targetPosition.x, targetPosition.y, targetPosition.z)

this.scene.instance.add(this.nextBlock.instance)

const cameraTargetPosition = {

x: (this.currentBlock.instance.position.x + this.nextBlock.instance.position.x) / 2,

y: (this.currentBlock.instance.position.y + this.nextBlock.instance.position.y) / 2,

z: (this.currentBlock.instance.position.z + this.nextBlock.instance.position.z) / 2,

}

this.scene.updateCameraPosition(cameraTargetPosition)

this.ground.updatePosition(cameraTargetPosition)

}

checkBottleHit中

this.updateNextBlock()//更新Block

objects/ground.js

updatePosition (targetPosition) {//更新Block

this.instance.position.x = targetPosition.x

this.instance.position.z = targetPosition.z

}

scene/scene.js

updateCameraPosition (targetPosition) {//更新Block

this.camera.updatePosition(targetPosition)

this.light.updatePosition(targetPosition)

}

Scene/camera.js

import {customAnimation} from '../../libs/animation'

updatePosition (newTargetPosition) {

customAnimation.to(this.instance.position, 0.5, { x: newTargetPosition.x - 10, y: newTargetPosition.y + 10, z: newTargetPosition.z + 10 })

customAnimation.to(this.target, 0.5, { x: newTargetPosition.x, y: newTargetPosition.y, z: newTargetPosition.z })

}

scene/light.js

import {customAnimation} from '../../libs/animation'

updatePosition (targetPosition) {

customAnimation.to(this.shadowTarget.position, 0.5, {x: targetPosition.x, y: targetPosition.y, z: targetPosition.z})

customAnimation.to(this.shadowLight.position, 0.5, {x: 10 + targetPosition.x, y: 30 + targetPosition.y, z: 20 + targetPosition.z})

}

GameOver与重启

game-page.js

checkBottleHit中

this.state = 'over'

this.removeTouchEvent()//清除监听

this.callbacks.showGameOverPage()//利用MVC跳转GameOver界面

game-over-page.js

initGameoverCanvas(options){

// this.camera = options.camera//引进gamePage中的scene

// const aspect = window.innerHeight/window.innerWidth//屏幕长宽比

// this.canvas = document.createElement('canvas')//adapter中获取的canvas

// this.canvas.width = window.innerWidth

// this.canvas.height = window.innerHeight

// this.texture = new THREE.Texture(this.canvas)//定义texture

// this.material = new THREE.MeshBasicMaterial({//材质

// map:this.texture,

// transparent:true,

// side:THREE.DoubleSide

// })

// //定义形状

// this.geometry = new THREE.PlaneGeometry(window.innerWidth,window.innerHeight)

// this.obj = new THREE.Mesh(this.geometry,this.material)

// this.obj.position.z = 1

// this.obj.rotation.y = Math.PI

// this.obj.visible =false

// this.context = this.canvas.getContext('2d')//获取2d-canvas上下文

// this.context.fillStyle='#333'//2D画布填充灰色

// //设置位置，宽高

// this.context.fillRect((window.innerWidth-200)/2,(window.innerHeight-100)/2,200,100)

// //设置文字

// this.context.fillStyle='#eee'

// this.context.font = '20px Georgia'

// this.context.fillText('Game Over',(window.innerWidth-200)/2+50,(window.innerHeight-100)/2 +55)

// //刷新

// this.texture.needsUpdate = true

// //添加

// this.camera.add(this.obj)

const aspect = window.innerHeight / window.innerWidth

this.region = [//输出位置

(window.innerWidth - 200) / 2,

(window.innerWidth - 200) / 2 + 200,

(window.innerHeight - 100) / 2,

(window.innerHeight - 100) / 2 + 100

]

this.camera = options.camera

this.canvas = document.createElement('canvas')

this.canvas.width = window.innerWidth

this.canvas.height = window.innerHeight

this.texture = new THREE.Texture(this.canvas)

this.material = new THREE.MeshBasicMaterial({ map: this.texture, transparent: true });

this.geometry = new THREE.PlaneGeometry(sceneConf.frustumSize * 2, aspect * sceneConf.frustumSize * 2)

this.obj = new THREE.Mesh(this.geometry, this.material)

this.obj.visible = false

this.obj.position.z = 20

this.context = this.canvas.getContext('2d')

this.context.fillStyle = '#333'

this.context.fillRect((window.innerWidth - 200) / 2, (window.innerHeight - 100) / 2, 200, 100)

this.context.fillStyle = '#eee'

this.context.font = '20px Georgia'

this.context.fillText('Game Over', (window.innerWidth - 200) / 2 + 50, (window.innerHeight - 100) / 2 + 55)

this.texture.needsUpdate = true

this.obj.visible = false

this.camera.add(this.obj)

}

show(){

console.log('gameover page show')

this.obj.visible = true

this.bindTouchEvent()

}

hide(){

this.obj.visible = false

this.removeTouchEvent()

}

onTouchEnd = (e) => {

const pageX = e.changedTouches[0].pageX

const pageY = e.changedTouches[0].pageY

//落在GameOver方块上时

if (pageX > this.region[0] && pageX < this.region[1] && pageY > this.region[2] && pageY < this.region[3]) { // restart

this.callbacks.gameRestart()

}

}

bindTouchEvent() {

canvas.addEventListener('touchend', this.onTouchEnd)

}

removeTouchEvent() {

canvas.removeEventListener('touchend', this.onTouchEnd)

}

game-page.js

restart() {

console.log('game page restart')

this.deleteObjectsFromScene()

this.scene.reset()

this.bottle.reset()

// this.updateScore(0)

this.addInitBlock()

this.addGround()

this.addBottle()

this.bindTouchEvent()

}

deleteObjectsFromScene () {//清空场景模型

let obj = this.scene.instance.getObjectByName('block')//利用Name

while(obj) {

this.scene.instance.remove(obj)

if (obj.geometry) {

obj.geometry.dispose()

}

if (obj.material) {

obj.material.dispose()

}

obj = this.scene.instance.getObjectByName('block')

}

this.scene.instance.remove(this.bottle.obj)

this.scene.instance.remove(this.ground.instance)

}

game/view.js

initGameOverPage(callbacks){//初始化

this.gameOverPage = new GameOverPage(callbacks)

this.gameOverPage.init({

camera:this.gamePage.scene.camera.instance//引入gamePage中的scene.camera

})

}