fist commit
This commit is contained in:
514
app.js
Normal file
514
app.js
Normal file
@@ -0,0 +1,514 @@
|
||||
Array.prototype.remove = function(item) {
|
||||
let index = this.indexOf(item)
|
||||
if (index == 0) {
|
||||
this.shift()
|
||||
return true
|
||||
} else if (index > 0) {
|
||||
this.splice(index, index)
|
||||
return true
|
||||
}
|
||||
else return false
|
||||
}
|
||||
|
||||
class Sprite {
|
||||
constructor(canvasCtx, src, x, y, width, height, frames=1, zoom=2) {
|
||||
this.canvasCtx = canvasCtx
|
||||
this.sprite = new Image()
|
||||
this.sprite.src = `img/${src}`
|
||||
this.sx = 0
|
||||
this.sy = 0
|
||||
this.sWidth = width
|
||||
this.sHeight = height
|
||||
this.dWidth = zoom * width
|
||||
this.dHeight = zoom * height
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.frames = frames
|
||||
this.frame = 0
|
||||
this.animated = false
|
||||
this.repeat = false
|
||||
}
|
||||
|
||||
set x(x) {
|
||||
this._x = x
|
||||
this.dx = x - (this.dWidth / 2)
|
||||
}
|
||||
|
||||
get x() {
|
||||
return this._x
|
||||
}
|
||||
|
||||
set y(y) {
|
||||
this._y = y
|
||||
this.dy = y - (this.dHeight / 2)
|
||||
}
|
||||
|
||||
get y() {
|
||||
return this._y
|
||||
}
|
||||
|
||||
play(repeat=false) {
|
||||
this.animated = true
|
||||
this.repeat = repeat
|
||||
return new Promise((resolve, reject) => {
|
||||
this.onanimationend = resolve
|
||||
})
|
||||
}
|
||||
|
||||
animate() {
|
||||
if (this.animated) {
|
||||
if (this.repeat) {
|
||||
this.frame = (this.frame + 1) % this.frames
|
||||
} else {
|
||||
if (this.frame < this.frames -1) {
|
||||
this.frame++
|
||||
} else {
|
||||
this.onanimationend()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onanimationend () {}
|
||||
|
||||
draw() {
|
||||
canvasCtx.drawImage(
|
||||
this.sprite,
|
||||
this.sx + this.frame * this.sWidth,
|
||||
this.sy,
|
||||
this.sWidth,
|
||||
this.sHeight,
|
||||
this.dx,
|
||||
this.dy,
|
||||
this.dWidth,
|
||||
this.dHeight
|
||||
)
|
||||
|
||||
this.animate()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Canon extends Sprite {
|
||||
constructor(canvasCtx, note) {
|
||||
let sharp = [1, 3, 6, 8, 10].includes(note % 12)
|
||||
super(canvasCtx, "canon.png", 34 * (note - FIRST_NOTE) + 66, sharp? 446:450, 11, 26, 4)
|
||||
this.note = note
|
||||
this.impactHeight = 9
|
||||
this.impactY = 0
|
||||
this.sy = sharp? 0 : this.sHeight
|
||||
this.shooting = false
|
||||
this.df = 1
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (this.shooting) {
|
||||
this.frame += this.df
|
||||
if (this.frame >= this.frames) this.df = -1
|
||||
else if (this.frame <= 2) this.df = 1
|
||||
} else {
|
||||
if (this.frame > 0) this.frame--
|
||||
}
|
||||
super.draw()
|
||||
if (this.frame) {
|
||||
this.canvasCtx.drawImage(this.sprite, this.sWidth*(this.frame), 0, this.sWidth, 1, this.dx, this.impactY, 22, this.dy - this.impactY)
|
||||
if (this.impactY) this.canvasCtx.drawImage(this.sprite, this.sWidth*(this.frame), 2*this.sHeight, this.sWidth, this.impactHeight, this.dx, this.impactY, this.dWidth, 2*this.impactHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Note extends Sprite {
|
||||
constructor(canvasCtx, note, duration, sx, sy, width, height, frames, shotAnimationPeriod) {
|
||||
super(canvasCtx, "note.png", 34 * (note - FIRST_NOTE) + 66, -40, width, height, frames, 1)
|
||||
this.note = note
|
||||
this.duration = duration
|
||||
this.sx = sx
|
||||
this.sy = sy
|
||||
this.shotAnimationPeriod = shotAnimationPeriod
|
||||
this.shot = false
|
||||
this.time = 0
|
||||
}
|
||||
|
||||
animate() {
|
||||
if (this.shot) {
|
||||
this.frame = Math.floor(this.time/this.shotAnimationPeriod) % this.frames
|
||||
} else {
|
||||
this.frame = Math.floor(this.time/10) % this.frames
|
||||
}
|
||||
this.time++
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (this.shot && this.frame == 1) {
|
||||
this.drawShot()
|
||||
this.animate()
|
||||
} else {
|
||||
super.draw()
|
||||
}
|
||||
}
|
||||
|
||||
drawShot() {
|
||||
canvasCtx.drawImage(this.sprite, 0, 0, this.sWidth, this.sHeight, this.dx, this.dy, this.dWidth, this.dHeight)
|
||||
}
|
||||
|
||||
explose() {
|
||||
playNoise(0.3, 0.4, 1400)
|
||||
return new Sprite(this.canvasCtx, "tiny-explosion.png", this.x, this.y, 16, 16, 7)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Sixteenth extends Note {
|
||||
constructor(canvasCtx, note, duration) {
|
||||
super(canvasCtx, note, duration, 21, 0, 21, 32, 2, 2)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Eighth extends Note {
|
||||
constructor(canvasCtx, note, duration) {
|
||||
super(canvasCtx, note, duration, 42, 0, 21, 32, 2, 2)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Quarter extends Note {
|
||||
constructor(canvasCtx, note, duration) {
|
||||
super(canvasCtx, note, duration, 36, 32, 28, 68, 2, 4)
|
||||
}
|
||||
|
||||
drawShot() {
|
||||
canvasCtx.drawImage(this.sprite, 0, 40, 34, 37, this.dx+2, this.dy+16, 34, 37)
|
||||
}
|
||||
|
||||
explose() {
|
||||
playNoise(0.5, 0.5, 1000)
|
||||
return new Sprite(this.canvasCtx, "little-explosion.png", this.x, this.y, 33, 33, 5)
|
||||
}
|
||||
}
|
||||
|
||||
class Whole extends Note {
|
||||
constructor(canvasCtx, note, duration) {
|
||||
super(canvasCtx, note, duration, 0, 78, 36, 40, 1)
|
||||
}
|
||||
|
||||
animate() {}
|
||||
|
||||
explose() {
|
||||
playNoise(0.8, 0.7, 400)
|
||||
return new Sprite(canvasCtx, "big-explosion.png", this.x, this.y, 48, 48, 8)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const MAX_LEVEL = 2
|
||||
const UPDATE_PERIOD = 10 //ms
|
||||
const FIRST_NOTE = 48
|
||||
const LAST_NOTE = 73
|
||||
const FREQUENCIES = [
|
||||
// C C♯ / D♭ D D♯ / E♭ E F F♯ / G♭ G G♯ / A♭ A A♯ / B♭ B
|
||||
16.35, 17.32, 18.35, 19.45, 20.6, 21.83, 23.12, 24.5, 25.96, 27.5, 29.14, 30.87,
|
||||
32.7, 34.65, 36.71, 38.89, 41.2, 43.65, 46.25, 49, 51.91, 55, 58.27, 61.74,
|
||||
65.41, 69.3, 73.42, 77.78, 82.41, 87.31, 92.5, 98, 103.83, 110, 116.54, 123.47,
|
||||
130.81, 138.59, 146.83, 155.56, 164.81, 174.61, 185, 196, 207.65, 220, 233.08, 246.94,
|
||||
261.63, 277.18, 293.66, 311.13, 329.63, 349.23, 369.99, 392, 415.3, 440, 466.16, 493.88,
|
||||
523.25, 554.37, 587.33, 622.25, 659.26, 698.46, 739.99, 783.99, 830.61, 880, 932.33, 987.77,
|
||||
1046.5, 1108.73, 1174.66, 1244.51, 1318.51, 1396.91, 1479.98, 1567.98, 1661.22, 1760, 1864.66, 1975.53,
|
||||
2093, 2217.46, 2349.32, 2489.02, 2637.02, 2793.83, 2959.96, 3135.96, 3322.44, 3520, 3729.31, 3951.07,
|
||||
4186.01, 4434.92, 4698.64, 4978.03, 5274.04, 5587.65, 5919.91, 6271.93, 6644.88, 7040, 7458.62, 7902.13,
|
||||
]
|
||||
|
||||
let keyMap = keyMapInput.value
|
||||
let playing = false
|
||||
|
||||
let canvasCtx = canvas.getContext("2d")
|
||||
canvasCtx.mozImageSmoothingEnabled = false
|
||||
canvasCtx.webkitImageSmoothingEnabled = false
|
||||
canvasCtx.msImageSmoothingEnabled = false
|
||||
canvasCtx.imageSmoothingEnabled = false
|
||||
|
||||
let consoleSprite = new Sprite(canvasCtx, "console.png", canvas.width/2, 554, 480, 86)
|
||||
let syntheSprite = new Sprite(canvasCtx, "synthe.png", canvas.width/2, 540, 110, 80)
|
||||
let canonSprites = []
|
||||
for (let note=FIRST_NOTE; note<LAST_NOTE; note++) canonSprites[note] = new Canon(canvasCtx, note)
|
||||
|
||||
window.onload = function() {
|
||||
startDialog.showModal()
|
||||
window.setInterval(draw, 60)
|
||||
}
|
||||
|
||||
function draw() {
|
||||
canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
consoleSprite.draw()
|
||||
canonSprites.forEach(canonSprite => canonSprite.draw())
|
||||
noteSprites.forEach(noteSprite => noteSprite.draw())
|
||||
syntheSprite.draw()
|
||||
explosionSprites.forEach(explosionSprite => explosionSprite.draw())
|
||||
}
|
||||
|
||||
|
||||
let audioCtx
|
||||
let volume
|
||||
let wave
|
||||
let mod
|
||||
let depth
|
||||
let compressor
|
||||
let oscillators = {}
|
||||
function init() {
|
||||
Tone.start()
|
||||
|
||||
audioCtx = new AudioContext()
|
||||
|
||||
compressor = audioCtx.createDynamicsCompressor()
|
||||
compressor.threshold.setValueAtTime(-50, audioCtx.currentTime)
|
||||
compressor.knee.setValueAtTime(40, audioCtx.currentTime)
|
||||
compressor.ratio.setValueAtTime(12, audioCtx.currentTime)
|
||||
compressor.attack.setValueAtTime(0, audioCtx.currentTime)
|
||||
compressor.release.setValueAtTime(0.25, audioCtx.currentTime)
|
||||
compressor.connect(audioCtx.destination)
|
||||
|
||||
volume = audioCtx.createGain()
|
||||
volRange.oninput()
|
||||
volume.connect(compressor)
|
||||
|
||||
mod = audioCtx.createOscillator() // the modulating oscillator
|
||||
depth = audioCtx.createGain() // the modulator amplifier
|
||||
modRange.oninput()
|
||||
mod.frequency.value = 6
|
||||
mod.connect(depth)
|
||||
mod.start()
|
||||
|
||||
onpartialinput()
|
||||
|
||||
showSettings()
|
||||
}
|
||||
|
||||
startDialog.onclose = init
|
||||
|
||||
function showSettings() {
|
||||
pause()
|
||||
settingsDialog.showModal()
|
||||
}
|
||||
|
||||
function pause() {
|
||||
Tone.Transport.pause()
|
||||
window.clearInterval(updateTaskId)
|
||||
playing = false
|
||||
}
|
||||
|
||||
settingsButton.onclick = showSettings
|
||||
|
||||
keyMapInput.onchange = function(event) {
|
||||
keyMap = keyMapInput.value
|
||||
}
|
||||
|
||||
volRange.oninput = function(event) {
|
||||
volume.gain.linearRampToValueAtTime(volRange.value, audioCtx.currentTime)
|
||||
}
|
||||
|
||||
modRange.oninput = function(event) {
|
||||
depth.gain.value = modRange.value
|
||||
}
|
||||
|
||||
function onpartialinput() {
|
||||
wave = audioCtx.createPeriodicWave(
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0].concat(Array.from(document.querySelectorAll(".partial")).map(range => range.value)),
|
||||
{disableNormalization: false,}
|
||||
)
|
||||
for (const note in oscillators) {
|
||||
oscillators[note].setPeriodicWave(wave)
|
||||
}
|
||||
}
|
||||
|
||||
var midiIputs
|
||||
midiSelect.onfocus = function() {
|
||||
midiIputs = {}
|
||||
midiSelect.innerHTML = `<option value="">Aucun</option>`
|
||||
navigator.requestMIDIAccess().then(
|
||||
midiAccess => {
|
||||
if (midiAccess.inputs.size) {
|
||||
for ([,input,] of midiAccess.inputs) {
|
||||
midiIputs[input.id] = input
|
||||
var option = document.createElement("option")
|
||||
option.value = input.id
|
||||
option.innerText = input.name
|
||||
midiSelect.add(option)
|
||||
input.onmidimessage = null
|
||||
}
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log(error)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
midiSelect.oninput = () => {
|
||||
for (const id in midiIputs) midiIputs[id].onmidimessage = null
|
||||
if (midiSelect.value) {
|
||||
midiIputs[midiSelect.value].onmidimessage = onMIDIMessage
|
||||
}
|
||||
}
|
||||
|
||||
function onMIDIMessage(event) {
|
||||
let [code, note, velocity] = event.data
|
||||
|
||||
if (144 <= code && code <= 159 && canonSprites[note]) {
|
||||
//playNote(note, velocity / 128)
|
||||
canonSprites[note].shooting = true
|
||||
} else if (128 <= code && code <= 143 && canonSprites[note]) {
|
||||
//stopNote(note)
|
||||
canonSprites[note].shooting = false
|
||||
}
|
||||
}
|
||||
|
||||
settingsDialog.onclose = newGame
|
||||
|
||||
let level
|
||||
function newGame() {
|
||||
settingsDialog.onclose = resume
|
||||
level = 0
|
||||
nextLevel()
|
||||
}
|
||||
|
||||
let midiSong
|
||||
let noteSprites = []
|
||||
let explosionSprites = []
|
||||
async function nextLevel() {
|
||||
level++
|
||||
midiSong = await Midi.fromUrl(`midi/${level}.mid`)
|
||||
levelTitle.innerText = `Niveau ${level}`
|
||||
songNameTitle.innerText = midiSong.name
|
||||
noteSprites = []
|
||||
midiSong.tracks.forEach(track => {
|
||||
//console.log(track.name)
|
||||
track.notes.forEach(note => {
|
||||
let noteSprite
|
||||
let durationInQuarter = note.durationTicks / midiSong.header.ppq
|
||||
if (durationInQuarter <= 0.25) noteSprite = new Sixteenth(canvasCtx, note.midi, 1000*note.duration)
|
||||
else if (durationInQuarter <= 0.5) noteSprite = new Eighth(canvasCtx, note.midi, 1000*note.duration)
|
||||
else if (durationInQuarter <= 1) noteSprite = new Quarter(canvasCtx, note.midi, 1000*note.duration)
|
||||
else noteSprite = new Whole(canvasCtx, note.midi, 1000*note.duration)
|
||||
Tone.Transport.scheduleOnce(time => noteSprites.push(noteSprite), note.time)
|
||||
})
|
||||
})
|
||||
Tone.Transport.scheduleOnce(time => nextLevel, midiSong.duration)
|
||||
|
||||
levelDialog.showModal()
|
||||
}
|
||||
|
||||
levelDialog.onclose = resume
|
||||
|
||||
let updateTaskId
|
||||
function resume() {
|
||||
playing = true
|
||||
Tone.Transport.start()
|
||||
updateTaskId = window.setInterval(update, UPDATE_PERIOD)
|
||||
}
|
||||
|
||||
function update() {
|
||||
noteSprites.forEach(noteSprite => {
|
||||
noteSprite.y += 0.5
|
||||
})
|
||||
noteSprites.filter(noteSprite => noteSprite.y >= 420).forEach(noteSprite => {
|
||||
stopNote(noteSprite.note)
|
||||
let explosionSprite = noteSprite.explose()
|
||||
explosionSprites.push(explosionSprite)
|
||||
explosionSprite.play().then(() => explosionSprites.remove(explosionSprite))
|
||||
})
|
||||
noteSprites = noteSprites.filter(note => note.y < 420)
|
||||
|
||||
canonSprites.forEach(canonSprite => {
|
||||
let noteSprite = noteSprites.find(noteSprite => noteSprite.note == canonSprite.note)
|
||||
if (noteSprite) {
|
||||
noteSprite.shot = canonSprite.shooting
|
||||
if (noteSprite.shot) {
|
||||
noteSprite.duration -= UPDATE_PERIOD
|
||||
if (noteSprite.duration > 0) {
|
||||
playNote(canonSprite.note)
|
||||
canonSprite.impactY = noteSprite.y
|
||||
} else {
|
||||
stopNote(canonSprite.note)
|
||||
let explosionSprite = noteSprite.explose()
|
||||
explosionSprites.push(explosionSprite)
|
||||
explosionSprite.play().then(() => explosionSprites.remove(explosionSprite))
|
||||
noteSprites.remove(noteSprite)
|
||||
}
|
||||
} else {
|
||||
stopNote(canonSprite.note)
|
||||
}
|
||||
} else {
|
||||
stopNote(canonSprite.note)
|
||||
canonSprite.impactY = 0
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function playNote(note, velocity=0.7) {
|
||||
if(oscillators[note]) return
|
||||
|
||||
var oscillator = audioCtx.createOscillator()
|
||||
oscillator.frequency.value = FREQUENCIES[note]
|
||||
oscillator.setPeriodicWave(wave)
|
||||
|
||||
oscillator.velocity = audioCtx.createGain()
|
||||
oscillator.velocity.gain.value = 0
|
||||
oscillator.velocity.gain.linearRampToValueAtTime(velocity, audioCtx.currentTime + 0.05)
|
||||
oscillator.connect(oscillator.velocity)
|
||||
oscillator.start()
|
||||
oscillator.velocity.connect(volume)
|
||||
|
||||
depth.connect(oscillator.detune)
|
||||
|
||||
oscillators[note] = oscillator
|
||||
}
|
||||
|
||||
function stopNote(note) {
|
||||
if(!oscillators[note]) return
|
||||
|
||||
velocity = oscillators[note].velocity.gain.value
|
||||
oscillators[note].velocity.gain.setValueCurveAtTime([velocity, velocity/10, velocity/20, 0], audioCtx.currentTime + 0.1, 0.5)
|
||||
delete(oscillators[note])
|
||||
}
|
||||
|
||||
function playNoise(noiseDuration, startGain=0.5, 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([startGain, startGain/5, 0], audioCtx.currentTime, noiseDuration)
|
||||
noise.connect(bandpass).connect(gain).connect(audioCtx.destination)
|
||||
noise.start()
|
||||
}
|
||||
|
||||
document.onkeydown = function(event) {
|
||||
if (playing && keyMap.includes(event.key)) {
|
||||
event.preventDefault()
|
||||
let note = FIRST_NOTE + keyMap.indexOf(event.key)
|
||||
canonSprites[note].shooting = true
|
||||
}
|
||||
}
|
||||
|
||||
document.onkeyup = function(event) {
|
||||
if (playing && keyMap.includes(event.key)) {
|
||||
event.preventDefault()
|
||||
let note = FIRST_NOTE + keyMap.indexOf(event.key)
|
||||
canonSprites[note].shooting = false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user