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

change note on combo

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-12-06 01:07:15 +01:00
parent 365fb17694
commit 048d17e041
11 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@ -32,50 +32,50 @@
<form name="settingsForm" class="needs-validation" novalidate> <form name="settingsForm" class="needs-validation" novalidate>
<fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center"> <fieldset id="keyBindFielset" class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Commandes</legend> <legend class="text-start">Commandes</legend>
<label for="moveLeftInput" title="Gauche" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left"></i></label> <label for="moveLeftInput" title="Gauche" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left"></i></label>
<div class="col-sm-4"><input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center btn btn-dark" value="←" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="moveLeft" id="moveLeftInput" type="text" class="form-control text-center btn btn-dark" value="←" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<div class="col-sm-4"><input name="moveRight" id="moveRightInput" type="text" class="form-control text-center btn btn-dark" value="→" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="moveRight" id="moveRightInput" type="text" class="form-control text-center btn btn-dark" value="→" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<label for="moveRightInput" title="Droite" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-right"></i></label> <label for="moveRightInput" title="Droite" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-right"></i></label>
<label for="rotateCounterclockwiseInput" title="Rotation anti-horaire" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-counterclockwise"></i></label> <label for="rotateCounterclockwiseInput" title="Rotation anti-horaire" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-counterclockwise"></i></label>
<div class="col-sm-4"><input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="text" class="form-control text-center btn btn-dark" value="w" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="rotateCounterclockwise" id="rotateCounterclockwiseInput" type="text" class="form-control text-center btn btn-dark" value="w" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<div class="col-sm-4"><input name="rotateClockwise" id="rotateClockwiseInput" type="text" class="form-control text-center btn btn-dark" value="↑" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="rotateClockwise" id="rotateClockwiseInput" type="text" class="form-control text-center btn btn-dark" value="↑" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<label for="rotateClockwiseInput" title="Rotation horaire" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-clockwise"></i></label> <label for="rotateClockwiseInput" title="Rotation horaire" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-clockwise"></i></label>
<label for="softDropInput" title="Chute lente" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-down-short"></i></label> <label for="softDropInput" title="Chute lente" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-down-short"></i></label>
<div class="col-sm-4"><input name="softDrop" id="softDropInput" type="text" class="form-control text-center btn btn-dark" value="↓" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="softDrop" id="softDropInput" type="text" class="form-control text-center btn btn-dark" value="↓" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<div class="col-sm-4"><input name="hardDrop" id="hardDropInput" type="text" class="form-control text-center btn btn-dark" value="Espace" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="hardDrop" id="hardDropInput" type="text" class="form-control text-center btn btn-dark" value="Espace" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<label for="hardDropInput" title="Chute rapide" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-download"></i></label> <label for="hardDropInput" title="Chute rapide" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-download"></i></label>
<label for="holdInput" title="Échanger la pièce" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left-right"></i></label> <label for="holdInput" title="Échanger la pièce" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-arrow-left-right"></i></label>
<div class="col-sm-4"><input name="hold" id="holdInput" type="text" class="form-control text-center btn btn-dark" value="c" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="hold" id="holdInput" type="text" class="form-control text-center btn btn-dark" value="c" onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<div class="col-sm-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center btn btn-dark" value="Échap." onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div> <div class="col-4"><input name="pause" id="pauseInput" type="text" class="form-control text-center btn btn-dark" value="Échap." onclick="changeKey(this)" placeholder="Touche ?" title="Modifier la touche" required></div>
<label for="pauseInput" title="Pause" class="col-sm-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-pause"></i></label> <label for="pauseInput" title="Pause" class="col-2 col-form-label d-flex align-items-center justify-content-center"><i class="bi bi-pause"></i></label>
</fieldset> </fieldset>
<fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center"> <fieldset id="autorepeatFieldset" class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Répétition automatique</legend> <legend class="text-start">Répétition automatique</legend>
<label for="arrInput" class="col-sm-2 col-form-label"><abbr title="Automatic Repeat Rate : période de répétition de l'action">ARR</abbr></label> <label for="arrInput" class="col-2 col-form-label"><abbr title="Automatic Repeat Rate : période de répétition de l'action">ARR</abbr></label>
<div class="col-sm-4"><div class="input-group"><input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"><div class="input-group-text">ms</div></div></div> <div class="col-4"><div class="input-group"><input name="arr" id="arrInput" type="number" class="form-control text-center" value="50" min="2" max="200" step="1"><div class="input-group-text">ms</div></div></div>
<div class="col-sm-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div> <div class="col-4"><div class="input-group"><input name="das" id="dasInput" type="number" class="form-control text-center" value="300" min="100" max="500" step="5"><div class="input-group-text">ms</div></div></div>
<label for="dasInput" class="col-sm-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label> <label for="dasInput" class="col-2 col-form-label"><abbr title="Delayed AutoShift : délai initial avant répétition">DAS</abbr></label>
</fieldset> </fieldset>
<fieldset class="row g-2 mb-3 align-items-center text-center"> <fieldset class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Interface</legend> <legend class="text-start">Interface</legend>
<label for="sfxVolumeRange" class="col-sm-2 col-form-label">Volume</label> <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
<div class="col-sm-4 d-flex align-items-baseline"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.5"></div> <div class="col-4 d-flex align-items-baseline"><input id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.5"></div>
<div class="col-sm-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value"> <div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
<option selected>Classique</option> <option selected>Classique</option>
<option>Minimal</option> <option>Minimal</option>
<option>Pop</option> <option>Pop</option>
<option>Électro</option> <option>Électro</option>
<option>Rétro</option> <option>Rétro</option>
</select></div> </select></div>
<label for="stylesheetSelect" class="col-sm-2 col-form-label">Thème</label> <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
</fieldset> </fieldset>
<fieldset class="row g-2 mb-3 align-items-center text-center"> <fieldset class="row g-2 mb-3 align-items-center text-center">
<legend class="text-start">Partie</legend> <legend class="text-start">Partie</legend>
<label for="levelInput" class="col-sm-2 col-form-label text-center">Niveau</label> <label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>
<div class="col-sm-4"> <div class="col-4">
<input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15"> <input name="startLevel" id="levelInput" type="number" class="form-control text-center" value="1" min="1" max="15">
</div> </div>
<div class="col-sm-4"> <div class="col-4">
<button id="resumeButton" type="submit" class="btn btn-primary w-100" autofocus>Jouer</button> <button id="resumeButton" type="submit" class="btn btn-primary w-100" autofocus>Jouer</button>
</div> </div>
</fieldset> </fieldset>
@ -210,11 +210,11 @@
<img src="favicons/T-0.png"/><img src="favicons/T-1.png"/><img src="favicons/T-2.png"/><img src="favicons/T-3.png"/> <img src="favicons/T-0.png"/><img src="favicons/T-1.png"/><img src="favicons/T-2.png"/><img src="favicons/T-3.png"/>
<img src="favicons/Z-0.png"/><img src="favicons/Z-1.png"/><img src="favicons/Z-2.png"/><img src="favicons/Z-3.png"/> <img src="favicons/Z-0.png"/><img src="favicons/Z-1.png"/><img src="favicons/Z-2.png"/><img src="favicons/Z-3.png"/>
<!--audio id="wallSound" src="sounds/808K_A.wav" preload="auto" type="audio/wav"></audio--> <audio id="wallSound" src="sounds/808K_A.wav" preload="auto" type="audio/wav"></audio>
<audio id="hardDropSound" src="sounds/Conga Low.wav" preload="auto" type="audio/wav"></audio> <audio id="hardDropSound" src="sounds/909S.wav" preload="auto" type="audio/wav"></audio>
<audio id="tSpinSound" src="sounds/HIGHQ_A.wav" preload="auto" type="audio/wav"></audio> <audio id="tSpinSound" src="sounds/line-clear.ogg" preload="auto" type="audio/ogg"></audio>
<audio id="lineClearSound" src="sounds/HIGHQ_B.wav" preload="auto" type="audio/wav"></audio> <audio id="lineClearSound" src="sounds/line-clear.ogg" preload="auto" type="audio/ogg"></audio>
<audio id="quatuorSound" src="sounds/HIGHQ_C.wav" preload="auto" type="audio/wav"></audio> <audio id="quatuorSound" src="sounds/tetris.ogg" preload="auto" type="audio/ogg"></audio>
</span> </span>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
@ -226,5 +226,3 @@
</script> </script>
</body> </body>
</html> </html>

4
js/app.js
View File

@ -45,8 +45,10 @@ function newGame(event) {
settings.form.classList.add('was-validated') settings.form.classList.add('was-validated')
} else { } else {
const audioContext = new AudioContext() const audioContext = new AudioContext()
for(const sound of document.getElementsByTagName("audio")) for(const sound of document.getElementsByTagName("audio")) {
sound.preservesPitch = false
audioContext.createMediaElementSource(sound).connect(audioContext.destination) audioContext.createMediaElementSource(sound).connect(audioContext.destination)
}
levelInput.name = "level" levelInput.name = "level"
levelInput.disabled = true levelInput.disabled = true

2
js/game_logic.js
View File

@ -332,7 +332,7 @@ class Tetromino {
matrix.drawPiece() matrix.drawPiece()
return true return true
} else if (!hardDropped) { } else if (!hardDropped) {
// wallSound.play() wallSound.play()
if (translation == TRANSLATION.DOWN) { if (translation == TRANSLATION.DOWN) {
this.locked = true this.locked = true
if (!scheduler.timeoutTasks.has(lockDown)) if (!scheduler.timeoutTasks.has(lockDown))

18
js/interface.js
View File

@ -176,13 +176,6 @@ class Stats {
if (nbClearedLines == 4) this.nbQuatuors++ if (nbClearedLines == 4) this.nbQuatuors++
if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++ if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++
// Sound
if (sfxVolumeRange.value) {
if (nbClearedLines == 4 || (nbClearedLines && tSpin)) playSound(quatuorSound)
else if (nbClearedLines) playSound(lineClearSound)
else if (tSpin) playSound(tSpinSound)
}
// Cleared lines & T-Spin // Cleared lines & T-Spin
let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines] let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
let patternScore = 100 * this.level * awardedLineClears let patternScore = 100 * this.level * awardedLineClears
@ -258,6 +251,13 @@ class Stats {
this.b2b = -1 this.b2b = -1
} }
// Sound
if (sfxVolumeRange.value) {
if (nbClearedLines == 4 || (nbClearedLines && tSpin)) playSound(quatuorSound, this.combo)
else if (nbClearedLines) playSound(lineClearSound, this.combo)
else if (tSpin) playSound(tSpinSound)
}
this.goal -= awardedLineClears this.goal -= awardedLineClears
if (this.goal <= 0) this.level++ if (this.goal <= 0) this.level++
} }
@ -288,7 +288,9 @@ Stats.prototype.timeFormat = new Intl.DateTimeFormat("fr-FR", {
timeZone: "UTC" timeZone: "UTC"
}) })
function playSound(sound) { function playSound(sound, note=0) {
sound.pause()
sound.currentTime = 0 sound.currentTime = 0
sound.playbackRate = Math.pow(5/4, note)
sound.play() sound.play()
} }

BIN
sounds/909S.wav Normal file
View File

Binary file not shown.

BIN
sounds/Conga Low.wav
View File

Binary file not shown.

BIN
sounds/HIGHQ_A.wav
View File

Binary file not shown.

BIN
sounds/HIGHQ_B.wav
View File

Binary file not shown.

BIN
sounds/HIGHQ_C.wav
View File

Binary file not shown.

BIN
sounds/line-clear.ogg Normal file
View File

Binary file not shown.

BIN
sounds/tetris.ogg Normal file
View File

Binary file not shown.