diff --git a/app.js b/app.js index ea998da..f4057c6 100644 --- a/app.js +++ b/app.js @@ -1,8 +1,11 @@ -document.addEventListener("DOMContentLoaded", () => { - const scoreDisplay = document.getElementById("score"); +document.addEventListener('DOMContentLoaded', () => { + const scoreDisplay = document.getElementById('score'); const width = 28; let score = 0; - const grid = document.querySelector(".grid"); + const grid = document.querySelector('.grid'); + const gameStartsAudio = new Audio('./assets/audio/gameStartsAudio.mp3'); + const gameOverAudio = new Audio('./assets/audio/gameEndsAudio.mp3'); + const pacmanEatsAudio = new Audio('./assets/audio/pacmanEatsAudio.mp3'); const layout = [ 1, 1, @@ -800,24 +803,46 @@ document.addEventListener("DOMContentLoaded", () => { //create your board function createBoard() { for (let i = 0; i < layout.length; i++) { - const square = document.createElement("div"); + const square = document.createElement('div'); grid.appendChild(square); squares.push(square); //add layout to the board if (layout[i] === 0) { - squares[i].classList.add("pac-dot"); + squares[i].classList.add('pac-dot'); } else if (layout[i] === 1) { - squares[i].classList.add("wall"); + squares[i].classList.add('wall'); } else if (layout[i] === 2) { - squares[i].classList.add("ghost-lair"); + squares[i].classList.add('ghost-lair'); } else if (layout[i] === 3) { - squares[i].classList.add("power-pellet"); + squares[i].classList.add('power-pellet'); } } } createBoard(); + // play audio when game starts + function playGameStartsAudio() { + gameStartsAudio.currentTime = 0; + gameStartsAudio.play(); + } + + //play audio when game ends + function playGameEndAudio() { + gameOverAudio.currentTime = 0; + gameOverAudio.play(); + } + + function playPacManEatAudio() { + pacmanEatsAudio.currentTime = 0; + pacmanEatsAudio.play(); + } + + // play background audio during DOM onload + window.onload = (e) => { + playGameStartsAudio(); + }; + //create Characters //draw pacman onto the board let pacmanCurrentIndex = 490; @@ -826,7 +851,7 @@ document.addEventListener("DOMContentLoaded", () => { y: 0, }; const pacmanSpeed = 200; - squares[pacmanCurrentIndex].classList.add("pac-man"); + squares[pacmanCurrentIndex].classList.add('pac-man'); //get the coordinates of pacman on the grid with X and Y axis // function getCoordinates(index) { // return [index % width, Math.floor(index / width)] @@ -840,8 +865,8 @@ document.addEventListener("DOMContentLoaded", () => { case 37: if ( pacmanCurrentIndex % width !== 0 && - !squares[pacmanCurrentIndex - 1].classList.contains("wall") && - !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex - 1].classList.contains('wall') && + !squares[pacmanCurrentIndex - 1].classList.contains('ghost-lair') ) { pacmanVelocity.y = 0; pacmanVelocity.x = 1; @@ -850,8 +875,8 @@ document.addEventListener("DOMContentLoaded", () => { case 38: if ( pacmanCurrentIndex - width >= 0 && - !squares[pacmanCurrentIndex - width].classList.contains("wall") && - !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex - width].classList.contains('wall') && + !squares[pacmanCurrentIndex - width].classList.contains('ghost-lair') ) { pacmanVelocity.y = 0; pacmanVelocity.x = -1; @@ -860,8 +885,8 @@ document.addEventListener("DOMContentLoaded", () => { case 39: if ( pacmanCurrentIndex % width < width - 1 && - !squares[pacmanCurrentIndex + 1].classList.contains("wall") && - !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex + 1].classList.contains('wall') && + !squares[pacmanCurrentIndex + 1].classList.contains('ghost-lair') ) { pacmanVelocity.y = 1; pacmanVelocity.x = 0; @@ -870,8 +895,8 @@ document.addEventListener("DOMContentLoaded", () => { case 40: if ( pacmanCurrentIndex + width < width * width && - !squares[pacmanCurrentIndex + width].classList.contains("wall") && - !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex + width].classList.contains('wall') && + !squares[pacmanCurrentIndex + width].classList.contains('ghost-lair') ) { pacmanVelocity.y = -1; pacmanVelocity.x = 0; @@ -884,15 +909,15 @@ document.addEventListener("DOMContentLoaded", () => { //move pacman function movePacman() { - squares[pacmanCurrentIndex].classList.remove("pac-man"); + squares[pacmanCurrentIndex].classList.remove('pac-man'); setInterval(() => { if (pacmanVelocity.x === 1 && pacmanVelocity.y == 0) { if ( pacmanCurrentIndex % width !== 0 && - !squares[pacmanCurrentIndex - 1].classList.contains("wall") && - !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex - 1].classList.contains('wall') && + !squares[pacmanCurrentIndex - 1].classList.contains('ghost-lair') ) { - squares[pacmanCurrentIndex].classList.remove("pac-man"); + squares[pacmanCurrentIndex].classList.remove('pac-man'); pacmanCurrentIndex -= 1; } @@ -903,10 +928,10 @@ document.addEventListener("DOMContentLoaded", () => { if (pacmanVelocity.x === -1 && pacmanVelocity.y == 0) { if ( pacmanCurrentIndex - width >= 0 && - !squares[pacmanCurrentIndex - width].classList.contains("wall") && - !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex - width].classList.contains('wall') && + !squares[pacmanCurrentIndex - width].classList.contains('ghost-lair') ) { - squares[pacmanCurrentIndex].classList.remove("pac-man"); + squares[pacmanCurrentIndex].classList.remove('pac-man'); pacmanCurrentIndex -= width; } @@ -914,10 +939,10 @@ document.addEventListener("DOMContentLoaded", () => { if (pacmanVelocity.x === 0 && pacmanVelocity.y == 1) { if ( pacmanCurrentIndex % width < width - 1 && - !squares[pacmanCurrentIndex + 1].classList.contains("wall") && - !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex + 1].classList.contains('wall') && + !squares[pacmanCurrentIndex + 1].classList.contains('ghost-lair') ) { - squares[pacmanCurrentIndex].classList.remove("pac-man"); + squares[pacmanCurrentIndex].classList.remove('pac-man'); pacmanCurrentIndex += 1; } @@ -928,15 +953,15 @@ document.addEventListener("DOMContentLoaded", () => { if (pacmanVelocity.x === 0 && pacmanVelocity.y == -1) { if ( pacmanCurrentIndex + width < width * width && - !squares[pacmanCurrentIndex + width].classList.contains("wall") && - !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair") + !squares[pacmanCurrentIndex + width].classList.contains('wall') && + !squares[pacmanCurrentIndex + width].classList.contains('ghost-lair') ) { - squares[pacmanCurrentIndex].classList.remove("pac-man"); + squares[pacmanCurrentIndex].classList.remove('pac-man'); pacmanCurrentIndex += width; } } - squares[pacmanCurrentIndex].classList.add("pac-man"); + squares[pacmanCurrentIndex].classList.add('pac-man'); pacDotEaten(); powerPelletEaten(); }, pacmanSpeed); @@ -944,28 +969,29 @@ document.addEventListener("DOMContentLoaded", () => { // what happens when you eat a pac-dot function pacDotEaten() { - if (squares[pacmanCurrentIndex].classList.contains("pac-dot")) { + if (squares[pacmanCurrentIndex].classList.contains('pac-dot')) { score++; if (score < 50) { - document.getElementById("score").classList.add("low-score"); + document.getElementById('score').classList.add('low-score'); } else if (score > 100) { - document.getElementById("score").classList.add("mid-score"); + document.getElementById('score').classList.add('mid-score'); } else if (score > 200) { - document.getElementById("score").classList.add("high-score"); + document.getElementById('score').classList.add('high-score'); } scoreDisplay.innerHTML = score; - squares[pacmanCurrentIndex].classList.remove("pac-dot"); + squares[pacmanCurrentIndex].classList.remove('pac-dot'); checkForWin(); } } //what happens when you eat a power-pellet function powerPelletEaten() { - if (squares[pacmanCurrentIndex].classList.contains("power-pellet")) { + if (squares[pacmanCurrentIndex].classList.contains('power-pellet')) { + playPacManEatAudio(); score += 10; ghosts.forEach((ghost) => (ghost.isScared = true)); setTimeout(unScareGhosts, 10000); - squares[pacmanCurrentIndex].classList.remove("power-pellet"); + squares[pacmanCurrentIndex].classList.remove('power-pellet'); checkForWin(); } } @@ -989,16 +1015,16 @@ document.addEventListener("DOMContentLoaded", () => { //all my ghosts ghosts = [ - new Ghost("blinky", 348, 100), - new Ghost("stinky", 376, 400), - new Ghost("inky", 351, 300), - new Ghost("clyde", 379, 200), + new Ghost('blinky', 348, 100), + new Ghost('stinky', 376, 400), + new Ghost('inky', 351, 300), + new Ghost('clyde', 379, 200), ]; //draw my ghosts onto the grid ghosts.forEach((ghost) => { squares[ghost.currentIndex].classList.add(ghost.className); - squares[ghost.currentIndex].classList.add("ghost"); + squares[ghost.currentIndex].classList.add('ghost'); }); function moveGhost(ghost) { @@ -1008,36 +1034,36 @@ document.addEventListener("DOMContentLoaded", () => { ghost.timerId = setInterval(function () { //if the next square your ghost is going to go to does not have a ghost and does not have a wall if ( - !squares[ghost.currentIndex + direction].classList.contains("ghost") && - !squares[ghost.currentIndex + direction].classList.contains("wall") + !squares[ghost.currentIndex + direction].classList.contains('ghost') && + !squares[ghost.currentIndex + direction].classList.contains('wall') ) { //remove the ghosts classes squares[ghost.currentIndex].classList.remove(ghost.className); - squares[ghost.currentIndex].classList.remove("ghost", "scared-ghost"); + squares[ghost.currentIndex].classList.remove('ghost', 'scared-ghost'); //move into that space ghost.currentIndex += direction; - squares[ghost.currentIndex].classList.add(ghost.className, "ghost"); + squares[ghost.currentIndex].classList.add(ghost.className, 'ghost'); //else find a new random direction to go in } else direction = directions[Math.floor(Math.random() * directions.length)]; //if the ghost is currently scared if (ghost.isScared) { - squares[ghost.currentIndex].classList.add("scared-ghost"); + squares[ghost.currentIndex].classList.add('scared-ghost'); } //if the ghost is currently scared and pacman is on it if ( ghost.isScared && - squares[ghost.currentIndex].classList.contains("pac-man") + squares[ghost.currentIndex].classList.contains('pac-man') ) { squares[ghost.currentIndex].classList.remove( ghost.className, - "ghost", - "scared-ghost" + 'ghost', + 'scared-ghost' ); ghost.currentIndex = ghost.startIndex; score += 100; - squares[ghost.currentIndex].classList.add(ghost.className, "ghost"); + squares[ghost.currentIndex].classList.add(ghost.className, 'ghost'); } checkForGameOver(); }, ghost.speed); @@ -1046,15 +1072,16 @@ document.addEventListener("DOMContentLoaded", () => { //check for a game over function checkForGameOver() { if ( - squares[pacmanCurrentIndex].classList.contains("ghost") && - !squares[pacmanCurrentIndex].classList.contains("scared-ghost") + squares[pacmanCurrentIndex].classList.contains('ghost') && + !squares[pacmanCurrentIndex].classList.contains('scared-ghost') ) { + playGameEndAudio(); ghosts.forEach((ghost) => clearInterval(ghost.timerId)); - document.removeEventListener("keyup", movePacman); + document.removeEventListener('keyup', movePacman); pacmanVelocity.x = 0; pacmanVelocity.y = 0; //display game over screen and refresh after 3s to rest game - document.getElementById("game-over-screen").style.display = "flex"; + document.getElementById('game-over-screen').style.display = 'flex'; setTimeout(function () { window.location.reload(); }, 3000); @@ -1065,11 +1092,11 @@ document.addEventListener("DOMContentLoaded", () => { function checkForWin() { if (score === 274) { ghosts.forEach((ghost) => clearInterval(ghost.timerId)); - document.removeEventListener("keyup", movePacman); + document.removeEventListener('keyup', movePacman); pacmanVelocity.x = 0; pacmanVelocity.y = 0; //display you won screen and refresh after 3s to rest game - document.getElementById("you-won-screen").style.display = "flex"; + document.getElementById('you-won-screen').style.display = 'flex'; setTimeout(function () { window.location.reload(); }, 3000); @@ -1078,17 +1105,20 @@ document.addEventListener("DOMContentLoaded", () => { //start the game when enter is pressed function startGame(event) { + console.log('game started'); + gameStartsAudio.pause(); + gameStartsAudio.currentTime = 0; if (event.keyCode === 13) { - document.removeEventListener("keydown", startGame); + document.removeEventListener('keydown', startGame); //remove start screen - document.getElementById("start-screen").style.display = "none"; + document.getElementById('start-screen').style.display = 'none'; //set pacman velocity and enable movement - document.addEventListener("keyup", setPacmanVelocity); + document.addEventListener('keyup', setPacmanVelocity); movePacman(); // move the Ghosts randomly ghosts.forEach((ghost) => moveGhost(ghost)); } } - document.addEventListener("keydown", startGame); + document.addEventListener('keydown', startGame); }); diff --git a/assets/audio/gameEndsAudio.mp3 b/assets/audio/gameEndsAudio.mp3 new file mode 100644 index 0000000..3be4c6e Binary files /dev/null and b/assets/audio/gameEndsAudio.mp3 differ diff --git a/assets/audio/gamePlayingAudio.mp3 b/assets/audio/gamePlayingAudio.mp3 new file mode 100644 index 0000000..077cb7b Binary files /dev/null and b/assets/audio/gamePlayingAudio.mp3 differ diff --git a/assets/audio/gameStartsAudio.mp3 b/assets/audio/gameStartsAudio.mp3 new file mode 100644 index 0000000..b44c693 Binary files /dev/null and b/assets/audio/gameStartsAudio.mp3 differ diff --git a/assets/audio/pacmanEatsAudio.mp3 b/assets/audio/pacmanEatsAudio.mp3 new file mode 100644 index 0000000..365d056 Binary files /dev/null and b/assets/audio/pacmanEatsAudio.mp3 differ diff --git a/assets/bg.png b/assets/bg.png new file mode 100644 index 0000000..c01f945 Binary files /dev/null and b/assets/bg.png differ diff --git a/styles.css b/styles.css index 76ce086..77fce55 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ @font-face { - font-family: "PressStart2P"; - src: url("./fonts/PressStart2P.ttf"); + font-family: 'PressStart2P'; + src: url('./fonts/PressStart2P.ttf'); } * { @@ -9,8 +9,8 @@ } body { - font-family: "PressStart2P", sans-serif; - background-color: black; + font-family: 'PressStart2P', sans-serif; + background: linear-gradient(180deg, #020109 0%, #000b49 48.96%, #03010b 100%); display: flex; flex-direction: column; justify-content: center; @@ -24,6 +24,7 @@ body { flex-direction: column; justify-content: space-evenly; align-items: center; + z-index: -1; } .grid { @@ -54,40 +55,198 @@ body { } .blinky { + position: relative; background-color: red; + border-top-left-radius: 200px; + border-top-right-radius: 200px; +} + +.blinky::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.blinky::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .stinky { + position: relative; background-color: rgb(221, 18, 130); + border-top-left-radius: 200px; + border-top-right-radius: 200px; +} + +.stinky::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.stinky::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .inky { background-color: rgb(15, 214, 204); + border-top-left-radius: 200px; + border-top-right-radius: 200px; + position: relative; +} + +.inky::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.inky::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .clyde { background-color: rgb(243, 125, 78); + border-top-left-radius: 200px; + border-top-right-radius: 200px; + position: relative; +} + +.clyde::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.clyde::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .ghost { border: 0px; - border-radius: 0px; +} + +.ghost ::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.ghost ::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .scared-ghost { background-color: purple; - border: 0px; - border-radius: 0px; + position: relative; + border-top-left-radius: 200px; + border-top-right-radius: 200px; +} + +.scared-ghost::after { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + left: 3px; + top: 5px; + width: 3px; + position: absolute; +} + +.scared-ghost::before { + content: ''; + background-color: #ffffff; + padding: 1px; + border-radius: 50%; + height: 2px; + right: 3px; + top: 5px; + width: 3px; + position: absolute; } .wall { - background-color: rgb(8, 14, 102); + background-color: rgb(0 24 109); } .pac-man { background-color: rgb(247, 232, 22); border-radius: 10px; + position: relative; } + h2 { color: white; font-weight: normal; @@ -107,7 +266,12 @@ h2 { } #start-screen { + background-image: url(./assets/bg.png); background-color: black; + height: 100vh; + background-position: center; + background-repeat: initial; + background-size: inherit; color: white; flex-direction: column; align-items: center;