From c860784109b23595e851c02ea0b5dfeb0a21e5d9 Mon Sep 17 00:00:00 2001 From: zolppy Date: Sun, 3 Dec 2023 14:26:23 -0300 Subject: [PATCH] =?UTF-8?q?c=C3=B3digo=20refatorado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/style.css | 94 +++++++++++++++++++------------------------- assets/js/script.js | 22 +++++------ index.html | 46 ++++++++-------------- 3 files changed, 68 insertions(+), 94 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 3c723ba..c6fd5f9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,18 +1,19 @@ @charset "UTF-8"; :root { - /* #efefef é mais suave que branco absoluto: #fff */ - --default-bg-color: #efefef; - /* #333 é mais suave que preto absoluto: #000 */ - --default-font-color: #333; + --soft-white: #f5f5f5; + --soft-black: #333; --hover-bg-color: #918e8e; + --gold-color: #Cd7f32; + --silver-color: #c0c0c0; + --bronze-color: #db9370; } body { background-image: url('../img/bg.jpg'); background-size: cover; font-family: 'Times New Roman', Times, serif; - color: var(--default-bg-color); + color: var(--soft-white); display: flex; flex-direction: column; /* Centralização horizontal */ @@ -21,7 +22,7 @@ body { align-items: center; } -#title { +#snake-game__title { text-align: center; font-weight: bold; font-size: 2rem; @@ -29,12 +30,12 @@ body { } /* Para "status-container" e "stage-container" ficarem lado a lado */ -#container { +#snake-game { display: flex; } -#status-container { - background-color: var(--default-font-color); +#snake-game__status-container { + background-color: var(--soft-black); font-weight: bold; padding: 20px 10px; margin-right: 7px; @@ -45,29 +46,29 @@ body { justify-content: center; } -#score-container > i { +#snake-game__score-container > i { color: rgb(211, 6, 6); } -#score-container, -#high-scores-container { +#snake-game__score-container, +#snake-game__high-scores-container { margin-bottom: 80px; } -#first-place-container > i { - color: #CD7F32; +#snake-game__first-place-container > i { + color: var(--gold-color); } -#second-place-container > i { - color: #C0C0C0; +#snake-game__second-place-container > i { + color: var(--silver-color); } -#third-place-container > i { - color: #DB9370; +#snake-game__third-place-container > i { + color: var(--bronze-color); } -#score-container, -.high-score { +#snake-game__score-container, +.snake-game__high-score { margin-top: 7px; display: flex; align-items: center; @@ -79,7 +80,7 @@ body { font-size: 30px; } -#toggle-mute-sound { +#snake-game__toggle-mute-sound { /* Deve ser um quadrado, para que seja aplicado o formato de círculo */ width: 44px; height: 44px; @@ -91,53 +92,38 @@ body { background-color: transparent; } -#toggle-mute-sound:hover { +#snake-game__toggle-mute-sound:hover { cursor: pointer; background-color: var(--hover-bg-color); } -#sound-icon { +#snake-game__sound-icon { color: cyan; } -#stage, -#status-container { +#snake-game__stage, +#snake-game__status-container { border-radius: 20px; box-shadow: 2px 7px 15px rgba(0, 0, 0, .63); } -#title { - animation-name: title; +#snake-game__title { + animation-name: rgb; animation-duration: 25s; animation-iteration-count: infinite; animation-delay: .2s; } -@keyframes title { - 0% { color:black; } - 2% { color:beige; } - 6% { color:cadetblue; } - 8% { color:darkgrey; } - 10% { color:firebrick; } - 12% { color:hotpink; } - 14% { color:gold; } - 16% { color:indigo; } - 18% { color:khaki; } - 20% { color:lightpink; } - 25% { color:magenta; } - 30% { color:lawngreen; } - 35% { color:orangered; } - 40% { color:palegreen; } - 45% { color:red; } - 50% { color:sienna; } - 60% { color:teal; } - 65% { color:violet; } - 70% { color:lime; } - 80% { color:yellowgreen; } - 81% { color:maroon; } - 85% { color:mediumslateblue; } - 90% { color:palegreen; } - 91% { color:powderblue; } - 99% { color:rosybrown; } - 100% { color:cyan; } +@keyframes rgb { + 0% { color:red; } + 10% { color:green; } + 20% { color:blue; } + 30% { color:red; } + 40% { color:green; } + 50% { color:blue; } + 60% { color:red; } + 70% { color:green; } + 80% { color:blue; } + 90% { color:red; } + 100% { color:green; } } \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index db4ecb8..9a2679e 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,8 +1,8 @@ /* 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 soundButton = document.getElementById('snake-game__toggle-mute-sound'); +const canvas = document.getElementById('snake-game__stage'); const context = canvas.getContext('2d'); const deadSound = new Audio('assets/audio/dead.mp3'); const eatSound = new Audio('assets/audio/eat.mp3'); @@ -30,7 +30,7 @@ const food = { const compare = (a, b) => b - a; const activateSound = () => { - const soundIcon = document.getElementById('sound-icon'); + const soundIcon = document.getElementById('snake-game__sound-icon'); deadSound.muted = false; eatSound.muted = false; @@ -44,7 +44,7 @@ const activateSound = () => { } const muteSound = () => { - const soundIcon = document.getElementById('sound-icon'); + const soundIcon = document.getElementById('snake-game__sound-icon'); deadSound.muted = true; eatSound.muted = true; @@ -170,7 +170,7 @@ const drawFood = () => { } const updateScore = () => { - const scoreElement = document.getElementById('score'); + const scoreElement = document.getElementById('snake-game__score'); scoreElement.textContent = score; } @@ -219,9 +219,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('snake-game__first-place-score'); + const secondPlaceScore = document.getElementById('snake-game__second-place-score'); + const thirdPlaceScore = document.getElementById('snake-game__third-place-score'); firstPlaceScore.textContent = highScores[0]; secondPlaceScore.textContent = highScores[1]; @@ -368,7 +368,7 @@ function startGame() { } soundButton.addEventListener('click', () => { - const soundIcon = document.getElementById('sound-icon'); + const soundIcon = document.getElementById('snake-game__sound-icon'); soundIcon.classList.contains('bi-volume-mute-fill') ? muteSound() : activateSound(); }); @@ -378,7 +378,7 @@ 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.getElementById('sound-icon') + const soundIcon = document.getElementById('snake-game__sound-icon') if (localStorage.getItem('sound-on') !== null) { if (sound) { @@ -407,4 +407,4 @@ window.addEventListener('load', () => { updateScores(); }); -let game = setInterval(startGame, 100); +let game = setInterval(startGame, 100); \ No newline at end of file diff --git a/index.html b/index.html index 19f47d4..d171a91 100644 --- a/index.html +++ b/index.html @@ -1,66 +1,54 @@ - Snake - - - -
-

SNAKE GAME v0.4.1.4

+

SNAKE GAME v1.0.0

-
-
-
+
+
-
- 0 +
+ 0
- -
+
-
- 0 +
+ 0
- -
- 0 +
+ 0
- -
- 0 +
+ 0
- -
- -
- +
+
- - + \ No newline at end of file