Skip to content

Commit

Permalink
código refatorado
Browse files Browse the repository at this point in the history
  • Loading branch information
@zolppy
zolppy committed Dec 3, 2023
1 parent de4f792 commit c860784
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 94 deletions.
94 changes: 40 additions & 54 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -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 */
Expand All @@ -21,20 +22,20 @@ body {
align-items: center;
}

#title {
#snake-game__title {
text-align: center;
font-weight: bold;
font-size: 2rem;
margin: 20px auto;
}

/* 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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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; }
}
22 changes: 11 additions & 11 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -170,7 +170,7 @@ const drawFood = () => {
}

const updateScore = () => {
const scoreElement = document.getElementById('score');
const scoreElement = document.getElementById('snake-game__score');

scoreElement.textContent = score;
}
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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();
});
Expand All @@ -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) {
Expand Down Expand Up @@ -407,4 +407,4 @@ window.addEventListener('load', () => {
updateScores();
});

let game = setInterval(startGame, 100);
let game = setInterval(startGame, 100);
46 changes: 17 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,54 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snake</title>
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />

<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />

<!-- Reset de estilos padrão -->
<link rel="stylesheet" href="assets/css/reset.css" />

<!-- Meus arquivos .css e .js -->
<link rel="stylesheet" href="assets/css/style.css" />
<script defer src="assets/js/script.js"></script>
</head>

<body>
<header>
<h1 id="title">SNAKE GAME v0.4.1.4</h1>
<h1 id="snake-game__title">SNAKE GAME v1.0.0</h1>
</header>

<main>
<div id="container">
<div id="status-container">
<div id="snake-game">
<div id="snake-game__status-container">
<!-- Pontuação atual do jogador / total de maçãs comidas -->
<div id="score-container">
<i class="bi bi-apple"></i><span id="score">0</span>
<div id="snake-game__score-container">
<i class="bi bi-apple"></i><span id="snake-game__score">0</span>
</div>

<!-- Pontuações mais altas: primeiro, segundo e terceiro lugar -->
<div id="high-scores-container">
<div id="snake-game__high-scores-container">
<!-- Primeiro lugar -->
<div id="first-place-container" class="high-score">
<i class="bi bi-trophy-fill"></i><span id="first-place-score">0</span>
<div id="snake-game__first-place-container" class="snake-game__high-score">
<i class="bi bi-trophy-fill"></i><span id="snake-game__first-place-score">0</span>
</div>

<!-- Segundo lugar -->
<div id="second-place-container" class="high-score">
<i class="bi bi-trophy-fill"></i><span id="second-place-score">0</span>
<div id="snake-game__second-place-container" class="snake-game__high-score">
<i class="bi bi-trophy-fill"></i><span id="snake-game__second-place-score">0</span>
</div>

<!-- Terceiro lugar -->
<div id="third-place-container" class="high-score">
<i class="bi bi-trophy-fill"></i><span id="third-place-score">0</span>
<div id="snake-game__third-place-container" class="snake-game__high-score">
<i class="bi bi-trophy-fill"></i><span id="snake-game__third-place-score">0</span>
</div>
</div>

<!-- Botão para alternar estado do som: ativado / desativado -->
<button id="toggle-mute-sound" type="button">
<i id="sound-icon" class="bi bi-volume-mute-fill"></i>
<button id="snake-game__toggle-mute-sound" type="button">
<i id="snake-game__sound-icon" class="bi bi-volume-mute-fill"></i>
</button>
</div>

<!-- É aqui onde o jogo é renderizado -->
<div id="stage-container">
<canvas id="stage" width="512" height="512"></canvas>
<div id="snake-game__stage-container">
<canvas id="snake-game__stage" width="512" height="512"></canvas>
</div>
</div>
</main>
</body>

</html>
</html>

0 comments on commit c860784

Please sign in to comment.