Slendrina The Cellar's game

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

No:41654

←

Prev Next

→

Slendrina The Cellar
Developer User18653｜Date and time 24/2/8 22:09:50
Build time 13.333 sec｜Game capacity 3.14KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Slendrina: The Cellar</title>
  
  <style>
    #game-container {
      height: 360px;
      width: 100%;
      position: relative;
      background-color: #000;
    }
    #player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 48px;
      background-image: url('player.png');
      background-size: cover;
    }
    .enemy {
      position: absolute;
      bottom: 0;
      width: 48px;
      height: 48px;
      background-image: url('enemy.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>

// Game state
    let playerPosition = { x: 0, y: 0 };
    let enemyPositions = [{ x: 100, y: 0 }, { x: 200, y: 0 }, { x: 300, y: 0 }];

// Function to update the game
    function updateGame() {
      // Move player based on input (not implemented in this example)

// Move enemies randomly
      enemyPositions.forEach((enemyPosition, index) => {
        const randomDirection = Math.random();
        if (randomDirection < 0.25) {
          enemyPosition.x -= 48;
        } else if (randomDirection < 0.5) {
          enemyPosition.x += 48;
        } else if (randomDirection < 0.75) {
          enemyPosition.y -= 48;
        } else {
          enemyPosition.y += 48;
        }

// Update enemy position on screen
        const enemyElement = document.getElementById(`enemy-${index}`);
        enemyElement.style.left = `${enemyPosition.x}px`;
        enemyElement.style.bottom = `${enemyPosition.y}px`;

// Check collision between player and enemies
        if (
          enemyPosition.x === playerPosition.x &&
          enemyPosition.y === playerPosition.y
        ) {
          // Game over logic (not implemented in this example)
          console.log("Game Over!");
        }
      });

// Repeat the game loop
      setTimeout(updateGame, 1000); // 1 second delay between each game loop
    }

// Initialize game
    window.onload = function () {
      // Create enemy elements and add to game container
      enemyPositions.forEach((enemyPosition, index) => {
        const enemyElement = document.createElement("div");
        enemyElement.id = `enemy-${index}`;
        enemyElement.className = "enemy";
        enemyElement.style.left = `${enemyPosition.x}px`;
        enemyElement.style.bottom = `${enemyPosition.y}px`;
        document.getElementById("game-container").appendChild(enemyElement);
      });

// Set initial player position
      playerPosition.x = 0;
      playerPosition.y = 0;
      
      // Load player image
      const playerImage = new Image();
      playerImage.src = playerURL;
      playerImage.onload = function () {
        document.getElementById("player").style.backgroundImage = `url(${playerURL})`;

// Start the game loop
        updateGame();
      };
    };
  </script>
</body>
</html>