AI game creator

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

No:36648

←

Prev Next

→

Shoot 'Em Up
Developer User16822｜Date and time 24/1/18 6:08:30
Build time 16.222 sec｜Game capacity 3.66KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Shoot 'Em Up</title>
  <style>
    canvas {
      border: 2px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<script>
  // Variables de juego
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 480;
  canvas.height = 320;
  document.body.appendChild(canvas);

// Clase jugador
  function Jugador() {
    this.x = canvas.width/2;
    this.y = canvas.height/2;
    this.width = 24;
    this.height = 24;
    this.velocidad = 3;

// Dibuja el jugador en el canvas
    this.dibujar = function() {
	  ctx.fillStyle = "blue";
	  ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }

// Clase balas
  function Bala(x, y, direccion) {
    this.x = x;
    this.y = y;
    this.width = 8;
    this.height = 8;
    this.velocidad = 5;
    this.direccion = direccion;

// Actualiza la posición de la bala según su dirección
    this.actualizar = function() {
	  if(this.direccion === "up") {
        this.y -= this.velocidad;
      } else if(this.direccion === "down") {
        this.y += this.velocidad;
      } else if(this.direccion === "left") {
        this.x -= this.velocidad;
      } else if(this.direccion === "right") {
        this.x += this.velocidad;
      }
    }

// Dibuja la bala en el canvas
    this.dibujar = function() {
	  ctx.fillStyle = "red";
	  ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }

// Variables del juego
  var jugador = new Jugador();
  var balas = [];

// Detecta las teclas presionadas
  var teclasPresionadas = {};
  window.addEventListener('keydown', function(event) {
    teclasPresionadas[event.keyCode] = true;
  });

window.addEventListener('keyup', function(event) {
    delete teclasPresionadas[event.keyCode];
  });

// Actualiza la posición del jugador
  function actualizarJugador() {
    if (38 in teclasPresionadas) {
      jugador.y -= jugador.velocidad;
    }
    if (40 in teclasPresionadas) {
      jugador.y += jugador.velocidad;
    }
    if (37 in teclasPresionadas) {
      jugador.x -= jugador.velocidad;
    }
    if (39 in teclasPresionadas) {
      jugador.x += jugador.velocidad;
    }

// Mantiene al jugador dentro de los límites del canvas
    if (jugador.x < 0) 
      jugador.x = 0;
    if (jugador.y < 0) 
      jugador.y = 0;
    if (jugador.x + jugador.width > canvas.width)
      jugador.x = canvas.width - jugador.width;
    if (jugador.y + jugador.height > canvas.height)
      jugador.y = canvas.height - jugador.height;
  }

// Actualiza la posición de las balas
  function actualizarBalas() {
    for (var i = 0; i < balas.length; i++) {
      balas[i].actualizar();

// Elimina las balas que salgan del canvas
      if (balas[i].x < 0 || balas[i].y < 0 || balas[i].x > canvas.width || balas[i].y > canvas.height) {
        balas.splice(i, 1);
        i--;
      }
    }
  }

// Dibuja el juego en el canvas
  function dibujar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

jugador.dibujar();

for (var i = 0; i < balas.length; i++) {
      balas[i].dibujar();
    }
  }

// Bucle principal del juego
  function principal() {
    actualizarJugador();
    actualizarBalas();
    dibujar();

requestAnimationFrame(principal);
  }

// Disparar una bala al presionar la barra espaciadora
  window.addEventListener('keydown', function(event) {
    if(event.keyCode === 32) {
	  var bala = new Bala(jugador.x + jugador.width/2, jugador.y + jugador.height/2, "up");
      balas.push(bala);
    }
  });

// Inicio del juego
  principal();
</script>
</body>
</html>