|
/** |
|
* HTML Elements |
|
*/ |
|
const game = document.getElementById('game') |
|
const invadersZone = document.getElementById('invaders') |
|
const trenchesZone = document.getElementById('trenches') |
|
const playerZone = document.getElementById('ground') |
|
const scoreZone = document.getElementById('underground') |
|
const playButton = document.getElementById('play-button') |
|
let invaderRows |
|
let player |
|
|
|
/** |
|
* GAME Variables |
|
*/ |
|
let invadersLevel = 0 |
|
let maxInvadersLevel = 6 |
|
let playerPosition = 0 |
|
let maxPlayerPosition = 31 |
|
let gameSpeed = 10000 |
|
let gameOn = false |
|
let gameLoop |
|
|
|
/** |
|
* GAME UI Setup |
|
*/ |
|
const invaderSeeds = ['👾', '🐲', '👻', '👽', '🐙'] |
|
const trenchSeeds = ['🪨'] |
|
const playerSeeds = ['🐳', '🐳', '🐳'] |
|
|
|
function makeInvaders(seeds, zone, number) { |
|
for (let row = 0; row < seeds.length; row++) { |
|
let div = document.createElement('div') |
|
div.classList.add('invaderRow') |
|
for (let i = 0; i < number; i++) { |
|
let s = document.createElement('span') |
|
s.innerHTML = seeds[row] |
|
s.classList.add('invader') |
|
div.append(s) |
|
} |
|
zone.append(div) |
|
} |
|
} |
|
|
|
function makeTrenches(seeds, zone, number) { |
|
for (let row = 0; row < seeds.length; row++) { |
|
let div = document.createElement('div') |
|
div.classList.add('trenchRow') |
|
for (let i = 0; i < number; i++) { |
|
let s = document.createElement('span') |
|
s.innerHTML = seeds[row] |
|
s.classList.add('trench') |
|
div.append(s) |
|
} |
|
zone.append(div) |
|
} |
|
} |
|
|
|
function makePlayer(seeds, playerZone, scoreZone) { |
|
let div = document.createElement('div') |
|
div.classList.add('playerRow') |
|
player = document.createElement('span') |
|
// player.setAttribute('role', 'input') |
|
player.innerHTML = seeds[0] |
|
player.classList.add('player') |
|
div.append(player) |
|
playerZone.append(div) |
|
|
|
const remainingSeeds = seeds.splice(1) |
|
|
|
div = document.createElement('div') |
|
div.classList.add('scoreRow') |
|
for (let i = 0; i < remainingSeeds.length; i++) { |
|
let life = document.createElement('span') |
|
life.innerHTML = remainingSeeds[i] |
|
life.classList.add('lives') |
|
div.append(life) |
|
} |
|
scoreZone.append(div) |
|
} |
|
|
|
function invadersDown() { |
|
if (invadersLevel === maxInvadersLevel) { |
|
if (gameSpeed >= 200) { |
|
gameSpeed = gameSpeed - 100 |
|
} |
|
|
|
Array.from(invaderRows).forEach((row) => { |
|
row.classList.remove('horizontal') |
|
row.classList.remove('vertical') |
|
row.classList.remove(`vertical-${invadersLevel}`) |
|
}) |
|
playButton.classList.remove('playing') |
|
invadersLevel = 0 |
|
playerPosition = 0 |
|
play() |
|
} else { |
|
Array.from(invaderRows)[0].classList.remove(`vertical-${invadersLevel}`) |
|
Array.from(invaderRows)[0].classList.add(`vertical-${++invadersLevel}`) |
|
} |
|
} |
|
|
|
function play() { |
|
if (invaderRows === undefined) { |
|
invaderRows = document.querySelectorAll('.invaderRow') |
|
} |
|
Array.from(invaderRows).forEach((row) => { |
|
row.classList.add('horizontal') |
|
row.classList.add('vertical') |
|
row.classList.add(`vertical-${invadersLevel}`) |
|
}) |
|
playButton.classList.add('playing') |
|
if (!gameLoop) { |
|
gameLoop = setInterval(invadersDown, gameSpeed) |
|
} |
|
} |
|
|
|
function stop() { |
|
Array.from(invaderRows).forEach((row) => { |
|
row.classList.remove('horizontal') |
|
row.classList.remove('vertical') |
|
row.classList.remove(`vertical-${invadersLevel}`) |
|
}) |
|
playButton.classList.remove('playing') |
|
invadersLevel = 0 |
|
playerPosition = 0 |
|
clearInterval(gameLoop) |
|
} |
|
|
|
function setUp() { |
|
makeInvaders(invaderSeeds, invadersZone, 11) |
|
makeTrenches(trenchSeeds, trenchesZone, 4) |
|
makePlayer(playerSeeds, playerZone, scoreZone) |
|
|
|
playButton.addEventListener('click', (e) => { |
|
if (!gameOn) { |
|
play() |
|
} else { |
|
stop() |
|
} |
|
gameOn = !gameOn |
|
}) |
|
|
|
document.addEventListener( |
|
'keydown', |
|
(event) => { |
|
switch (event.key) { |
|
case 'ArrowRight': |
|
if (playerPosition === maxPlayerPosition) { |
|
return |
|
} else { |
|
player.classList.remove(`horizontal-${playerPosition}`) |
|
player.classList.add(`horizontal-${++playerPosition}`) |
|
} |
|
break |
|
case 'ArrowLeft': |
|
if (playerPosition === -1) { |
|
return |
|
} else { |
|
player.classList.remove(`horizontal-${playerPosition}`) |
|
player.classList.add(`horizontal-${--playerPosition}`) |
|
} |
|
break |
|
} |
|
}, |
|
false, |
|
) |
|
} |
|
|
|
setUp() |
