From b34a968dd2c32e41f92a36427b220d5e01eb82d4 Mon Sep 17 00:00:00 2001 From: adrien Date: Tue, 18 Jul 2023 21:49:14 +0200 Subject: [PATCH] fix audio restart, game restart, pause on gui --- app.js | 47 +++++++++++++++++++++-------------------------- jsm/TetraGUI.js | 3 +-- jsm/Vortex.js | 2 +- jsm/gamelogic.js | 29 ++++++++++++++++++----------- 4 files changed, 41 insertions(+), 40 deletions(-) diff --git a/app.js b/app.js index 117cf3b..ed79caf 100644 --- a/app.js +++ b/app.js @@ -23,32 +23,22 @@ let game = { playing: false, start: function() { - gui.startButton.hide() stats.init() - gui.stats.show() + + gui.startButton.hide() gui.settings.close() + gui.stats.show() Mino.mesh.clear() - - holdQueue.remove(holdQueue.piece) + + nextQueue.init() holdQueue.piece = undefined - if (nextQueue.pieces) nextQueue.pieces.forEach(piece => nextQueue.remove(piece)) + holdQueue.clear() playfield.init() - - scene.remove(playfield.piece) - if (playfield.piece) playfield.remove(playfield.piece) - playfield.piece = null - scene.music.currentTime = 0 - playfield.visible = true this.playing = true stats.clock.start() - renderer.domElement.tabIndex = 1 - gui.domElement.tabIndex = 1 - - nextQueue.init() - stats.level = settings.startLevel this.resume() }, @@ -57,7 +47,7 @@ let game = { document.onkeydown = onkeydown document.onkeyup = onkeyup window.onblur = game.pause - if (!gui.debug) gui.domElement.onfocus = game.pause + gui.settings.domElement.onclick = game.pause document.body.classList.remove("pause") gui.resumeButton.hide() @@ -65,10 +55,14 @@ let game = { stats.clock.start() stats.clock.elapsedTime = stats.elapsedTime + if (settings.musicVolume) scene.music.play() - if (playfield.piece) scheduler.setInterval(game.fall, stats.fallPeriod) - else this.generate() + if (playfield.piece) { + scheduler.setInterval(game.fall, stats.fallPeriod) + } else { + this.generate() + } }, generate: function(nextPiece=nextQueue.shift()) { @@ -94,13 +88,12 @@ let game = { if (playfield.lock(playfield.piece)) { let tSpin = playfield.piece.tSpin let nbClearedLines = playfield.clearLines() - playfield.remove(playfield.piece) if (settings.sfxVolume) { if (nbClearedLines == 4 || (tSpin && nbClearedLines)) { - scene.tetrisSound.currentTime = 0 + scene.tetrisSound.stop() scene.tetrisSound.play() } else if (nbClearedLines || tSpin) { - scene.lineClearSound.currentTime = 0 + scene.lineClearSound.stop() scene.lineClearSound.play() } } @@ -113,6 +106,8 @@ let game = { }, pause: function() { + gui.settings.domElement.onclick = null + stats.elapsedTime = stats.clock.elapsedTime stats.clock.stop() @@ -137,9 +132,9 @@ let game = { document.onkeydown = null window.onblur = null renderer.domElement.onfocus = null - gui.domElement.onfocus = null + gui.settings.domElement.onfocus = null game.playing = false - scene.music.pause() + scene.music.stop() stats.clock.stop() messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `

GAME
OVER

` }) @@ -167,9 +162,8 @@ let playerActions = { hardDrop: function () { scheduler.clearTimeout(game.lockDown) - scene.hardDropSound.play() if (settings.sfxVolume) { - scene.hardDropSound.currentTime = 0 + scene.hardDropSound.stop() scene.hardDropSound.play() } while (playfield.piece.move(TRANSLATION.DOWN)) stats.score += 2 @@ -263,6 +257,7 @@ renderer.setSize(window.innerWidth, window.innerHeight) renderer.setClearColor(0x000000, 10) renderer.toneMapping = THREE.ACESFilmicToneMapping document.body.appendChild(renderer.domElement) +renderer.domElement.tabIndex = 1 const stats = new Stats() diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index e22adb7..3841b3f 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -7,7 +7,6 @@ import { Mino, environnement } from './gamelogic.js' export class TetraGUI extends GUI { constructor(game, settings, stats, scene) { super({title: "teTra"}) - this.domElement.tabIndex = 1 this.startButton = this.add(game, "start").name("Jouer").hide() this.pauseButton = this.add(game, "pause").name("Pause").hide() @@ -45,7 +44,7 @@ export class TetraGUI extends GUI { }) loadingManager.onLoad = function() { scene.vortex.darkCylinder.material.map = darkTexture - scene.vortex.darkCylinder.material.opacity = 0.006 + scene.vortex.darkCylinder.material.opacity = 0.03 scene.vortex.colorFullCylinder.material.map = colorfullTexture scene.vortex.colorFullCylinder.material.opacity = 0.7 diff --git a/jsm/Vortex.js b/jsm/Vortex.js index 30668ea..ec03eaa 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -27,7 +27,7 @@ export class Vortex extends THREE.Group { texture.repeat.set(1, 1) }), blending: THREE.AdditiveBlending, - opacity: 0.006 + opacity: 0.03 }) ) this.add(this.darkCylinder) diff --git a/jsm/gamelogic.js b/jsm/gamelogic.js index ad8363c..5aa0244 100644 --- a/jsm/gamelogic.js +++ b/jsm/gamelogic.js @@ -141,12 +141,16 @@ class Mino extends THREE.Object3D { this.position.addScaledVector(this.velocity, delta) this.rotateOnWorldAxis(this.rotationAngle, delta * this.angularVelocity) if (Math.sqrt(this.position.x * this.position.x + this.position.z * this.position.z) > 40 || this.position.y < -50) { - this.constructor.mesh.delete(this) + this.dispose() return false } else { return true } } + + dispose() { + this.constructor.mesh.delete(this) + } } @@ -388,16 +392,18 @@ class Playfield extends THREE.Group { this.hardDropAnimation.setDuration(0.2) this.freedMinoes = new Set() - - this.init() } init() { this.cells = Array(ROWS).fill().map(() => Array(COLUMNS)) + if (this.piece) this.remove(this.piece) + this.piece = undefined this.ghost = new Ghost() this.ghost.visible = false this.add(this.ghost) + + this.visible = true } cellIsEmpty(p) { @@ -421,12 +427,16 @@ class Playfield extends THREE.Group { lock() { this.piece.locking = false - return Array.from(this.piece.children).every(mino => { + let minoes = Array.from(this.piece.children) + minoes.forEach(mino => { this.add(mino) mino.position.add(this.piece.position) + }) + if (minoes.every(mino => mino.position.y >= SKYLINE)) return false + return minoes.every(mino => { if (this.cellIsEmpty(mino.position)) { this.cells[mino.position.y][mino.position.x] = mino - return mino.position.y < SKYLINE + return true } else { return false } @@ -490,17 +500,14 @@ class NextQueue extends THREE.Group { } init() { - this.positions.forEach((position) => { - this.add(new Tetromino.random(position)) - }) + this.clear() + this.positions.forEach(position => this.add(new Tetromino.random(position))) } shift() { let fistPiece = this.children.shift() this.add(new Tetromino.random()) - this.positions.forEach((position, i) => { - this.children[i].position.copy(position) - }) + this.positions.forEach((position, i) => this.children[i].position.copy(position)) return fistPiece }