A game where the protagonist is a kind wolf that collects gold and portions overcoming obstacles and fighting enemies's game

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

No:9958

166

←

Prev Next

→

A game where the protagonist is a kind wolf that c..ALL
Developer User4445｜Date and time 23/7/28 12:25:22
Build time 44.81 sec｜Game capacity 6.223KB｜

Script

Sure, here's an example of a game where the protagonist is a kind wolf that collects gold and potions, overcomes obstacles, and fights enemies. The game is implemented in a single HTML file using JavaScript and pictograms.

This HTML file creates a game with a wolf protagonist represented by the "pets" pictogram. The wolf can move using the arrow keys on a smartphone. The game includes obstacles ("obstacle" class), golds ("gold" class), potions ("potion" class), and enemies ("enemy" class). The player collects gold and potions while avoiding obstacles and enemies. The score is increased when gold is collected, and health is affected when colliding with obstacles or enemies. It also checks for a game over condition when the health reaches zero.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Arial', sans-serif;
    }

.game-container {
      width: 400px;
      height: 400px;
      border: 2px solid #000;
      position: relative;
    }

.player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: #16a085;
    }

.obstacle {
      position: absolute;
      background-color: #c0392b;
    }

.gold {
      position: absolute;
      color: #f1c40f;
      font-size: 32px;
    }

.potion {
      position: absolute;
      color: #8e44ad;
      font-size: 32px;
    }

.enemy {
      position: absolute;
      color: #e74c3c;
      font-size: 32px;
    }

.game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      color: #c0392b;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="player"><i class="material-icons">pets</i></div>
    <div class="obstacle" style="top: 100px; left: 50px; width: 100px; height: 50px;"></div>
    <div class="obstacle" style="top: 200px; left: 200px; width: 150px; height: 50px;"></div>
    <div class="gold" style="top: 150px; left: 100px;"><i class="material-icons">attach_money</i></div>
    <div class="gold" style="top: 300px; left: 250px;"><i class="material-icons">attach_money</i></div>
    <div class="potion" style="top: 250px; left: 150px;"><i class="material-icons">local_bar</i></div>
    <div class="enemy" style="top: 350px; left: 50px;"><i class="material-icons">mood_bad</i></div>
  </div>

const player = document.querySelector('.player');
    const obstacles = document.querySelectorAll('.obstacle');
    const golds = document.querySelectorAll('.gold');
    const potions = document.querySelectorAll('.potion');
    const enemies = document.querySelectorAll('.enemy');

let score = 0;
    let health = 100;

function movePlayer(e) {
      const key = e.key;
      const playerPosition = player.getBoundingClientRect();

if (key === 'ArrowUp') {
        player.style.top = playerPosition.top - 50 + 'px';
      } else if (key === 'ArrowDown') {
        player.style.top = playerPosition.top + 50 + 'px';
      } else if (key === 'ArrowLeft') {
        player.style.left = playerPosition.left - 50 + 'px';
      } else if (key === 'ArrowRight') {
        player.style.left = playerPosition.left + 50 + 'px';
      }

handleCollision();
    }

function handleCollision() {
      const playerPosition = player.getBoundingClientRect();

// Check for collisions with obstacles
      obstacles.forEach(obstacle => {
        const obstaclePosition = obstacle.getBoundingClientRect();
        if (
          playerPosition.left < obstaclePosition.left + obstaclePosition.width &&
          playerPosition.left + playerPosition.width > obstaclePosition.left &&
          playerPosition.top < obstaclePosition.top + obstaclePosition.height &&
          playerPosition.top + playerPosition.height > obstaclePosition.top
        ) {
          health -= 10;
          obstacle.style.display = 'none';
          checkGameOver();
        }
      });

// Check for collisions with golds
      golds.forEach(gold => {
        const goldPosition = gold.getBoundingClientRect();
        if (
          playerPosition.left < goldPosition.left + goldPosition.width &&
          playerPosition.left + playerPosition.width > goldPosition.left &&
          playerPosition.top < goldPosition.top + goldPosition.height &&
          playerPosition.top + playerPosition.height > goldPosition.top
        ) {
          score += 10;
          gold.style.display = 'none';
        }
      });

// Check for collisions with potions
      potions.forEach(potion => {
        const potionPosition = potion.getBoundingClientRect();
        if (
          playerPosition.left < potionPosition.left + potionPosition.width &&
          playerPosition.left + playerPosition.width > potionPosition.left &&
          playerPosition.top < potionPosition.top + potionPosition.height &&
          playerPosition.top + playerPosition.height > potionPosition.top
        ) {
          health += 20;
          potion.style.display = 'none';
        }
      });

// Check for collisions with enemies
      enemies.forEach(enemy => {
        const enemyPosition = enemy.getBoundingClientRect();
        if (
          playerPosition.left < enemyPosition.left + enemyPosition.width &&
          playerPosition.left + playerPosition.width > enemyPosition.left &&
          playerPosition.top < enemyPosition.top + enemyPosition.height &&
          playerPosition.top + playerPosition.height > enemyPosition.top
        ) {
          health -= 20;
          enemy.style.display = 'none';
          checkGameOver();
        }
      });
    }

function checkGameOver() {
      if (health <= 0) {
        window.removeEventListener('keydown', movePlayer);
        player.style.display = 'none';
        document.querySelector('.game-over').innerText = 'Game Over!';
      }
    }
  </script>
</body>
</html>
```