Hoje criaremos um jogo Snake utilizando HTML5 e JavaScript.
Para isso, criaremos um arquivo HTML que servirá de base para nosso jogo. Crie um arquivo chamado index.html e insira o código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo Snake</title>
</head>
<body>
<script src="scripts.js"></script>
</body>
</html>
Dentro do nosso elemento body, adicionaremos um elemento canvas:
<canvas id="canvas" width="400" height="400"></canvas>
E agora, adicionaremos o JavaScript:
Agora que temos o Canvas adicionado, adicionaremos o JavaScript. Crie um arquivo chamado scripts.js, e nele, adicionaremos a lógica do nosso jogo. O nosso arquivo irá renderizar o canvas e os elementos do jogo.
Primeiro, precisamos definir o que acontece quando o window.onload é chamado. Precisamos obter o elemento Canvas e adicionar um evento de pressionar teclas. Esse evento faz o canvas se redesenhar com a nova posição da cobra e onde o alimento aparecerá.
let canvas;
let ctx;
window.onload = function(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
document.addEventListener("keydown", keyDownEvent);
let x = 8;
setInterval(desenharJogo, 1000 / x);
};
Tratamento das teclas:
Precisamos definir o que a nossa função keyDownEvent chamada no addEventListener faz. Para isso, utilizaremos keyCodes, que representam o que cada seta do teclado faz:
function keyDownEvent(event){
// nextX e nextY representam as direções que a cobra irá percorrer
// nos eixos X e Y, respectivamente
switch(event.keyCode){
case 37:
nextX = -1;
nextY = 0;
break;
case 38:
nextX = 0;
nextY = -1;
break;
case 39:
nextX = 1;
nextY = 0;
break;
case 40:
nextX = 0;
nextY = 1;
break;
}
}
O nextX e nextY representam a direção em que a cobra se desloca.
Serpente:
Vamos definir as variáveis que serão utilizadas para criar a serpente.
let defaultTamanhoCauda = 3; let tamanhoCauda = defaultTamanhoCauda; let caminhoCobra = []; let cobraEixoX = cobraEixoY = 10;
Definimos um tamanho inicial da serpente como 3. A cada vez que ela ingerir o alimento, será incrementado em 1 esse valor. O caminho que a serpente percorrerá é uma matriz de posições X e Y, onde cobraEixoX e cobraEixoY serão a posição inicial da cobra.
Tela do jogo:
Criaremos a tela onde o jogo funcionará. É uma grade 20×20, que corresponde à largura e altura da tela.
//Criação da tela de jogo let tamanhoTela = tamanhoCaminho = 20; let nextX = nextY = 0;
Comida:
Criaremos a comida, que ficará em uma posição X e Y:
//Criação da comida let appleX = (appleY = 15);
Atualizando o jogo:
Toda vez que chamamos a função, movemos a cobra em alguma próxima posição, e também verificar se a serpente não está fora dos limites do jogo e redefinir a posição para ela sair do outro lado. Essas verificações estarão dentro de uma função chamada desenharJogo():
function desenharJogo(){
cobraEixoX += nextX;
cobraEixoY += nextY;
if (cobraEixoX < 0){
cobraEixoX = tamanhoTela -1;
}
if (cobraEixoX > tamanhoTela - 1){
cobraEixoX = 0;
}
if (cobraEixoY < 0){
cobraEixoY = tamanhoTela -1;
}
if (cobraEixoY > tamanhoTela - 1){
cobraEixoY = 0;
}
}
Verificaremos se a cobra mordeu o alimento. Se isso acontecer, precisamos aumentar o tamanho da cauda da serpente e calcular uma nova posição:
//Se a cobra comer o alimento
if (cobraEixoX == appleX && cobraEixoY == appleY){
tamanhoCauda++;
appleX = Math.floor(Math.random() * tamanhoTela);
appleY = Math.floor(Math.random() * tamanhoTela);
}
Agora, pintaremos o fundo do jogo de preto. Desenharemos a dobra, devemos também verificar se a cobra morde o próprio rabo, e também precisamos redefinir o tamanho da cauda para o tamanho inicial.
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "green";
for (let i = 0; i < caminhoCobra.length; i++){
ctx.fillRect(
caminhoCobra[i].x * tamanhoCaminho,
caminhoCobra[i].y * tamanhoCaminho,
tamanhoCaminho,
tamanhoCaminho
);
if (caminhoCobra[i].x == cobraEixoX && caminhoCobra[i].y == cobraEixoY){
tamanhoCauda = defaultTamanhoCauda;
}
}
E pintaremos a maçã:
ctx.fillStyle = "red";
ctx.fillRect(appleX * tamanhoCaminho, appleY * tamanhoCaminho, tamanhoCaminho, tamanhoCaminho);
E, no final, verificaremos se o caminho da cobra excede o tamanho da cauda. Caso isso aconteça, mudaremos as últimas posições para fora da trilha.
caminhoCobra.push({
x:cobraEixoX,
y:cobraEixoY
});
while (caminhoCobra.length > tamanhoCauda){
caminhoCobra.shift(); }
E com isso, terminamos o nosso jogo!
O código está disponível para download aqui:
[download id=”3784″]