Como fazer um jogo de cobra usando HTML, CSS e JavaScript

Um jogo de cobra é um exercício clássico de programação que você pode usar para melhorar suas habilidades de programação e resolução de problemas. Você pode criar o jogo em um navegador da Web usando HTML, CSS e JavaScript.

No jogo, você controla uma cobra que se move em um tabuleiro. A cobra cresce de tamanho conforme você coleta comida. O jogo terminará se você colidir com sua própria cauda ou qualquer uma das paredes.

Como criar a interface do usuário para a tela

Use HTML e CSS para adicionar a tela para a cobra se mover. Existem muitos outros Projetos HTML e CSS você pode praticar, se precisar revisar quaisquer conceitos básicos.

Você pode consultar este projeto Repositório GitHub para obter o código-fonte completo.

1. Crie um novo arquivo chamado "index.html".
2. Abra o arquivo usando qualquer editor de texto, como Código Visual ou Atom. Adicione a estrutura básica do código HTML:

   html>
   <htmlidioma="pt-BR">
   <cabeça>
   <título>jogo da cobratítulo>
   cabeça>
   <corpo>
   corpo>
   html>

3. Dentro da tag do corpo, adicione uma tela para representar o tabuleiro do jogo para a cobra.

   <h2>jogo da cobrah2>
   <diveu ia="jogo">
   <telaeu ia="cobra">tela>
   div>

4. Na mesma pasta do seu arquivo HTML, crie um novo arquivo chamado "styles.css".
5. Dentro, adicione algum CSS para a página da web geral. Você também pode estilizar seu site usando outros dicas e truques essenciais de CSS.

   #jogo {
   largura:400px;
   altura:400px;
   margem:0auto;
   cor de fundo:#eee;
   }
   h2 {
   alinhamento de texto:Centro;
   família de fontes:Arial;
   tamanho da fonte:36px;
   } 
   

6. Dentro do seu arquivo HTML, adicione um link para o CSS na tag head:

   <linkrele="folha de estilo"tipo="texto/css"href="estilos.css">

7. Para visualizar a tela, abra seu arquivo "index.html" em um navegador da web.

Como Desenhar a Serpente

No exemplo abaixo, a linha preta representa a cobra:

Múltiplos quadrados ou "segmentos" compõem a cobra. À medida que a cobra cresce, o número de quadrados também aumenta. No início do jogo, o comprimento da cobra é de uma peça.

1. Dentro do seu arquivo HTML, crie um link para um novo arquivo JavaScript na parte inferior da tag body:

   <corpo>
    Seu código aqui 
   <roteiroorigem="script.js">roteiro>
   corpo>

2. Crie script.js e comece obtendo o elemento DOM da tela:

   var tela = documento.getElementById("cobra");

3. Defina o contexto para o elemento HTML da tela. Nesse caso, você deseja que o jogo renderize uma tela 2D. Isso permitirá que você desenhe várias formas ou imagens no elemento HTML.

   var canvas2d = canvas.getContext("2d");

4. Defina outras variáveis ​​do jogo, como se o jogo terminou e a altura e largura da tela:

   var gameEnded = falso;
   canvas.width = 400;
   canvas.height = 400;

5. Declare uma variável chamada "snakeSegments". Isso manterá o número de "quadrados" que a cobra ocupará. Você também pode criar uma variável para acompanhar o comprimento da cobra:

   var cobraSegmentos = [];
   var comprimento da cobra = 1;
   

6. Declare a posição inicial X e Y da cobra:

   var cobraX = 0;
   var cobraY = 0;

7. Crie uma nova função. Dentro, adicione a peça inicial da cobra ao array snakeSegments, com suas coordenadas X e Y iniciais:

   funçãomoveSnake() {
    snakeSegments.unshift({ x: cobraX, y: cobraY });
   }

8. Crie uma nova função. No interior, defina o estilo de preenchimento para preto. Esta é a cor que usará para desenhar a cobra:

   funçãodesenharcobra() {
    canvas2d.fillStyle = "preto"; 
   }

9. Para cada segmento que compõe o tamanho da cobra, desenhe um quadrado com largura e altura de 10 pixels:

   para (var eu = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Crie um loop de jogo que será executado a cada 100 milissegundos. Isso fará com que o jogo desenhe constantemente a cobra em sua nova posição, o que será muito importante quando a cobra começar a se mover:

    funçãogameLoop() {
     moveSnake();
     desenharSerpente();

11. Abra o arquivo "index.html" em um navegador da web para ver a cobra em seu menor tamanho em sua posição inicial.

Como fazer a cobra se mover

Adicione alguma lógica para mover a cobra em diferentes direções, dependendo de qual botão o jogador pressiona no teclado.

1. No topo do arquivo, declare a direção inicial da cobra:

   var direção X = 10;
   var direção Y = 0;
   

2. Adicione um manipulador de eventos que é acionado quando o jogador pressiona uma tecla:

   documento.onkeydown = função(evento) {
   };

3. Dentro do manipulador de eventos, altere a direção em que a cobra está se movendo, com base na tecla pressionada:

   trocar (event.keyCode) {
   caso37: // Seta esquerda
    direção X = -10;
    direção Y = 0;
   quebrar;
   caso38: // Seta para cima
    direção X = 0;
    direção Y = -10;
   quebrar;
   caso39: // Seta direita
    direção X = 10;
    direção Y = 0;
   quebrar;
   caso40: // Seta para baixo
    direção X = 0;
    direção Y = 10;
   quebrar;
   }

4. Na função moveSnake(), use a direção para atualizar as coordenadas X e Y da cobra. Por exemplo, se a cobra precisar se mover para a esquerda, a direção X será "-10". Isso atualizará a coordenada X para remover 10 pixels para cada quadro do jogo:

   funçãomoveSnake() {
    snakeSegments.unshift({ x: cobraX, y: cobraY });
    cobraX += direçãoX;
    cobraY += direçãoY;
   }

5. O jogo atualmente não remove os segmentos anteriores enquanto a cobra está se movendo. Isso fará com que a cobra fique assim:
6. Para corrigir isso, limpe a tela antes de desenhar a nova cobra em cada quadro, no início da função drawSnake():

   canvas2d.clearRect(0, 0, canvas.width, canvas.height);

7. Você também precisará remover o último elemento do array snakeSegments, dentro da função moveSnake():

   enquanto (snakeSegments.length > snakeLength) {
    cobraSegmentos.pop();
   }

8. Abra o arquivo "index.html" e pressione as teclas esquerda, direita, para cima ou para baixo para mover a cobra.

Como adicionar comida na tela

Adicione pontos ao jogo de tabuleiro para representar pedaços de comida para a cobra.

1. Declare uma nova variável na parte superior do arquivo para armazenar uma matriz de pedaços de comida:

   var pontos = [];

2. Crie uma nova função. Dentro, gere coordenadas X e Y aleatórias para os pontos. Você também pode garantir que apenas 10 pontos estejam no quadro a qualquer momento:

   funçãospawnDots() {
   se(pontos.comprimento < 10) {
   var pontoX = Matemática.chão(Matemática.random() * canvas.width);
   var pontoY = Matemática.chão(Matemática.random() * canvas.height);
    pontos.push({ x: pontoX, y: dotY });
    }
   }

3. Depois de gerar as coordenadas X e Y para a comida, desenhe-as na tela usando a cor vermelha:

   para (var eu = 0; i < pontos.comprimento; i++) {
    canvas2d.fillStyle = "vermelho";
    canvas2d.fillRect (pontos[i].x, pontos[i].y, 10, 10);
   }

4. Chame a nova função spawnDots() dentro do loop do jogo:

   funçãogameLoop() {
    moveSnake();
    desenharSerpente();
    spawnDots();
   se(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Abra o arquivo "index.html" para visualizar a comida no tabuleiro do jogo.

Como fazer a cobra crescer

Você pode fazer a cobra crescer aumentando seu comprimento quando ela colide com um ponto de comida.

1. Crie uma nova função. Dentro dele, percorra cada elemento na matriz de pontos:

   funçãocheckCollision() {
   para (var eu = 0; i < pontos.comprimento; i++) {
   
    }
   }

2. Se a posição da cobra corresponder às coordenadas de qualquer ponto, incremente o comprimento da cobra e exclua o ponto:

   se (cobraX < pontos[i].x + 10 && 
    cobraX + 10 > pontos[i].x && 
    cobraY < pontos[i].y + 10 && 
    cobraY + 10 > pontos[i].y) {
    comprimento da cobra++;
    dots.splice (i, 1);
   }

3. Chame a nova função checkCollision() no loop do jogo:

   funçãogameLoop() {
    moveSnake();
    desenharSerpente();
    spawnDots();
    checkCollision();
   se(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Abra o arquivo "index.html" em um navegador da web. Mova a cobra usando o teclado para coletar os pedaços de comida e fazer a cobra crescer.

Como terminar o jogo

Para encerrar o jogo, verifique se a cobra colidiu com o próprio rabo ou com alguma das paredes.

1. Crie uma nova função para imprimir um alerta "Game Over".

   funçãogame Over() {
    setTimeout(função() {
    alerta("Game Over!");
    }, 500); 
    gameEnded = verdadeiro
   }

2. Dentro da função checkCollision(), verifique se a cobra atingiu alguma das paredes da tela. Em caso afirmativo, chame a função gameOver():

   se (cobraX < -10 || 
    cobraY < -10 || 
    cobraX > canvas.width+10 ||
    cobraY > tela.altura+10) {
    game Over();
   }

3. Para verificar se a cabeça da cobra colidiu com algum dos segmentos da cauda, ​​passe por cada pedaço da cobra:

   para (var eu = 1; i < snakeSegments.length; i++) {
   }

4. Dentro do loop for, verifique se a localização da cabeça da cobra corresponde a algum dos segmentos da cauda. Se sim, isso significa que a cabeça colidiu com a cauda, ​​então encerre o jogo:

   se (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    game Over();
   }

5. Abra o arquivo "index.html" em um navegador da web. Tente acertar uma parede ou sua própria cauda para terminar o jogo.

Aprendendo conceitos de JavaScript por meio de jogos

Criar jogos pode ser uma ótima maneira de tornar sua experiência de aprendizado mais agradável. Continue fazendo mais jogos para continuar melhorando seu conhecimento de JavaScript.