adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pause on gui focus

Browse Source
This commit is contained in:
Adrien MALINGREY
2023-07-06 19:56:09 +02:00
parent 59158d68b8
commit 058fdd8f8b
1 changed files with 52 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app.js
View File

@ -59,6 +59,45 @@ const ROTATION = {
class Matrix extends THREE.Group { class Matrix extends THREE.Group {
constructor() { constructor() {
super() super()
const edgeMaterial = new THREE.MeshBasicMaterial({
color: 0x88abe0,
envMap: envRenderTarget.texture,
transparent: true,
opacity: 0.4,
reflectivity: 0.9,
refractionRatio: 0.5
})
const edgeShape = new THREE.Shape()
edgeShape.moveTo(-.3, SKYLINE)
edgeShape.lineTo(0, SKYLINE)
edgeShape.lineTo(0, 0)
edgeShape.lineTo(COLUMNS, 0)
edgeShape.lineTo(COLUMNS, SKYLINE)
edgeShape.lineTo(COLUMNS + .3, SKYLINE)
edgeShape.lineTo(COLUMNS + .3, -.3)
edgeShape.lineTo(-.3, -.3)
edgeShape.moveTo(-.3, SKYLINE)
this.edge = new THREE.Mesh(
new THREE.ExtrudeGeometry(edgeShape, {
depth: 1,
bevelEnabled: false,
}),
edgeMaterial
)
this.edge.visible = false
const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 0, -0.2, 0, 0, 0, 0])
const clip = new THREE.AnimationClip('HardDrop', 3, [positionKF])
const animationGroup = new THREE.AnimationObjectGroup()
animationGroup.add(this)
animationGroup.add(this.edge)
this.mixer = new THREE.AnimationMixer(animationGroup)
const hardDroppedMatrix = this.mixer.clipAction(clip)
hardDroppedMatrix.loop = THREE.LoopOnce
hardDroppedMatrix.setDuration(0.2)
this.init() this.init()
} }
@ -115,6 +154,11 @@ class Matrix extends THREE.Group {
} }
}) })
} }
update(delta) {
this.updateUnlockedMinoes(delta)
this.mixer?.update(delta)
}
} }
@ -499,50 +543,12 @@ holdQueue.position.set(-4, SKYLINE - 2)
scene.add(holdQueue) scene.add(holdQueue)
const matrix = new Matrix() const matrix = new Matrix()
scene.add(matrix) scene.add(matrix)
scene.add(matrix.edge)
const nextQueue = new NextQueue() const nextQueue = new NextQueue()
nextQueue.position.set(13, SKYLINE - 2) nextQueue.position.set(13, SKYLINE - 2)
scene.add(nextQueue) scene.add(nextQueue)
Tetromino.prototype.ghost = new Ghost() Tetromino.prototype.ghost = new Ghost()
const edgeMaterial = new THREE.MeshBasicMaterial({
color: 0x88abe0,
envMap: envRenderTarget.texture,
transparent: true,
opacity: 0.4,
reflectivity: 0.9,
refractionRatio: 0.5
})
const edgeShape = new THREE.Shape()
edgeShape.moveTo(-.3, SKYLINE)
edgeShape.lineTo(0, SKYLINE)
edgeShape.lineTo(0, 0)
edgeShape.lineTo(COLUMNS, 0)
edgeShape.lineTo(COLUMNS, SKYLINE)
edgeShape.lineTo(COLUMNS + .3, SKYLINE)
edgeShape.lineTo(COLUMNS + .3, -.3)
edgeShape.lineTo(-.3, -.3)
edgeShape.moveTo(-.3, SKYLINE)
matrix.edge = new THREE.Mesh(
new THREE.ExtrudeGeometry(edgeShape, {
depth: 1,
bevelEnabled: false,
}),
edgeMaterial
)
matrix.edge.visible = false
scene.add(matrix.edge)
const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 0, -0.2, 0, 0, 0, 0])
const clip = new THREE.AnimationClip('HardDrop', 3, [positionKF])
const animationGroup = new THREE.AnimationObjectGroup()
animationGroup.add(matrix)
animationGroup.add(matrix.edge)
matrix.mixer = new THREE.AnimationMixer(animationGroup)
const hardDroppedMatrix = matrix.mixer.clipAction(clip)
hardDroppedMatrix.loop = THREE.LoopOnce
hardDroppedMatrix.setDuration(0.2)
let clock = new THREE.Clock() let clock = new THREE.Clock()
function animate() { function animate() {
@ -558,14 +564,11 @@ function animate() {
world.colorFullCylinder.material.map.offset.x += colorFullTextureRotation * delta world.colorFullCylinder.material.map.offset.x += colorFullTextureRotation * delta
controls.update() controls.update()
matrix.update(delta)
matrix.updateUnlockedMinoes(delta) gui.update()
matrix.mixer?.update(delta)
renderer.render(scene, world.camera) renderer.render(scene, world.camera)
envCamera.update(renderer, scene) envCamera.update(renderer, scene)
gui.update();
} }
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
@ -604,7 +607,10 @@ let game = {
this.playing = true this.playing = true
stats.clock.start() stats.clock.start()
onblur = this.pause renderer.domElement.tabIndex = 1
renderer.domElement.onblur = this.pause
gui.domElement.tabIndex = 1
gui.domElement.onfocus = game.pause
nextQueue.init() nextQueue.init()
@ -699,6 +705,7 @@ let game = {
document.onkeydown = null document.onkeydown = null
renderer.domElement.onblur = null renderer.domElement.onblur = null
renderer.domElement.onfocus = null renderer.domElement.onfocus = null
gui.domElement.onfocus = null
game.playing = false game.playing = false
world.music.pause() world.music.pause()
stats.clock.stop() stats.clock.stop()