adrien/angry-notes
adrien/angry-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

victory

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-08-30 23:47:30 +02:00
parent fe0e618c76
commit 0a09ad4e24
5 changed files with 36 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app.js
View File

@ -116,9 +116,9 @@ class Sprite {
class Cannon extends Sprite {
constructor(canvasCtx, note) {
let sharp = [1, 3, 6, 8, 10].includes(note % 12)
super(canvasCtx, "cannon.png", 34 * (note - FIRST_NOTE) + 66, sharp? 422:426, 11, 26, 4)
super(canvasCtx, "cannon.png", 34 * (note - FIRST_NOTE) + 66, sharp? 418:424, 11, 26, 4)
this.note = note
this.key = keyMap[note - FIRST_NOTE].toUpperCase()
this.key = keyMap[note - FIRST_NOTE]?.toUpperCase() || ""
this.impactHeight = 9
this.impactY = 0
this.sy = sharp? 0 : this.sHeight
@ -164,6 +164,7 @@ class Note extends Sprite {
this.shotAnimationPeriod = shotAnimationPeriod
this.shot = false
this.time = 0
this.angriness = 1
}
animate() {
@ -228,6 +229,7 @@ class Quarter extends Note {
class Whole extends Note {
constructor(canvasCtx, note, duration, velocity) {
super(canvasCtx, note, duration, velocity, 36, 100, 36, 40, 1)
this.angriness = 2
}
animate() {}
@ -352,7 +354,7 @@ settingsButton.onclick = showSettings
keyMapInput.onclick = keyMapInput.onkeyup = function(event) {
let cursorPosition = keyMapInput.selectionEnd
if (event.key == "ArrowRight") {
if ((event.key == "ArrowRight" && cursorPosition <= keyMapInput.value.length) || cursorPosition == 0) {
keyMapInput.setSelectionRange(cursorPosition, cursorPosition+1)
} else {
keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
@ -472,7 +474,7 @@ async function nextLevel(time=0) {
levelDialog.showModal()
} else {
// win
victory(time)
}
}
@ -524,6 +526,11 @@ function update(time) {
})
}
function victory(time) {
canvas.classList = "victory"
victoryDialog.showModal()
}
function gameOver(time) {
playing = false
@ -544,11 +551,11 @@ function gameOver(time) {
Tone.Transport.clear(updateTaskId)
Tone.Transport.scheduleOnce((time) => {
Tone.Transport.stop(time)
gameOverDialog.showModal()
}, time + 0.2)
}, time + 0.1)
gameOverDialog.showModal()
}
gameOverDialog.onclose = () => {
victoryDialog.onclose = gameOverDialog.onclose = function() {
document.location = ""
}

BIN
img/fireworks.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

14
index.html
View File

@ -14,7 +14,7 @@
</head>
<body>
<section class="nes-container is-dark" style="padding: 0;">
<canvas style="background-image: url(img/pixel-city-chill.gif); background-size: cover;" id="canvas" width="960" height="540" tabindex="9"></canvas>
<canvas id="canvas" width="960" height="540" tabindex="9"></canvas>
</section>
<dialog id="startDialog" class="nes-dialog is-rounded is-dark">
<form method="dialog">
@ -38,8 +38,9 @@
<h3 class="title">Clavier MIDI</h3>
<div class="nes-field" style="display: flex; flex-direction: column-reverse;">
<div style="overflow-x: scroll;padding: 2px;">
<input type="text" id="keyMapInput" class="nes-input is-dark"
<input type="text" id="keyMapInput" class="nes-textarea is-dark"
minlength="25" maxlength="25" size="25" required tabindex="2"
title="Cliquez pour changer une touche"
placeholder="wsxdcvgbhnj,e'r(tyèu_içop" value="wsxdcvgbhnj,e'r(tyèu_içop"/>
</div>
<div class="nes-select is-dark">
@ -80,6 +81,15 @@
</div>
</form>
</dialog>
<dialog id="victoryDialog" class="nes-dialog is-rounded is-dark">
<form method="dialog">
<h2 class="title is-centered">Victoire !</h2>
<p>Vous avez vaincu la musique.</p>
<div class="is-centered">
<button class="nes-btn is-primary" tabindex="1">Rejouer ?</button>
</div>
</form>
</dialog>
<dialog id="gameOverDialog" class="nes-dialog is-rounded is-dark">
<form method="dialog">
<h2 class="title is-centered">Game over</h2>

10
style.css
View File

@ -27,6 +27,16 @@ body::before,
pointer-events: none;
}
#canvas {
background-image: url(img/pixel-city-chill.gif);
background-size: cover;
}
#canvas.victory {
background-image: url(img/fireworks.gif);
background-size: contain;
}
.nes-dialog {
max-width: 90%;
}

50
test.html
View File

@ -1,50 +0,0 @@
<body>
<label for="duration">Duration</label>
<input
name="duration"
id="duration"
type="range"
min="0"
max="2"
value="1"
step="0.1" />
<label for="band">Band</label>
<input
name="band"
id="band"
type="range"
min="400"
max="1200"
value="1000"
step="5" />
</body>
<script>
const audioCtx = new AudioContext();
function playNoise(noiseDuration, bandHz=1000) {
const bufferSize = audioCtx.sampleRate * noiseDuration
const noiseBuffer = new AudioBuffer({
length: bufferSize,
sampleRate: audioCtx.sampleRate,
})
const data = noiseBuffer.getChannelData(0)
for (let i = 0; i < bufferSize; i++) {
data[i] = Math.random() * 2 - 1;
}
const noise = new AudioBufferSourceNode(audioCtx, {
buffer: noiseBuffer,
})
const bandpass = new BiquadFilterNode(audioCtx, {
type: "bandpass",
frequency: bandHz,
})
const gain = new GainNode(audioCtx)
gain.gain.setValueCurveAtTime([0.5, 1/10, 0], audioCtx.currentTime, noiseDuration)
noise.connect(bandpass).connect(gain).connect(audioCtx.destination)
noise.start()
}
</script>