Snake para celular, muy atractivo y con animación de deslisamiemto, los botones que tengan iconos de una libreria publica gratuita. Para celular, que cuando mueras se repita el juego, la serpiente tenga una animación de deslisamiento suave's game

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

No:13628

←

Prev Next

→

Snake para celular, muy atractivo y con animación ..ALL
Developer User5971｜Date and time 23/8/29 4:42:59
Build time 21.925 sec｜Game capacity 4.519KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Snake para Celular</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="320"></canvas>
    <script>
      // Variables del juego
      let canvas;
      let context;
      let snake;
      let fruit;
      let score;
      let dir;

// Cargar el juego al iniciar la página
      window.onload = function () {
        canvas = document.getElementById("gameCanvas");
        context = canvas.getContext("2d");

snake = new Snake();
        fruit = new Fruit();
        dir = "right";
        score = 0;

// Escuchar las teclas para cambiar la dirección de la serpiente
        document.addEventListener("keydown", changeDirection);

// Iniciar el bucle del juego
        setInterval(gameLoop, 1000 / 15);
      };

// Clase Serpiente
      function Snake() {
        this.x = 160;
        this.y = 160;
        this.dx = 20;
        this.dy = 0;
        this.cells = [];
        this.maxCells = 2;

// Actualizar la posición de la serpiente
        this.update = function () {
          this.x += this.dx;
          this.y += this.dy;

// Envolver la serpiente al llegar a los bordes del canvas
          if (this.x >= canvas.width) {
            this.x = 0;
          } else if (this.x < 0) {
            this.x = canvas.width - 20;
          }

if (this.y >= canvas.height) {
            this.y = 0;
          } else if (this.y < 0) {
            this.y = canvas.height - 20;
          }

// Insertar nueva posición de la cabeza de la serpiente
          this.cells.unshift({ x: this.x, y: this.y });

// Eliminar la cola de la serpiente si ha crecido más de lo permitido
          if (this.cells.length > this.maxCells) {
            this.cells.pop();
          }
        };

// Dibujar la serpiente
        this.draw = function () {
          context.fillStyle = "green";
          this.cells.forEach(function (cell) {
            context.fillRect(cell.x, cell.y, 20, 20);
          });
        };

// Verificar si la serpiente se choca consigo misma
        this.checkCollision = function () {
          for (let i = 1; i < this.cells.length; i++) {
            if (this.cells[i].x === this.x && this.cells[i].y === this.y) {
              return true;
            }
          }
          return false;
        };
      }

// Clase Fruta
      function Fruit() {
        this.x;
        this.y;

// Generar una nueva posición para la fruta
        this.generatePosition = function () {
          this.x = Math.floor(Math.random() * (canvas.width / 20)) * 20;
          this.y = Math.floor(Math.random() * (canvas.height / 20)) * 20;
        };

// Dibujar la fruta
        this.draw = function () {
          context.fillStyle = "red";
          context.fillRect(this.x, this.y, 20, 20);
        };
      }

// Función para cambiar la dirección de la serpiente según la tecla presionada
      function changeDirection(event) {
        if (event.keyCode === 37 && dir !== "right") {
          // Izquierda
          snake.dx = -20;
          snake.dy = 0;
          dir = "left";
        } else if (event.keyCode === 38 && dir !== "down") {
          // Arriba
          snake.dx = 0;
          snake.dy = -20;
          dir = "up";
        } else if (event.keyCode === 39 && dir !== "left") {
          // Derecha
          snake.dx = 20;
          snake.dy = 0;
          dir = "right";
        } else if (event.keyCode === 40 && dir !== "up") {
          // Abajo
          snake.dx = 0;
          snake.dy = 20;
          dir = "down";
        }
      }

// Función principal del juego
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);

snake.update();
        fruit.draw();
        snake.draw();

// Verificar si la serpiente se come la fruta
        if (snake.x === fruit.x && snake.y === fruit.y) {
          score++;
          snake.maxCells++;
          fruit.generatePosition();
        }

// Verificar si la serpiente choca consigo misma
        if (snake.checkCollision()) {
          // Reiniciar el juego
          snake = new Snake();
          fruit = new Fruit();
          dir = "right";
          score = 0;
        }

// Mostrar la puntuación
        context.fillStyle = "black";
        context.font = "20px Arial";
        context.fillText("Puntuación: " + score, 10, 25);
      }
    </script>
  </body>
</html>