163 lines
3.4 KiB
JavaScript
163 lines
3.4 KiB
JavaScript
const canon = document.querySelector('#canon')
|
|
const body = document.querySelector('body')
|
|
|
|
const toucheGauche = 37
|
|
const toucheDroite = 39
|
|
const toucheEspace = 32
|
|
|
|
let direction = null
|
|
let tireBloque = false
|
|
|
|
function deplacerCanon() {
|
|
if (direction === null) {
|
|
return
|
|
}
|
|
|
|
let position = canon.offsetLeft
|
|
let vitesse = 5
|
|
|
|
if (direction === 'gauche') {
|
|
position = Math.max(10, position - vitesse)
|
|
} else {
|
|
position = Math.min(window.innerWidth - 60, position + vitesse)
|
|
}
|
|
|
|
canon.style.left = `${position}px`
|
|
}
|
|
|
|
function deplacerProjectiles() {
|
|
const projectiles = document.querySelectorAll('.projectile')
|
|
const aliens = document.querySelectorAll('.alien')
|
|
|
|
projectiles.forEach((projectile) => {
|
|
let position = projectile.offsetTop
|
|
let positionGauche = projectile.offsetLeft
|
|
let vitesse = 5
|
|
|
|
position = position - vitesse
|
|
|
|
if (position < 0) {
|
|
projectile.remove()
|
|
|
|
return
|
|
}
|
|
|
|
projectile.style.top = `${position}px`
|
|
|
|
aliens.forEach((alien) => {
|
|
const alienPositionGauche = alien.offsetLeft
|
|
const alienPositionTop = alien.offsetTop
|
|
|
|
if (
|
|
positionGauche >= alienPositionGauche &&
|
|
positionGauche <= alienPositionGauche + 96 &&
|
|
position <= alienPositionTop
|
|
) {
|
|
alien.remove()
|
|
projectile.remove()
|
|
|
|
const explosion = document.createElement('div')
|
|
explosion.innerHTML = document.querySelector('#explosion').innerHTML
|
|
explosion.classList.add('explosion')
|
|
|
|
const audio = new Audio('./sons/explosion.mp3');
|
|
audio.play();
|
|
|
|
explosion.style.left = `${positionGauche-60}px`
|
|
explosion.style.top = `${position-30}px`
|
|
|
|
body.appendChild(explosion)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
function deplacerAliens() {
|
|
const aliens = document.querySelectorAll('.alien')
|
|
|
|
aliens.forEach((alien) => {
|
|
let position = alien.offsetTop
|
|
let vitesse = 2
|
|
|
|
position = position + vitesse
|
|
|
|
if (position >= canon.offsetTop) {
|
|
alien.remove()
|
|
|
|
return
|
|
}
|
|
|
|
alien.style.top = `${position}px`
|
|
})
|
|
}
|
|
|
|
function ajouterAlien() {
|
|
const aliens = document.querySelectorAll('.alien')
|
|
|
|
if (aliens.length > 8) {
|
|
return
|
|
}
|
|
|
|
const alien = document.createElement('div')
|
|
alien.classList.add('alien')
|
|
|
|
let positionGauche = Math.random() * (window.innerWidth - 150) + 45
|
|
let positionTop = -96
|
|
|
|
alien.style.left = `${positionGauche}px`
|
|
alien.style.top = `${positionTop}px`
|
|
|
|
body.appendChild(alien)
|
|
}
|
|
|
|
function tirer() {
|
|
if (tireBloque) {
|
|
return
|
|
}
|
|
|
|
tireBloque = true
|
|
|
|
setTimeout(() => {
|
|
tireBloque = false
|
|
}, 500)
|
|
|
|
const projectile = document.createElement('div')
|
|
projectile.classList.add('projectile')
|
|
|
|
let positionGauche = canon.offsetLeft + 25 - 10
|
|
let positionTop = window.innerHeight - 110
|
|
|
|
projectile.style.left = `${positionGauche}px`
|
|
projectile.style.top = `${positionTop}px`
|
|
|
|
body.appendChild(projectile)
|
|
}
|
|
|
|
setInterval(deplacerCanon, 10)
|
|
setInterval(deplacerProjectiles, 10)
|
|
setInterval(deplacerAliens, 50)
|
|
setInterval(ajouterAlien, 4000)
|
|
|
|
window.addEventListener('keydown', (e) => {
|
|
if (e.keyCode === toucheGauche) {
|
|
direction = 'gauche'
|
|
}
|
|
|
|
else if (e.keyCode === toucheDroite) {
|
|
direction = 'droite'
|
|
}
|
|
|
|
else if (e.keyCode === toucheEspace) {
|
|
tirer()
|
|
}
|
|
})
|
|
|
|
window.addEventListener('keyup', (e) => {
|
|
if (e.keyCode === toucheGauche) {
|
|
direction = null
|
|
}
|
|
|
|
else if (e.keyCode === toucheDroite) {
|
|
direction = null
|
|
}
|
|
})
|