Cuadrado con un control que dispara y se mueve arriba abajo isquierda derecha con el controlador's game

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

No:22897

←

Prev Next

→

Cuadrado con un control que dispara y se mueve arr..ALL
Developer User10585｜Date and time 23/10/26 12:49:47
Build time 65.56 sec｜Game capacity 3.259KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Mi Juego de Disparos</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

draw() {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
      }
  
      moveUp() {
        if (this.y > 0) {
          this.y -= 10;
        }
      }
  
      moveDown() {
        if (this.y + this.height < canvas.height) {
          this.y += 10;
        }
      }
  
      moveLeft() {
        if (this.x > 0) {
          this.x -= 10;
        }
      }
  
      moveRight() {
        if (this.x + this.width < canvas.width) {
          this.x += 10;
        }
      }

shoot() {
        var bullet = new Bullet(this.x + (this.width/2), this.y);
        bullets.push(bullet);
      }
    }
  
    // Clase de la bala
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 5;
        this.color = "#FF0000";
        this.speed = 5;
      }

draw() {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        context.fillStyle = this.color;
        context.fill();
        context.closePath();
      }
  
      move() {
        this.y -= this.speed;
      }
    }
  
    // Función principal para iniciar el juego
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      player = new Player(canvas.width/2 - 10, canvas.height - 30);
  
      setInterval(updateGame, 16); // Llama a updateGame cada 16 ms
  
      // Event listeners para mover y disparar
      document.addEventListener("keydown", handleKeyDown);
      document.addEventListener("keyup", handleKeyUp);
      document.addEventListener("click", handleMouseClick);
    }
  
    // Actualiza la posición de los objetos y dibuja en el canvas
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      player.draw();
  
      // Dibuja y mueve las balas
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].draw();
        bullets[i].move();
  
        if (bullets[i].y < 0) {
          // Elimina las balas que salen del canvas
          bullets.splice(i, 1);
        }
      }
    }
  
    // Maneja los eventos de teclado
    function handleKeyDown(event) {
      switch(event.keyCode) {
        case 38: // Flecha arriba
          player.moveUp();
          break;
        case 40: // Flecha abajo
          player.moveDown();
          break;
        case 37: // Flecha izquierda
          player.moveLeft();
          break;
        case 39: // Flecha derecha
          player.moveRight();
          break;
      }
    }

// Maneja el evento de clic del mouse
    function handleMouseClick(event) {
      player.shoot();
    }
  
    // Inicia el juego
    startGame();
  </script>
</body>
</html>