From 1548ffe1217563ab9e2de2526f4fab9b58b157fd Mon Sep 17 00:00:00 2001 From: Joshua Perry <45966243+jpez-development@users.noreply.github.com> Date: Thu, 28 Apr 2022 21:35:23 +0100 Subject: [PATCH 1/5] added bomb falling, collision, and animation logic --- game.html | 3 ++- scripts/enemy.js | 25 ++++++++++++++++++++++--- scripts/projectile.js | 3 ++- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/game.html b/game.html index a980be1..78bafb6 100644 --- a/game.html +++ b/game.html @@ -39,7 +39,8 @@ - + + diff --git a/scripts/enemy.js b/scripts/enemy.js index f21b1e6..13119e2 100644 --- a/scripts/enemy.js +++ b/scripts/enemy.js @@ -1,10 +1,12 @@ /* enemy spawning logic */ var aliens = []; +var bombs = []; function spawnEnemy() { var alien = document.createElement("div"); alien.className = "alien"; alien.id = "alien"; + alien.style.zIndex = "2" while (true) { alien.style.left = Math.floor(Math.random() * document.body.offsetWidth) + "px"; if (document.elementFromPoint(alien.offsetLeft, alien.offsetTop).classList.contains("alien") == false) { @@ -16,11 +18,28 @@ function spawnEnemy() { } function spawnBomb() { - var alien = aliens[0]; + var alien = aliens[Math.floor(Math.random() * aliens.length)]; var bomb = document.createElement("div"); bomb.className = "bomb"; bomb.style.left = "28px"; bomb.style.top = "70px"; - bomb.style.zIndex = "-1"; - alien.appendChild(bomb); + bomb.style.zIndex = "1"; + bomb.style.display = "absolute"; + alien.appendChild(bomb); + bombLogic = setInterval(fall, 100); + bombs.push([bomb, bombLogic]); } + +function fall() { + var bomb = bombs[Math.floor(Math.random() * bombs.length)]; + bomb[0].style.top = (bomb[0].offsetTop + 10) + "px"; + + for (let element of bombs) { + if (document.elementFromPoint(element[0].offsetLeft, element[0].offsetTop).classList.contains("sky") != true) { + if(Math.floor(Math.random() * 4) == 3) { + clearInterval(element[1]); + element[0].className = "explosion"; + } + } + } +} \ No newline at end of file diff --git a/scripts/projectile.js b/scripts/projectile.js index f2e4835..4a0d746 100644 --- a/scripts/projectile.js +++ b/scripts/projectile.js @@ -1 +1,2 @@ -/* logic for bombs */ \ No newline at end of file +/* logic for bombs */ + From ff1a6af68715a5e7d09dece95ea6301daa3c92c4 Mon Sep 17 00:00:00 2001 From: Joshua Perry <45966243+jpez-development@users.noreply.github.com> Date: Thu, 28 Apr 2022 21:55:14 +0100 Subject: [PATCH 2/5] added explosion logic --- scripts/enemy.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scripts/enemy.js b/scripts/enemy.js index 13119e2..30b7bd9 100644 --- a/scripts/enemy.js +++ b/scripts/enemy.js @@ -12,6 +12,7 @@ function spawnEnemy() { if (document.elementFromPoint(alien.offsetLeft, alien.offsetTop).classList.contains("alien") == false) { document.body.appendChild(alien); aliens.push(alien); + console.log("Alien Spawned") break; } } @@ -28,6 +29,7 @@ function spawnBomb() { alien.appendChild(bomb); bombLogic = setInterval(fall, 100); bombs.push([bomb, bombLogic]); + console.log("Bomb Spawned") } function fall() { @@ -39,6 +41,10 @@ function fall() { if(Math.floor(Math.random() * 4) == 3) { clearInterval(element[1]); element[0].className = "explosion"; + console.log("Explosion" + bombs.length) + setTimeout(() => {element[0].remove()}, 3000); + bombs.splice(bombs.indexOf(element),1); + console.log("Bomb Despawned" + bombs.length); } } } From af9066fea9bdd301178742e8d0af28a288fe5e2c Mon Sep 17 00:00:00 2001 From: Joshua Perry <45966243+jpez-development@users.noreply.github.com> Date: Fri, 29 Apr 2022 10:18:20 +0100 Subject: [PATCH 3/5] explosion logic, character currently disappears --- scripts/enemy.js | 24 ++++++++++++++++++------ scripts/launch.js | 2 ++ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/scripts/enemy.js b/scripts/enemy.js index 30b7bd9..48e4083 100644 --- a/scripts/enemy.js +++ b/scripts/enemy.js @@ -11,7 +11,8 @@ function spawnEnemy() { alien.style.left = Math.floor(Math.random() * document.body.offsetWidth) + "px"; if (document.elementFromPoint(alien.offsetLeft, alien.offsetTop).classList.contains("alien") == false) { document.body.appendChild(alien); - aliens.push(alien); + alienLogic = setInterval(spawnBomb, 3000); + aliens.push([alien, alienLogic]); console.log("Alien Spawned") break; } @@ -26,7 +27,7 @@ function spawnBomb() { bomb.style.top = "70px"; bomb.style.zIndex = "1"; bomb.style.display = "absolute"; - alien.appendChild(bomb); + alien[0].appendChild(bomb); bombLogic = setInterval(fall, 100); bombs.push([bomb, bombLogic]); console.log("Bomb Spawned") @@ -37,15 +38,26 @@ function fall() { bomb[0].style.top = (bomb[0].offsetTop + 10) + "px"; for (let element of bombs) { - if (document.elementFromPoint(element[0].offsetLeft, element[0].offsetTop).classList.contains("sky") != true) { - if(Math.floor(Math.random() * 4) == 3) { + var closestElement = document.elementFromPoint(element[0].offsetLeft, element[0].offsetTop+10); + if (!closestElement.classList.contains("sky") && !closestElement.classList.contains("alien") && !closestElement.classList.contains("bomb") && !closestElement.classList.contains("explosion")) { + if(Math.floor(Math.random() * 2) == 1) { clearInterval(element[1]); element[0].className = "explosion"; - console.log("Explosion" + bombs.length) + console.log("Explosion") setTimeout(() => {element[0].remove()}, 3000); bombs.splice(bombs.indexOf(element),1); - console.log("Bomb Despawned" + bombs.length); + console.log("Bomb Despawned"); } + } + } +} + +function checkExplosion() { + for (let element of document.getElementsByClassName("explosion")) { + var elemRect = element.getBoundingClientRect(); + var playerRect = document.getElementById("player").getBoundingClientRect(); + if (elemRect.bottom >= playerRect.top && elemRect.right >= playerRect.left) { + document.getElementById("player").style.display = "none"; } } } \ No newline at end of file diff --git a/scripts/launch.js b/scripts/launch.js index abdf398..3b23da6 100644 --- a/scripts/launch.js +++ b/scripts/launch.js @@ -20,5 +20,7 @@ function startGame() { showDisplay("block"); document.getElementById("start").style.display = "none"; document.getElementsByClassName("weapon")[0].style.display = "none"; + setInterval(spawnEnemy, 2500); + setInterval(checkExplosion, 10); } document.addEventListener("DOMContentLoaded", load); From 004c9755efc76487e64e31532960aee9db389512 Mon Sep 17 00:00:00 2001 From: Joshua Perry <45966243+jpez-development@users.noreply.github.com> Date: Fri, 29 Apr 2022 10:52:27 +0100 Subject: [PATCH 4/5] fixed collision detection between bombs and player --- scripts/enemy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/enemy.js b/scripts/enemy.js index 48e4083..586d66a 100644 --- a/scripts/enemy.js +++ b/scripts/enemy.js @@ -56,7 +56,7 @@ function checkExplosion() { for (let element of document.getElementsByClassName("explosion")) { var elemRect = element.getBoundingClientRect(); var playerRect = document.getElementById("player").getBoundingClientRect(); - if (elemRect.bottom >= playerRect.top && elemRect.right >= playerRect.left) { + if (elemRect.bottom >= playerRect.top && elemRect.right >= playerRect.left && elemRect.left <= playerRect.right && elemRect.top <= playerRect.bottom) { document.getElementById("player").style.display = "none"; } } From 988843eb55275dd41524609f794975641e9c493a Mon Sep 17 00:00:00 2001 From: Joshua Perry <45966243+jpez-development@users.noreply.github.com> Date: Fri, 29 Apr 2022 10:56:51 +0100 Subject: [PATCH 5/5] added comments --- scripts/control.js | 5 +++++ scripts/enemy.js | 4 ++++ scripts/launch.js | 3 +++ 3 files changed, 12 insertions(+) diff --git a/scripts/control.js b/scripts/control.js index b789134..dfdaf67 100644 --- a/scripts/control.js +++ b/scripts/control.js @@ -8,6 +8,7 @@ function setVars() { document.onloadend = setVars; +/*Controls vertical movement*/ function verticalMovement(keyCode) { var playerLeft = player.offsetLeft; var playerTop = player.offsetTop; @@ -33,6 +34,7 @@ function verticalMovement(keyCode) { } } +/*Controls horizontal movement*/ function horizontalMovement(keyCode) { var playerLeft = player.offsetLeft; var playerTop = player.offsetTop; @@ -58,6 +60,7 @@ function horizontalMovement(keyCode) { } } +/*Controls movement interval*/ function move() { if (currentKey == 0) { verticalMovement(lastKey); @@ -73,11 +76,13 @@ function move() { } +/*Gets triggered keystroke*/ function getKey(event) { lastKey = currentKey; currentKey = event.keyCode; } +/*Identifies if no keys are pressed*/ function stop(event) { if (currentKey == lastKey) { currentKey = 0; diff --git a/scripts/enemy.js b/scripts/enemy.js index 586d66a..599f758 100644 --- a/scripts/enemy.js +++ b/scripts/enemy.js @@ -2,6 +2,7 @@ var aliens = []; var bombs = []; +/*Spawns Enemies*/ function spawnEnemy() { var alien = document.createElement("div"); alien.className = "alien"; @@ -19,6 +20,7 @@ function spawnEnemy() { } } +/*Spawns a bomb*/ function spawnBomb() { var alien = aliens[Math.floor(Math.random() * aliens.length)]; var bomb = document.createElement("div"); @@ -33,6 +35,7 @@ function spawnBomb() { console.log("Bomb Spawned") } +/*Makes a random bomb fall a set amount and explodes if colliding with the floor*/ function fall() { var bomb = bombs[Math.floor(Math.random() * bombs.length)]; bomb[0].style.top = (bomb[0].offsetTop + 10) + "px"; @@ -52,6 +55,7 @@ function fall() { } } +/*Checks to see if player is colliding with exploded bomb*/ function checkExplosion() { for (let element of document.getElementsByClassName("explosion")) { var elemRect = element.getBoundingClientRect(); diff --git a/scripts/launch.js b/scripts/launch.js index 3b23da6..5908283 100644 --- a/scripts/launch.js +++ b/scripts/launch.js @@ -6,6 +6,7 @@ function showDisplay(mode) { } } +/*Registers interval functions and trigger functions*/ function load() { document.addEventListener("keydown", getKey) document.addEventListener("keyup", stop) @@ -16,6 +17,7 @@ function load() { document.getElementById("start").style.display = "block"; } +/*Starts game functionality*/ function startGame() { showDisplay("block"); document.getElementById("start").style.display = "none"; @@ -23,4 +25,5 @@ function startGame() { setInterval(spawnEnemy, 2500); setInterval(checkExplosion, 10); } + document.addEventListener("DOMContentLoaded", load);