Skip to content
Open
33 changes: 25 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,25 @@
<html>
<head>
<title>SNAKE!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section id="score">
<p id="title">PONTUAÇÃO
<div class="scoreDisplay"></div>
</p>
</section>
<canvas id="stage" width="600" height="600"></canvas>

<script type="text/javascript">
// TODO: Melhorar layout do jogo
// TODO: Incorporar score | botão de pausar

let scoreDisplay = document.querySelector(".scoreDisplay");
let score = 0;
let fimDeJogo = "FIM DE JOGO!!!!"
let posicaoInicial = Math.floor(Math.random() * (19 - 0 + 1)) + 0;

window.onload = function(){
var stage = document.getElementById('stage');
// contexto
Expand All @@ -18,7 +29,7 @@
document.addEventListener("keydown", keyPush);
setInterval(game, 60);
// velocidade
const vel = 1;
const vel = 1; // TODO: mudar a velocidade
// trajeto da cobrinha;
var trail = [];
// tamanho da cobra
Expand All @@ -29,14 +40,16 @@
var vx = vy = 0;
// posição da cabeça
var px = 10, py = 15;
// posicao da maçã - inicialmente 15,15
var ax = ay = 15;
// posicao da maçã - alterada para iniciar de forma aleatória
var ax = ay = posicaoInicial;

// chama a função game - onde vai estar toda a lógica do jogo que será atualizada no intervalo de tempo abaio
function game(){
px += vx;
py += vy;

scoreDisplay.innerHTML = score;

// se a cobra chega na borda esquerda -> ela é redirecionada pra borda direita
// os 4 ifs abaixo se referem a essa troca de posição da cobrinha
// esquerda -> direita
Expand All @@ -57,16 +70,16 @@
}

// pintando o stage
ctx.fillStyle = "gray";
ctx.fillStyle = "rgb(209, 218, 226)";
ctx.fillRect(0, 0, stage.width, stage.height);

// pintando a maçã
ctx.fillStyle = "red";
// pintando a fruta
ctx.fillStyle = "rgb(190, 47, 226)";
ctx.fillRect(ax*lp, ay*lp, lp, lp);

// pintando a cobra

ctx.fillStyle = "green";
ctx.fillStyle = "rgb(76, 241, 126)";
// verificações
for(var i = 0; i < trail.length; i++){
// pintando o rastro na posicao i
Expand All @@ -76,6 +89,8 @@
if (trail[i].x == px && trail[i].y == py){
vx = vy = 0;
tail = 5;
score = 0
scoreDisplay.textContent = fimDeJogo;
// TODO: fazer tratamento para aparecer imagem de GAMEOVER
}
}
Expand All @@ -91,6 +106,8 @@
tail++;
ax = Math.floor(Math.random()*qp);
ay = Math.floor(Math.random()*qp);
score++;
scoreDisplay.textContent = score;
}
}

Expand Down Expand Up @@ -120,4 +137,4 @@
}
</script>
</body>
</html>
</html>
22 changes: 22 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
body{
display:grid;
justify-content: center;
}
#score{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size:medium;
font-weight: 700;
text-align: center;
width: 33vw;
margin: none;
border-radius: 3px;
padding-bottom: 15px;
padding-top: 15px;

}
#title{
font-size: 22px;
}
.scoreDisplay{
font-size: 18px;
}