Créame un juego de tiros's game

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

No:42258

←

Prev Next

→

Créame un juego de tiros
Developer User18851｜Date and time 24/2/11 8:59:50
Build time 14.274 sec｜Game capacity 4.542KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juego de Disparos</title>
</head>
<body>
  <canvas id="canvas" width="400" height="800"></canvas>

var player = {
      x: canvas.width / 2,
      y: canvas.height - 50,
      width: 50,
      height: 50,
      speed: 8,
      color: '#0095DD',
      isShooting: false,
    };

var bullets = [];

var enemies = [];
    var enemySpeed = 3;
    var enemySpawnInterval = 1000;
    var enemySpawnTimeout;

var score = 0;
    var lives = 3;

// Funciones del juego
    function drawPlayer() {
      ctx.beginPath();
      ctx.rect(player.x, player.y, player.width, player.height);
      ctx.fillStyle = player.color;
      ctx.fill();
      ctx.closePath();
    }

function drawBullets() {
      bullets.forEach(function(bullet) {
        ctx.beginPath();
        ctx.rect(bullet.x, bullet.y, bullet.width, bullet.height);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
      });
    }

function drawEnemies() {
      enemies.forEach(function(enemy) {
        ctx.beginPath();
        ctx.rect(enemy.x, enemy.y, enemy.width, enemy.height);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();
      });
    }

function movePlayer(direction) {
      if (direction === 'left' && player.x > 0) {
        player.x -= player.speed;
      }
      
      if (direction === 'right' && player.x < canvas.width - player.width) {
        player.x += player.speed;
      }
    }

function shoot() {
      var bullet = {
        x: player.x + player.width / 2 - 2.5,
        y: player.y,
        width: 5,
        height: 10,
        speed: 10,
      };

bullets.push(bullet);
    }

function moveBullets() {
      bullets.forEach(function(bullet, index) {
        bullet.y -= bullet.speed;

if (bullet.y < 0) {
          bullets.splice(index, 1);
        }
      });
    }

function moveEnemies() {
      enemies.forEach(function(enemy, index) {
        enemy.y += enemySpeed;

if (enemy.y > canvas.height) {
          enemies.splice(index, 1);
          lives--;

if (lives === 0) {
            gameOver();
          }
        }
      });
    }

function gameOver() {
      clearInterval(enemySpawnTimeout);
      alert('¡Juego Terminado!\n\nPuntaje: ' + score);
      location.reload();
    }

function drawScoreAndLives() {
      ctx.font = '20px Arial';
      ctx.fillStyle = '#000';
      ctx.fillText('Puntaje: ' + score, 10, 30);
      ctx.fillText('Vidas: ' + lives, 10, 60);
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawBullets();
      drawEnemies();
      drawScoreAndLives();

moveBullets();
      moveEnemies();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

function startGame() {
      enemySpawnTimeout = setInterval(function() {
        var enemy = {
          x: Math.random() * (canvas.width - 50),
          y: -50,
          width: 50,
          height: 50,
        };

enemies.push(enemy);
      }, enemySpawnInterval);

gameLoop();
    }

// Event listeners de teclado
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        movePlayer('left');
      }

if (event.key === 'ArrowRight') {
        movePlayer('right');
      }

if (event.key === ' ') {
        if (!player.isShooting) {
          player.isShooting = true;
          shoot();
        }
      }
    });

document.addEventListener('keyup', function(event) {
      if (event.key === ' ') {
        player.isShooting = false;
      }
    });

// Iniciar el juego
    startGame();
  </script>
</body>
</html>