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

Como fazer um jogo de cobra usando HTML, CSS e JavaScript. Recrie este jogo antigo em seu navegador e aprenda sobre o desenvolvimento de jogos JavaScript ao longo do caminho.

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 nos quais você pode praticar, se precisar revisar quaisquer conceitos básicos.

Você pode consultar o repositório GitHub deste projeto 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 Visual Code ou Atom. Adicione a estrutura básica do código HTML: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Snake Game</title>
      </head>
      <body>
      </body>
    </html>
  3. Dentro da tag do corpo, adicione uma tela para representar o tabuleiro do jogo para a cobra. <h2>Snake Game</h2>
    <div id="game">
      <canvas id="snake"></canvas>
    </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 outras dicas e truques essenciais de CSS. #game {
      width:400px;
      height:400px;
      margin:0 auto;
      background-color:#eee;
    }
    h2 {
      text-align:center;
      font-family:Arial;
      font-size:36px;
    }
  6. Dentro do seu arquivo HTML, adicione um link para o CSS na tag head: <link rel="stylesheet" type="text/css" href="styles.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: <body>
      
      <script src="script.js"></script>
    </body>
  2. Crie script.js e comece obtendo o elemento DOM da tela: var canvas = document.getElementById("snake");
  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 = false;
    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 snakeSegments = [];
    var snakeLength = 1;
  6. Declare a posição inicial X e Y da cobra: var snakeX = 0;
    var snakeY = 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: function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
    }
  8. Crie uma nova função. No interior, defina o estilo de preenchimento para preto. Esta é a cor que usará para desenhar a cobra: function drawSnake() {
      canvas2d.fillStyle = "black";
    }
  9. Para cada segmento que compõe o tamanho da cobra, desenhe um quadrado com largura e altura de 10 pixels:   for (var i = 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: function gameLoop() {
      moveSnake();
     drawSnake();
  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 directionX = 10;
    var directionY = 0;
  2. Adicione um manipulador de eventos que é acionado quando o jogador pressiona uma tecla: document.onkeydown = function(event) { };
  3. Dentro do manipulador de eventos, altere a direção em que a cobra está se movendo, com base na tecla pressionada: switch (event.keyCode) {
      case 37:
        directionX = -10;
        directionY = 0;
        break;
      case 38:
        directionX = 0;
        directionY = -10;
        break;
      case 39:
        directionX = 10;
        directionY = 0;
        break;
      case 40:
        directionX = 0;
        directionY = 10;
        break;
    }
  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: function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
      snakeX += directionX;
      snakeY += directionY;
    }
  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(): while (snakeSegments.length > snakeLength) {
      snakeSegments.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

De fato 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 dots = [];
  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: function spawnDots() {
      if(dots.length < 10) {
        var dotX = Math.floor(Math.random() * canvas.width);
        var dotY = Math.floor(Math.random() * canvas.height);
        dots.push({ x: dotX, y: dotY });
      }
    }
  3. Depois de gerar as coordenadas X e Y para a comida, desenhe-as na tela usando a cor vermelha: for (var i = 0; i < dots.length; i++) {
      canvas2d.fillStyle = "red";
      canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
    }
  4. Chame a nova função spawnDots() dentro do loop do jogo: function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      if(!gameEnded) {
        setTimeout(gameLoop, 100);
      }
    }
  5. Abra o arquivo “index.html” para visualizar a comida no tabuleiro do jogo.

Como fazer a cobra crescer

Contudo 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: function checkCollision() {
      for (var i = 0; i < dots.length; i++) {
            
      }
    }
  2. Se a posição da cobra corresponder às coordenadas de qualquer ponto, incremente o comprimento da cobra e exclua o ponto: if (snakeX < dots[i].x + 10 &&
      snakeX + 10 > dots[i].x &&
      snakeY < dots[i].y + 10 &&
      snakeY + 10 > dots[i].y) {
        snakeLength++;
        dots.splice(i, 1);
    }
  3. Chame a nova função checkCollision() no loop do jogo: function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      checkCollision();
      if(!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

De fato 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”. function gameOver() {
      setTimeout(function() {
        alert("Game over!");
      }, 500);
      gameEnded = true
    }
  2. Dentro da função checkCollision(), verifique se a cobra atingiu alguma das paredes da tela. Em caso afirmativo, chame a função gameOver(): if (snakeX < -10 ||
      snakeY < -10 ||
      snakeX > canvas.width+10 ||
      snakeY > canvas.height+10) {
        gameOver();
    }
  3. Para verificar se a cabeça da cobra colidiu com algum dos segmentos da cauda, ​​passe por cada pedaço da cobra: for (var i = 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: if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
      gameOver();
    }
  5. Por fim 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

Por fim 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.

Similar Posts