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

world

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-07-05 02:23:45 +02:00
parent 6d4f7a8dd3
commit 791f594670
2 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
app.js
View File

@ -418,7 +418,7 @@ Ghost.prototype.minoesPosition = [
] ]
/* Scene */ /* world */
const loadingManager = new THREE.LoadingManager() const loadingManager = new THREE.LoadingManager()
loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
@ -436,6 +436,8 @@ loadingManager.onError = function (url) {
loadingPercent.innerText = "Erreur" loadingPercent.innerText = "Erreur"
} }
const world = {}
const scene = new THREE.Scene() const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
@ -448,10 +450,10 @@ renderer.setClearColor(0x000000, 10)
renderer.toneMapping = THREE.ACESFilmicToneMapping renderer.toneMapping = THREE.ACESFilmicToneMapping
document.body.appendChild(renderer.domElement) document.body.appendChild(renderer.domElement)
scene.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) world.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
scene.camera.position.set(5, 0, 16) world.camera.position.set(5, 0, 16)
const controls = new OrbitControls(scene.camera, renderer.domElement) const controls = new OrbitControls(world.camera, renderer.domElement)
controls.autoRotate controls.autoRotate
controls.enableDamping = true controls.enableDamping = true
controls.dampingFactor = 0.04 controls.dampingFactor = 0.04
@ -478,7 +480,7 @@ const colorFullMoveForward = 0.02
const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true) const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 500, 12, 1, true)
scene.darkCylinder = new THREE.Mesh( world.darkCylinder = new THREE.Mesh(
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshLambertMaterial({ new THREE.MeshLambertMaterial({
side: THREE.BackSide, side: THREE.BackSide,
@ -491,10 +493,10 @@ scene.darkCylinder = new THREE.Mesh(
opacity: 0.1 opacity: 0.1
}) })
) )
scene.darkCylinder.position.set(5, 10, -10) world.darkCylinder.position.set(5, 10, -10)
scene.add(scene.darkCylinder) scene.add(world.darkCylinder)
scene.colorFullCylinder = new THREE.Mesh( world.colorFullCylinder = new THREE.Mesh(
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshBasicMaterial({ new THREE.MeshBasicMaterial({
side: THREE.BackSide, side: THREE.BackSide,
@ -507,15 +509,15 @@ scene.colorFullCylinder = new THREE.Mesh(
opacity: 0.6 opacity: 0.6
}) })
) )
scene.colorFullCylinder.position.set(5, 10, -10) world.colorFullCylinder.position.set(5, 10, -10)
scene.add(scene.colorFullCylinder) scene.add(world.colorFullCylinder)
scene.ambientLight = new THREE.AmbientLight(0xffffff, 0.2) world.ambientLight = new THREE.AmbientLight(0xffffff, 0.2)
scene.add(scene.ambientLight) scene.add(world.ambientLight)
scene.directionalLight = new THREE.DirectionalLight(0xffffff, 20) world.directionalLight = new THREE.DirectionalLight(0xffffff, 20)
scene.directionalLight.position.set(5, -100, -16) world.directionalLight.position.set(5, -100, -16)
scene.add(scene.directionalLight) scene.add(world.directionalLight)
const holdQueue = new THREE.Group() const holdQueue = new THREE.Group()
holdQueue.position.set(-4, SKYLINE - 2) holdQueue.position.set(-4, SKYLINE - 2)
@ -572,20 +574,20 @@ function animate() {
const delta = clock.getDelta() const delta = clock.getDelta()
scene.darkCylinder.rotation.y += GLOBAL_ROTATION * delta world.darkCylinder.rotation.y += GLOBAL_ROTATION * delta
scene.darkCylinder.material.map.offset.y += darkMoveForward * delta world.darkCylinder.material.map.offset.y += darkMoveForward * delta
scene.darkCylinder.material.map.offset.x += darkTextureRotation * delta world.darkCylinder.material.map.offset.x += darkTextureRotation * delta
scene.colorFullCylinder.rotation.y += GLOBAL_ROTATION * delta world.colorFullCylinder.rotation.y += GLOBAL_ROTATION * delta
scene.colorFullCylinder.material.map.offset.y += colorFullMoveForward * delta world.colorFullCylinder.material.map.offset.y += colorFullMoveForward * delta
scene.colorFullCylinder.material.map.offset.x += colorFullTextureRotation * delta world.colorFullCylinder.material.map.offset.x += colorFullTextureRotation * delta
controls.update() controls.update()
matrix.updateUnlockedMinoes(delta) matrix.updateUnlockedMinoes(delta)
matrix.mixer?.update(delta) matrix.mixer?.update(delta)
renderer.render(scene, scene.camera) renderer.render(scene, world.camera)
envCamera.update(renderer, scene) envCamera.update(renderer, scene)
gui.update(); gui.update();
@ -593,8 +595,8 @@ function animate() {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight) renderer.setSize(window.innerWidth, window.innerHeight)
scene.camera.aspect = window.innerWidth / window.innerHeight world.camera.aspect = window.innerWidth / window.innerHeight
scene.camera.updateProjectionMatrix() world.camera.updateProjectionMatrix()
}) })
@ -623,7 +625,7 @@ let game = {
scene.remove(piece) scene.remove(piece)
piece = null piece = null
scene.remove(ghost) scene.remove(ghost)
scene.music.currentTime = 0 world.music.currentTime = 0
matrix.edge.visible = true matrix.edge.visible = true
this.playing = true this.playing = true
@ -644,7 +646,7 @@ let game = {
pauseSpan.className = "" pauseSpan.className = ""
stats.clock.start() stats.clock.start()
stats.clock.elapsedTime = stats.elapsedTime stats.clock.elapsedTime = stats.elapsedTime
scene.music.play() world.music.play()
if (piece) scheduler.setInterval(game.fall, stats.fallPeriod) if (piece) scheduler.setInterval(game.fall, stats.fallPeriod)
else this.generate() else this.generate()
@ -659,7 +661,7 @@ let game = {
piece.position.set(4, SKYLINE) piece.position.set(4, SKYLINE)
scene.add(piece) scene.add(piece)
ghost.copy(piece) ghost.copy(piece)
//scene.directionalLight.target = piece //world.directionalLight.target = piece
scene.add(ghost) scene.add(ghost)
if (piece.canMove(TRANSLATION.NONE)) { if (piece.canMove(TRANSLATION.NONE)) {
@ -683,11 +685,11 @@ let game = {
let nbClearedLines = matrix.clearLines() let nbClearedLines = matrix.clearLines()
if (settings.sfxVolume) { if (settings.sfxVolume) {
if (nbClearedLines == 4 || (tSpin && nbClearedLines)) { if (nbClearedLines == 4 || (tSpin && nbClearedLines)) {
scene.tetrisSound.currentTime = 0 world.tetrisSound.currentTime = 0
scene.tetrisSound.play() world.tetrisSound.play()
} else if (nbClearedLines || tSpin) { } else if (nbClearedLines || tSpin) {
scene.lineClearSound.currentTime = 0 world.lineClearSound.currentTime = 0
scene.lineClearSound.play() world.lineClearSound.play()
} }
} }
stats.lockDown(nbClearedLines, tSpin) stats.lockDown(nbClearedLines, tSpin)
@ -707,7 +709,7 @@ let game = {
scheduler.clearTimeout(repeat) scheduler.clearTimeout(repeat)
scheduler.clearInterval(autorepeat) scheduler.clearInterval(autorepeat)
scene.music.pause() world.music.pause()
document.onkeydown = null document.onkeydown = null
pauseSpan.onfocus = game.resume pauseSpan.onfocus = game.resume
@ -721,7 +723,7 @@ let game = {
renderer.domElement.onblur = null renderer.domElement.onblur = null
renderer.domElement.onfocus = null renderer.domElement.onfocus = null
game.playing = false game.playing = false
scene.music.pause() world.music.pause()
stats.clock.stop() stats.clock.stop()
localStorage["teTraHighScore"] = stats.highScore localStorage["teTraHighScore"] = stats.highScore
messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>GAME<br/>OVER</h1>` }) messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>GAME<br/>OVER</h1>` })
@ -746,10 +748,10 @@ let playerActions = {
hardDrop: function () { hardDrop: function () {
scheduler.clearTimeout(game.lockDown) scheduler.clearTimeout(game.lockDown)
scene.hardDropSound.play() world.hardDropSound.play()
if (settings.sfxVolume) { if (settings.sfxVolume) {
scene.hardDropSound.currentTime = 0 world.hardDropSound.currentTime = 0
scene.hardDropSound.play() world.hardDropSound.play()
} }
while (piece.move(TRANSLATION.DOWN)) stats.score += 2 while (piece.move(TRANSLATION.DOWN)) stats.score += 2
game.lockDown() game.lockDown()
@ -778,36 +780,36 @@ let playerActions = {
// Sounds // Sounds
const listener = new THREE.AudioListener() const listener = new THREE.AudioListener()
scene.camera.add( listener ) world.camera.add( listener )
const audioLoader = new THREE.AudioLoader(loadingManager) const audioLoader = new THREE.AudioLoader(loadingManager)
scene.music = new THREE.Audio(listener) world.music = new THREE.Audio(listener)
audioLoader.load('audio/Tetris_CheDDer_OC_ReMix.mp3', function( buffer ) { audioLoader.load('audio/Tetris_CheDDer_OC_ReMix.mp3', function( buffer ) {
scene.music.setBuffer(buffer) world.music.setBuffer(buffer)
scene.music.setLoop(true) world.music.setLoop(true)
scene.music.setVolume(settings.musicVolume/100) world.music.setVolume(settings.musicVolume/100)
if (game.playing) scene.music.play() if (game.playing) world.music.play()
}) })
scene.lineClearSound = new THREE.Audio(listener) world.lineClearSound = new THREE.Audio(listener)
audioLoader.load('audio/line-clear.ogg', function( buffer ) { audioLoader.load('audio/line-clear.ogg', function( buffer ) {
scene.lineClearSound.setBuffer(buffer) world.lineClearSound.setBuffer(buffer)
scene.lineClearSound.setVolume(settings.sfxVolume/100) world.lineClearSound.setVolume(settings.sfxVolume/100)
}) })
scene.tetrisSound = new THREE.Audio(listener) world.tetrisSound = new THREE.Audio(listener)
audioLoader.load('audio/tetris.ogg', function( buffer ) { audioLoader.load('audio/tetris.ogg', function( buffer ) {
scene.tetrisSound.setBuffer(buffer) world.tetrisSound.setBuffer(buffer)
scene.tetrisSound.setVolume(settings.sfxVolume/100) world.tetrisSound.setVolume(settings.sfxVolume/100)
}) })
scene.hardDropSound = new THREE.Audio(listener) world.hardDropSound = new THREE.Audio(listener)
audioLoader.load('audio/hard-drop.wav', function( buffer ) { audioLoader.load('audio/hard-drop.wav', function( buffer ) {
scene.hardDropSound.setBuffer(buffer) world.hardDropSound.setBuffer(buffer)
scene.hardDropSound.setVolume(settings.sfxVolume/100) world.hardDropSound.setVolume(settings.sfxVolume/100)
}) })
let scheduler = new Scheduler() let scheduler = new Scheduler()
let stats = new Stats() let stats = new Stats()
let settings = new Settings(playerActions) let settings = new Settings(playerActions)
var gui = new TetraGUI(game, settings, stats, scene) var gui = new TetraGUI(game, settings, stats, world)
gui.load() gui.load()

28
jsm/gui.js
View File

@ -3,7 +3,7 @@ import * as FPS from 'three/addons/libs/stats.module.js';
class TetraGUI extends GUI { class TetraGUI extends GUI {
constructor(game, settings, stats, scene) { constructor(game, settings, stats, world) {
super({title: "teTra"}) super({title: "teTra"})
this.startButton = this.add(game, "start").name("Jouer").hide() this.startButton = this.add(game, "start").name("Jouer").hide()
@ -49,32 +49,32 @@ class TetraGUI extends GUI {
this.settings.volume = this.settings.addFolder("Volume").open() this.settings.volume = this.settings.addFolder("Volume").open()
this.settings.volume.add(settings,"musicVolume").name("Musique").min(0).max(100).step(1).onChange((volume) => { this.settings.volume.add(settings,"musicVolume").name("Musique").min(0).max(100).step(1).onChange((volume) => {
if (volume) { if (volume) {
scene.music.setVolume(volume/100) world.music.setVolume(volume/100)
if (game.playing) scene.music.play() if (game.playing) world.music.play()
} else { } else {
scene.music.pause() world.music.pause()
} }
}) })
this.settings.volume.add(settings,"sfxVolume").name("Effets").min(0).max(100).step(1).onChange((volume) => { this.settings.volume.add(settings,"sfxVolume").name("Effets").min(0).max(100).step(1).onChange((volume) => {
scene.lineClearSound.setVolume(volume/100) world.lineClearSound.setVolume(volume/100)
scene.tetrisSound.setVolume(volume/100) world.tetrisSound.setVolume(volume/100)
scene.hardDropSound.setVolume(volume/100) world.hardDropSound.setVolume(volume/100)
}) })
if (window.location.search.includes("debug")) { if (window.location.search.includes("debug")) {
this.debug = this.addFolder("debug") this.debug = this.addFolder("debug")
let cameraPositionFolder = this.debug.addFolder("camera.position") let cameraPositionFolder = this.debug.addFolder("camera.position")
cameraPositionFolder.add(scene.camera.position, "x") cameraPositionFolder.add(world.camera.position, "x")
cameraPositionFolder.add(scene.camera.position, "y") cameraPositionFolder.add(world.camera.position, "y")
cameraPositionFolder.add(scene.camera.position, "z") cameraPositionFolder.add(world.camera.position, "z")
let lightFolder = this.debug.addFolder("lights intensity") let lightFolder = this.debug.addFolder("lights intensity")
lightFolder.add(scene.ambientLight, "intensity").name("ambient").min(0).max(20) lightFolder.add(world.ambientLight, "intensity").name("ambient").min(0).max(20)
lightFolder.add(scene.directionalLight, "intensity").name("directional").min(0).max(20) lightFolder.add(world.directionalLight, "intensity").name("directional").min(0).max(20)
let materialsFolder = this.debug.addFolder("materials opacity") let materialsFolder = this.debug.addFolder("materials opacity")
materialsFolder.add(scene.darkCylinder.material, "opacity").name("dark").min(0).max(1) materialsFolder.add(world.darkCylinder.material, "opacity").name("dark").min(0).max(1)
materialsFolder.add(scene.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1) materialsFolder.add(world.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1)
/*materialsFolder.add(I.prototype.material, "reflectivity").min(0).max(2).onChange(() => { /*materialsFolder.add(I.prototype.material, "reflectivity").min(0).max(2).onChange(() => {
J.prototype.material.reflectivity = I.prototype.material.reflectivity J.prototype.material.reflectivity = I.prototype.material.reflectivity
L.prototype.material.reflectivity = I.prototype.material.reflectivity L.prototype.material.reflectivity = I.prototype.material.reflectivity