Juego de recolectar frutas, hay algunas bombas's game

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

No:23719

←

Prev Next

→

Juego de recolectar frutas, hay algunas bombas
Developer User11128｜Date and time 23/11/3 8:44:39
Build time 110.16 sec｜Game capacity 4.714KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<script>
  // Configuración del juego
  var canvas;
  var context;
  var score;
  var time;
  var fruits;
  var bombs;
  var player;
  var gameEnded;

// Pictogramas de las frutas y las bombas
  var fruitImg = new Image();
  fruitImg.src = "fruta.png";
  var bombImg = new Image();
  bombImg.src = "bomba.png";

// Función de inicio del juego
  function startGame() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    score = 0;
    time = 30;
    fruits = [];
    bombs = [];
    player = new Player("jugador.png", canvas.width/2, canvas.height/2);
    gameEnded = false;

setInterval(updateGame, 1000/60); // Actualizar el juego 60 veces por segundo

// Generar frutas y bombas cada 1 segundo
    setInterval(generateItems, 1000);
  }

// Actualizar y dibujar el juego en cada frame
  function updateGame() {
    clearCanvas();
    updatePlayer();
    updateItems();
    drawScore();
    drawTime();
    checkGameEnd();
  }

// Limpiar el canvas en cada frame
  function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

// Actualizar la posición del jugador según los eventos de toque en el smartphone
  function updatePlayer() {
    canvas.addEventListener("touchstart", function(event) {
      player.move(event.touches[0].clientX, event.touches[0].clientY);
    });
  }

// Actualizar la posición de las frutas y las bombas y verificar si el jugador las recolecta o golpea
  function updateItems() {
    for (var i = 0; i < fruits.length; i++) {
      fruits[i].move();
      fruits[i].draw();
      if (player.collect(fruits[i])) {
        fruits.splice(i, 1);
        score++;
      }
    }
    for (var i = 0; i < bombs.length; i++) {
      bombs[i].move();
      bombs[i].draw();
      if (player.hit(bombs[i])) {
        bombs.splice(i, 1);
        score--;
      }
    }
  }

// Generar frutas y bombas en posiciones aleatorias del canvas
  function generateItems() {
    if (!gameEnded) {
      var randomX = Math.floor(Math.random() * (canvas.width - 50));
      var randomY = Math.floor(Math.random() * (canvas.height - 50));
      fruits.push(new Item(fruitImg, randomX, randomY));
    }
  
    if (!gameEnded && bombs.length < 3) {
      var randomX = Math.floor(Math.random() * (canvas.width - 50));
      var randomY = Math.floor(Math.random() * (canvas.height - 50));
      bombs.push(new Item(bombImg, randomX, randomY));
    }
  }

// Dibujar el puntaje en la parte superior izquierda del canvas
  function drawScore() {
    context.font = "20px Arial";
    context.fillStyle = "black";
    context.fillText("Puntaje: " + score, 20, 40);
  }

// Dibujar el tiempo restante en la parte superior derecha del canvas
  function drawTime() {
    context.font = "20px Arial";
    context.fillStyle = "black";
    context.fillText("Tiempo: " + time, canvas.width - 120, 40);
  }

// Verificar si el juego ha terminado (tiempo agotado)
  function checkGameEnd() {
    if (time <= 0) {
      clearInterval(updateGame);
      gameEnded = true;
      setTimeout(function() {
        alert("¡Juego terminado!\nPuntaje final: " + score);
      }, 100);
    }
  }

// Definición de la clase Jugador
  class Player {
    constructor(imageSrc, x, y) {
      this.image = new Image();
      this.image.src = imageSrc;
      this.x = x;
      this.y = y;
    }

draw() {
      context.drawImage(this.image, this.x, this.y, 50, 50);
    }

move(touchX, touchY) {
      this.x = touchX - 25;
      this.y = touchY - 25;
    }

collect(item) {
      if (this.x < item.x + 50 &&
          this.x + 50 > item.x &&
          this.y < item.y + 50 &&
          this.y + 50 > item.y) {
        return true;
      }
      return false;
    }

hit(item) {
      if (this.x < item.x + 50 &&
          this.x + 50 > item.x &&
          this.y < item.y + 50 &&
          this.y + 50 > item.y) {
        return true;
      }
      return false;
    }
  }

// Definición de la clase Item (frutas y bombas)
  class Item {
    constructor(image, x, y) {
      this.image = image;
      this.x = x;
      this.y = y;
      this.speedX = Math.random() * 3 + 1;
      this.speedY = Math.random() * 3 + 1;
    }

draw() {
      context.drawImage(this.image, this.x, this.y, 50, 50);
    }

move() {
      if (this.x <= 0 || this.x + 50 >= canvas.width) {
        this.speedX *= -1;
      }
      if (this.y <= 0 || this.y + 50 >= canvas.height) {
        this.speedY *= -1;
      }
      this.x += this.speedX;
      this.y += this.speedY;
    }
  }
</script>
</head>
<body onload="startGame()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>