Me dê o snake game com controles e a Maçã's game

Click here for free DL of the app version that can save data.

No:42302

←

Prev Next

→

Me dê o snake game com controles e a Maçã
Developer User18853｜Date and time 24/2/11 10:37:19
Build time 19.056 sec｜Game capacity 5.976KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-board {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        overflow: hidden;
      }
      .square {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid lightgray;
      }
      #snake-head {
        background-color: green;
      }
      .snake-body {
        background-color: darkgreen;
      }
      #apple {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>
    
    <script>
      // Tamanho do tabuleiro
      const boardSize = 300;
      
      // Tamanho de cada quadrado do tabuleiro
      const squareSize = 20;
      
      // Obtém o elemento do tabuleiro do jogo
      const gameBoard = document.getElementById("game-board");
      
      // Variáveis para manter o estado do jogo
      let snake = [{ x: 4, y: 0 }, { x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }, { x: 0, y: 0 }];
      let direction = "right";
      let apple = { x: 10, y: 10 };
      
      // Função para desenhar o tabuleiro do jogo
      function drawBoard() {
        gameBoard.innerHTML = "";
        
        // Desenha a maçã
        const appleElement = createBoardElement(apple.x, apple.y, "apple");
        gameBoard.appendChild(appleElement);
        
        // Desenha a cobra
        snake.forEach((segment, index) => {
          const isHead = (index === 0);
          const element = createBoardElement(segment.x, segment.y, isHead ? "snake-head" : "snake-body");
          gameBoard.appendChild(element);
        });
      }
      
      // Função para criar um elemento no tabuleiro
      function createBoardElement(x, y, className) {
        const element = document.createElement("div");
        element.className = `square ${className}`;
        element.style.left = `${x * squareSize}px`;
        element.style.top = `${y * squareSize}px`;
        return element;
      }
      
      // Função para mover a cobra
      function moveSnake() {
        const head = { x: snake[0].x, y: snake[0].y };
        
        // Movimenta a cabeça da cobra na direção correta
        if (direction === "right") head.x++;
        else if (direction === "left") head.x--;
        else if (direction === "up") head.y--;
        else if (direction === "down") head.y++;
        
        // Insere a nova cabeça na posição correta
        snake.unshift(head);
        
        // Verifica se a cobra comeu a maçã
        if (head.x === apple.x && head.y === apple.y) {
          // Gera uma nova posição aleatória para a maçã
          generateApplePosition();
        } else {
          // Remove a última posição da cauda da cobra
          snake.pop();
        }
      }
      
      // Função para gerar uma nova posição para a maçã
      function generateApplePosition() {
        const maxX = boardSize / squareSize;
        const maxY = boardSize / squareSize;
        
        apple.x = Math.floor(Math.random() * maxX);
        apple.y = Math.floor(Math.random() * maxY);
        
        // Verifica se a nova posição gerada coincide com alguma parte da cobra
        if (snake.some(segment => segment.x === apple.x && segment.y === apple.y)) {
          generateApplePosition(); // Gera uma nova posição se coincidir
        }
      }
      
      // Função para verificar se a cobra colidiu com alguma borda ou com seu próprio corpo
      function checkCollision() {
        const head = snake[0];
        
        // Verifica se a cobra colidiu com alguma borda
        if (head.x < 0 || head.x >= (boardSize / squareSize) || head.y < 0 || head.y >= (boardSize / squareSize)) {
          return true;
        }
        
        // Verifica se a cobra colidiu com seu próprio corpo
        for (let i = 1; i < snake.length; i++) {
          if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
          }
        }
        
        return false;
      }
      
      // Função para atualizar a direção da cobra com base no toque na tela
      function handleTouch(event) {
        const { clientX, clientY } = event.touches[0];
        
        // Calcula a diferença de coordenadas em relação ao toque anterior
        const touchDiffX = clientX - lastTouchX;
        const touchDiffY = clientY - lastTouchY;
        
        // Atualiza a última posição do toque
        lastTouchX = clientX;
        lastTouchY = clientY;
        
        // Verifica se houve um deslize vertical ou horizontal maior do que um limiar
        if (Math.abs(touchDiffX) > Math.abs(touchDiffY)) {
          if (touchDiffX > 0 && direction !== "left") direction = "right";
          else if (touchDiffX < 0 && direction !== "right") direction = "left";
        } else {
          if (touchDiffY > 0 && direction !== "up") direction = "down";
          else if (touchDiffY < 0 && direction !== "down") direction = "up";
        }
      }
      
      // Função para inicializar o jogo
      function startGame() {
        drawBoard();
        
        // Adiciona um ouvinte de evento de toque para capturar a direção do movimento
        document.addEventListener("touchstart", function (event) {
          // Obtém a posição inicial do toque
          lastTouchX = event.touches[0].clientX;
          lastTouchY = event.touches[0].clientY;
        }, false);
        
        // Adiciona um ouvinte de evento de toque para capturar o movimento da tela
        document.addEventListener("touchmove", handleTouch, false);
        
        // Define o intervalo de atualização do jogo
        setInterval(() => {
          moveSnake();
          if (checkCollision()) {
            // Fim do jogo
            alert("Game Over!");
          } else {
            drawBoard();
          }
        }, 200);
      }
      
      // Inicia o jogo
      startGame();
    </script>
  </body>
</html>