From 9b942fcbd88d2183e28e117cde7f06e37d30a391 Mon Sep 17 00:00:00 2001 From: zolppy Date: Fri, 19 Jan 2024 01:13:12 -0300 Subject: [PATCH] =?UTF-8?q?continua=C3=A7=C3=A3o=20da=20repagina=C3=A7?= =?UTF-8?q?=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/styles.css | 26 ++------ assets/img/icons/apple.svg | 1 + assets/img/icons/first-place.svg | 1 + assets/img/icons/second-place.svg | 1 + assets/img/icons/sound-off.svg | 1 + assets/img/icons/sound-on.svg | 1 + assets/img/icons/third-place.svg | 1 + assets/js/script.js | 101 +++++++++++++++++------------- index.html | 35 +++++++++-- 9 files changed, 100 insertions(+), 68 deletions(-) create mode 100644 assets/img/icons/apple.svg create mode 100644 assets/img/icons/first-place.svg create mode 100644 assets/img/icons/second-place.svg create mode 100644 assets/img/icons/sound-off.svg create mode 100644 assets/img/icons/sound-on.svg create mode 100644 assets/img/icons/third-place.svg diff --git a/assets/css/styles.css b/assets/css/styles.css index 152d5f8..02d4552 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -5,13 +5,9 @@ html { } :root { - --gold-color: #Cd7f32; - --silver-color: #c0c0c0; - --bronze-color: #db9370; --hover-bg-color: #918e8e; --soft-white: #f5f5f5; --dark-green: #024202; - --apple-color: #a00; } * { @@ -45,28 +41,18 @@ body { justify-content: space-around; } -#score-container > i { - color: var(--apple-color); +#apple, +.trophy { + width: 30px; } -#apple { - font-size: 1.7rem; -} - -#first-place-container > i { - color: var(--gold-color); -} - -#second-place-container > i { - color: var(--silver-color); -} - -#third-place-container > i { - color: var(--bronze-color); +#sound { + width: 40px; } #score-container, .high-score { + line-height: 2.3; display: flex; align-items: center; gap: 0 15%; diff --git a/assets/img/icons/apple.svg b/assets/img/icons/apple.svg new file mode 100644 index 0000000..0af7e4c --- /dev/null +++ b/assets/img/icons/apple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icons/first-place.svg b/assets/img/icons/first-place.svg new file mode 100644 index 0000000..b1497de --- /dev/null +++ b/assets/img/icons/first-place.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icons/second-place.svg b/assets/img/icons/second-place.svg new file mode 100644 index 0000000..72874e9 --- /dev/null +++ b/assets/img/icons/second-place.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icons/sound-off.svg b/assets/img/icons/sound-off.svg new file mode 100644 index 0000000..0c3e5fd --- /dev/null +++ b/assets/img/icons/sound-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icons/sound-on.svg b/assets/img/icons/sound-on.svg new file mode 100644 index 0000000..b013bea --- /dev/null +++ b/assets/img/icons/sound-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/icons/third-place.svg b/assets/img/icons/third-place.svg new file mode 100644 index 0000000..644fbd0 --- /dev/null +++ b/assets/img/icons/third-place.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index c0dfb21..2350f04 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,15 +1,15 @@ /* Limpo este código quando tiver tempo */ /* Adicionar botão de resetar high scores */ -const soundButton = document.getElementById('toggle-mute-sound'); -const canvas = document.getElementById('stage'); -const context = canvas.getContext('2d'); -const deadSound = new Audio('assets/audio/dead.mp3'); -const eatSound = new Audio('assets/audio/eat.mp3'); -const keyUpSound = new Audio('assets/audio/up.mp3'); -const keyRightSound = new Audio('assets/audio/right.mp3'); -const keyLeftSound = new Audio('assets/audio/left.mp3'); -const keyDownSound = new Audio('assets/audio/down.mp3'); +const soundButton = document.getElementById("toggle-mute-sound"); +const canvas = document.getElementById("stage"); +const context = canvas.getContext("2d"); +const deadSound = new Audio("assets/audio/dead.mp3"); +const eatSound = new Audio("assets/audio/eat.mp3"); +const keyUpSound = new Audio("assets/audio/up.mp3"); +const keyRightSound = new Audio("assets/audio/right.mp3"); +const keyLeftSound = new Audio("assets/audio/left.mp3"); +const keyDownSound = new Audio("assets/audio/down.mp3"); const highScores = [0, 0, 0]; let box = 32; let snake = [ @@ -30,8 +30,9 @@ const food = { const compare = (a, b) => b - a; const activateSound = () => { - const soundIcon = document.getElementById('sound-icon'); - + const soundIcon = document.querySelector("#sound"); + const soundOff = "assets/img/icons/sound-off.svg"; + deadSound.muted = false; eatSound.muted = false; keyUpSound.muted = false; @@ -39,13 +40,17 @@ const activateSound = () => { keyLeftSound.muted = false; keyDownSound.muted = false; - soundIcon.classList.replace('bi-volume-up-fill', 'bi-volume-mute-fill'); - localStorage.setItem('sound-on', JSON.stringify(true)); + soundIcon.src = soundOff; + soundIcon.alt = "imagem em preto e branco que representa som desativado"; + soundIcon.classList.replace("sound-on", "sound-off"); + + localStorage.setItem("sound-on", JSON.stringify(true)); } const muteSound = () => { - const soundIcon = document.getElementById('sound-icon'); - + const soundIcon = document.querySelector("#sound") + const soundOn = "assets/img/icons/sound-on.svg"; + deadSound.muted = true; eatSound.muted = true; keyUpSound.muted = true; @@ -53,12 +58,15 @@ const muteSound = () => { keyLeftSound.muted = true; keyDownSound.muted = true; - soundIcon.classList.replace('bi-volume-mute-fill', 'bi-volume-up-fill'); - localStorage.setItem('sound-on', JSON.stringify(false)); + soundIcon.src = soundOn; + soundIcon.alt = "imagem em preto e branco que representa som ativado"; + soundIcon.classList.replace("sound-off", "sound-on"); + + localStorage.setItem("sound-on", JSON.stringify(false)); } const drawBG = () => { - context.fillStyle = 'lightgreen'; + context.fillStyle = "lightgreen"; context.fillRect(0, 0, 16 * box, 16 * box); } @@ -170,13 +178,13 @@ const drawFood = () => { } const updateScore = () => { - const scoreElement = document.getElementById('score'); + const scoreElement = document.getElementById("score"); scoreElement.textContent = score; } const updateStorage = () => { - localStorage.setItem('high-scores', + localStorage.setItem("high-scores", JSON.stringify(highScores.sort(compare))); } @@ -219,9 +227,9 @@ const keyPress = (event) => { }; const updateScores = () => { - const firstPlaceScore = document.getElementById('first-place-score'); - const secondPlaceScore = document.getElementById('second-place-score'); - const thirdPlaceScore = document.getElementById('third-place-score'); + const firstPlaceScore = document.getElementById("first-place-score"); + const secondPlaceScore = document.getElementById("second-place-score"); + const thirdPlaceScore = document.getElementById("third-place-score"); firstPlaceScore.textContent = highScores[0]; secondPlaceScore.textContent = highScores[1]; @@ -236,17 +244,17 @@ const gameOver = () => { }; const reload = () => { - document.addEventListener('keydown', () => location.reload()); + document.addEventListener("keydown", () => location.reload()); } - document.removeEventListener('keydown', keyPress); + document.removeEventListener("keydown", keyPress); - context.fillStyle = '#00000065'; + context.fillStyle = "#00000065"; context.fillRect(0, 0, canvas.width, canvas.height); - context.fillStyle = '#ffffff'; - context.font = '30px Comic Sans MS'; - const gameOverText = 'GAME OVER', + context.fillStyle = "#ffffff"; + context.font = "30px Comic Sans MS"; + const gameOverText = "GAME OVER", gameOverTextWidth = context.measureText(gameOverText).width; context.fillText( @@ -255,9 +263,9 @@ const gameOver = () => { canvas.height / 2 - 15 ); - context.font = '20px arial seriff'; + context.font = "20px arial seriff"; - const pressButtonText = 'Pressione qualquer tecla para reiniciar o jogo', + const pressButtonText = "Pressione qualquer tecla para reiniciar o jogo", pressButtonTextWidth = context.measureText(pressButtonText).width; context.fillText( @@ -268,7 +276,7 @@ const gameOver = () => { for (let i = 0; i < 3; i++) { if (score >= highScores[i]) { - const recordText = 'Sua pontuação é uma das maiores!' + const recordText = "Sua pontuação é uma das maiores!" const recordTextWidth = context.measureText(recordText).width; context.fillText( recordText, @@ -367,28 +375,35 @@ function startGame() { snake.unshift(newHead); } -soundButton.addEventListener('click', () => { - const soundIcon = document.getElementById('sound-icon'); +soundButton.addEventListener("click", () => { + const soundIcon = document.querySelector("#sound"); - soundIcon.classList.contains('bi-volume-mute-fill') ? muteSound() : activateSound(); + soundIcon.classList.contains("sound-off") ? muteSound() : activateSound(); }); -document.addEventListener('keydown', keyPress); +document.addEventListener("keydown", keyPress); + +window.addEventListener("load", () => { + const thisScores = JSON.parse(localStorage.getItem("high-scores")); + const sound = JSON.parse(localStorage.getItem("sound-on")); + const soundIcon = document.querySelector("#sound"); -window.addEventListener('load', () => { - const thisScores = JSON.parse(localStorage.getItem('high-scores')); - const sound = JSON.parse(localStorage.getItem('sound-on')); - const soundIcon = document.getElementById('sound-icon') + const soundOn = "assets/img/icons/sound-on.svg"; + const soundOff = "assets/img/icons/sound-off.svg"; - if (localStorage.getItem('sound-on') !== null) { + if (localStorage.getItem("sound-on") !== null) { if (sound) { activateSound(); - soundIcon.classList.replace('bi-volume-up-fill', 'bi-volume-mute-fill'); + soundIcon.src = soundOff; + soundIcon.alt = "imagem em preto e branco que representa som desativado"; + soundIcon.classList.replace("sound-on", "sound-off"); } if (!sound) { muteSound(); - soundIcon.classList.replace('bi-volume-mute-fill', 'bi-volume-up-fill'); + soundIcon.src = soundOn; + soundIcon.alt = "imagem em preto e branco que representa som ativado"; + soundIcon.classList.replace("sound-off", "sound-on"); } } diff --git a/index.html b/index.html index 16806de..fb2ebb4 100644 --- a/index.html +++ b/index.html @@ -19,21 +19,46 @@

SNAKE GAME v1.0.0

- 🍎0 + maça em preto e branco + 0
- 0 + imagem de troféu dourado + 0
- 0 + imagem de troféu prateado + 0
- 0 + imagem de troféu de cor bronze + 0