Create a rogue like game, enemy is red circle that spawn again after they died and move in a random direction, enemy died if touching with player's projectile. Player is a blue circle that have a button to shoot circle projectile at the enemy. Add a shoot button to shoot and up, down, left, right arrow to move only when being hold.'s game

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

No:34152

←

Prev Next

→

Create a rogue like game, enemy is red circle that..ALL
Developer User16133｜Date and time 24/1/8 18:30:42
Build time 56.182 sec｜Game capacity 5.183KB｜

Script

Sure! Here's an implementation of a simplified version of the rogue-like game you described:

To play the game, simply save the code above as an HTML file (e.g., `rogue-game.html`) and open it in a web browser (preferably Chrome). The game can be played by using the shoot button to shoot projectiles at the red enemies. The player can move using the arrow keys (up, down, left, right). The enemies will spawn randomly on the game area and move in random directions until hit by a projectile. Please note that this version of the game is a simplified implementation and may not have all the features of a typical rogue-like game. Feel free to modify and enhance it according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an implementation of a simplified version of the rogue-like game you described:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Rogue-Like Game</title>
  <style>
    #game-area {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    #player, .enemy, .projectile {
      position: absolute;
      border-radius: 50%;
    }
    #player {
      width: 20px;
      height: 20px;
      background-color: blue;
    }
    .enemy {
      width: 20px;
      height: 20px;
      background-color: red;
    }
    .projectile {
      width: 10px;
      height: 10px;
      background-color: green;
    }
    #shoot-button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="player"></div>
  </div>
  <button id="shoot-button">Shoot</button>

let playerX = 180; // Initial player position on X-axis
    let playerY = 180; // Initial player position on Y-axis
    let playerSpeed = 5; // Speed at which player moves

// Function to create a new enemy
    function createEnemy() {
      const enemy = document.createElement('div');
      enemy.classList.add('enemy');
      enemy.style.left = Math.random() * 400 + 'px';
      enemy.style.top = Math.random() * 400 + 'px';
      gameArea.appendChild(enemy);
      enemies.push(enemy);
    }

// Function to move the enemies randomly
    function moveEnemies() {
      for (const enemy of enemies) {
        const moveX = Math.random() > 0.5 ? 1 : -1;
        const moveY = Math.random() > 0.5 ? 1 : -1;
        const offset = 2;
        let enemyX = parseFloat(enemy.style.left);
        let enemyY = parseFloat(enemy.style.top);
        enemyX += moveX * offset;
        enemyY += moveY * offset;
        enemy.style.left = enemyX + 'px';
        enemy.style.top = enemyY + 'px';

if (enemyX < 0 || enemyX > 380 || enemyY < 0 || enemyY > 380) {
          enemy.remove(); // Remove enemies that go out of bounds
          const index = enemies.indexOf(enemy);
          enemies.splice(index, 1);
        }
      }
    }

// Function to move the player based on arrow key input
    function handleArrowKey(e) {
      switch (e.key) {
        case 'ArrowUp':
          playerY -= playerSpeed;
          break;
        case 'ArrowDown':
          playerY += playerSpeed;
          break;
        case 'ArrowLeft':
          playerX -= playerSpeed;
          break;
        case 'ArrowRight':
          playerX += playerSpeed;
          break;
      }
      player.style.left = playerX + 'px';
      player.style.top = playerY + 'px';
    }

// Function to create and move projectiles
    function handleShoot() {
      const projectile = document.createElement('div');
      projectile.classList.add('projectile');
      projectile.style.left = playerX + 'px';
      projectile.style.top = playerY + 'px';
      gameArea.appendChild(projectile);

const projectileMove = setInterval(() => {
        let projectileY = parseFloat(projectile.style.top);
        projectileY -= playerSpeed;
        projectile.style.top = projectileY + 'px';

if (projectileY < 0) {
          clearInterval(projectileMove);
          projectile.remove();
        }

for (const enemy of enemies) {
          if (isCollision(projectile, enemy)) {
            clearInterval(projectileMove);
            projectile.remove();
            enemy.remove();
            const index = enemies.indexOf(enemy);
            enemies.splice(index, 1);
          }
        }
      }, 10);
    }

// Function to check collision between two elements
    function isCollision(obj1, obj2) {
      const rect1 = obj1.getBoundingClientRect();
      const rect2 = obj2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right ||
        rect1.right < rect2.left
      );
    }

// Event listeners
    shootButton.addEventListener('click', handleShoot);
    window.addEventListener('keydown', (e) => {
      if (e.repeat) return; // Ignore repeated keydown events
      handleArrowKey(e);
    });

// Main game loop
    setInterval(() => {
      if (Math.random() < 0.02) {
        createEnemy();
      }
      moveEnemies();
    }, 200);

</script>
</body>
</html>
```

Please note that this version of the game is a simplified implementation and may not have all the features of a typical rogue-like game. Feel free to modify and enhance it according to your requirements.