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

No:26685

←

Prev Next

→

Shooting Game
Developer User13222｜Date and time 23/12/2 3:54:21
Build time 121.763 sec｜Game capacity 4.684KB｜

Script

Aquí tienes un ejemplo de un simple juego de disparos implementado en un solo archivo HTML usando JavaScript. El juego está diseñado para ser jugado en un smartphone y utiliza pictogramas como elementos visuales. No olvides que esto solo es un ejemplo básico y se puede mejorar y modificar según tus necesidades.

Juego de Disparos

Para jugar, simplemente abre el archivo HTML en tu smartphone y mueve el jugador (el rectángulo azul) tocando la pantalla. También puedes disparar balas tocando la pantalla en cualquier lugar. El objetivo es destruir a los enemigos (rectángulos verdes) para ganar puntos. Diviértete jugando con el código y mejorándolo según tus preferencias.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Juego de Disparos</title>
  <style>
    body {
      text-align: center;
      margin-top: 100px;
      background-color: #f0f0f0;
    }
    
    #game-container {
      display: inline-block;
      position: relative;
    }
    
    #player {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .bullet {
      width: 5px;
      height: 10px;
      background-color: red;
      position: absolute;
    }
    
    .enemy {
      width: 30px;
      height: 30px;
      background-color: green;
      position: absolute;
      top: 0;
    }
  </style>
</head>
<body>
  <h1>Juego de Disparos</h1>
  <div id="game-container">
    <div id="player"></div>
  </div>
  
  <script>
    // Variables del juego
    var player;
    var bullets = [];
    var enemies = [];
    var score = 0;
    var gameLoop;
    
    // Inicializar el juego
    function startGame() {
      player = document.getElementById('player');
      gameLoop = setInterval(updateGame, 10);
    }
    
    // Actualizar el juego
    function updateGame() {
      movePlayer();
      moveBullets();
      createEnemies();
      moveEnemies();
      checkCollision();
    }
    
    // Mover al jugador
    function movePlayer() {
      player.style.left = (event.touches[0].clientX - 25) + 'px';
    }
    
    // Crear y mover las balas
    function moveBullets() {
      if (bullets.length > 0) {
        for (var i = 0; i < bullets.length; i++) {
          var bullet = bullets[i];
          bullet.style.top = (parseInt(bullet.style.top) - 5) + 'px';
          if (parseInt(bullet.style.top) < -10) {
            bullet.remove();
            bullets.splice(i, 1);
            i--;
          }
        }
      }
    }
    
    // Crear enemigos
    function createEnemies() {
      if (Math.random() < 0.02) {
        var enemy = document.createElement('div');
        enemy.className = 'enemy';
        enemy.style.left = (Math.random() * document.getElementById('game-container').offsetWidth - 30) + 'px';
        document.getElementById('game-container').appendChild(enemy);
        enemies.push(enemy);
      }
    }
    
    // Mover enemigos
    function moveEnemies() {
      if (enemies.length > 0) {
        for (var i = 0; i < enemies.length; i++) {
          var enemy = enemies[i];
          enemy.style.top = (parseInt(enemy.style.top) + 1) + 'px';
          if (parseInt(enemy.style.top) > window.innerHeight) {
            enemy.remove();
            enemies.splice(i, 1);
            i--;
          }
        }
      }
    }
    
    // Colisión
    function checkCollision() {
      for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        for (var j = 0; j < enemies.length; j++) {
          var enemy = enemies[j];
          if (isColliding(bullet, enemy)) {
            bullet.remove();
            bullet.splice(i, 1);
            i--;
            enemy.remove();
            enemies.splice(j, 1);
            j--;
            score += 10;
          }
        }
      }
    }
    
    // Verificar colisión entre dos elementos
    function isColliding(elem1, elem2) {
      var rect1 = elem1.getBoundingClientRect();
      var rect2 = elem2.getBoundingClientRect();
      
      return !(
        rect1.top > rect2.bottom || 
        rect1.right < rect2.left || 
        rect1.bottom < rect2.top || 
        rect1.left > rect2.right
      );
    }
    
    // Disparar
    window.addEventListener('touchstart', function() {
      var bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = (parseInt(player.style.left) + 22) + 'px';
      bullet.style.top = (window.innerHeight - 60) + 'px';
      
      document.getElementById('game-container').appendChild(bullet);
      bullets.push(bullet);
    });
    
    // Iniciar el juego
    startGame();
  </script>
</body>
</html>
```