Giant size after eating mushrooms!'s game | AI game creator

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

No:3591

1217

Giant size after eating mushrooms!
Developer User3589｜Date and time 23/6/25 18:20:49
Build time 36.909 sec｜Game capacity 4.511KB｜

このゲームでは、プレイヤーはキャラクターを操作して、画面上に表示されるきのこを食べて大きくなっていくことが目的です。操作はスマホで行い、画面上部に表示される移動ボタンで移動し、タップできのこを食べます。以下が実装のコードです。注意点として、このコードはJavaScriptのみで実装し、外部ライブラリは使用していません。

このコードを実行すると、スマホのブラウザで画面が表示されます。画面上部には移動ボタンが表示され、中央にキャラクターが表示されます。画面上にはランダムな位置にきのこが表示され、これをタップすることで、キャラクターが大きくなっていきます。また、キャラクターがきのこに触れると、キャラクターが大きくなってきのこが消え、スコアが加算されます。このゲームは部分的なゲーム化でも楽しめると思われますが、どうぞお試しください。

→ 　

2　

1　

　
　
　
　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

このゲームでは、プレイヤーはキャラクターを操作して、画面上に表示されるきのこを食べて大きくなっていくことが目的です。操作はスマホで行い、画面上部に表示される移動ボタンで移動し、タップできのこを食べます。

以下が実装のコードです。注意点として、このコードはJavaScriptのみで実装し、外部ライブラリは使用していません。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>きのこを食べて巨大化！</title>
    <style>
      #game-screen {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
      }
      .character {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #FFC0CB;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .mushroom {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: #90EE90;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="game-screen">
      <div id="character" class="character"></div>
    </div>
    <script>
      const gameScreen = document.getElementById('game-screen');
      const character = document.getElementById('character');
      
      const mushroomScore = 10;
      const mushroomCount = 10;
      let mushroomArray = [];

function addMushrooms() {
        for (let i = 0; i < mushroomCount; i++) {
          const mushroom = document.createElement('div');
          mushroom.classList.add('mushroom');
          mushroom.style.top = Math.floor(Math.random() * (gameScreen.offsetHeight - 50)) + 'px';
          mushroom.style.left = Math.floor(Math.random() * (gameScreen.offsetWidth - 50)) + 'px';
          mushroomArray.push(mushroom);
          gameScreen.appendChild(mushroom);
        }
      }

function moveCharacter(x, y) {
        const newX = character.offsetLeft + x;
        const newY = character.offsetTop + y;
        if (newX < 0 || newX > (gameScreen.offsetWidth - character.offsetWidth) || newY < 0 || newY > (gameScreen.offsetHeight - character.offsetHeight)) {
          return;
        }
        character.style.left = newX + 'px';
        character.style.top = newY + 'px';
        checkMushroomCollision();
      }

function checkMushroomCollision() {
        for (let i = 0; i < mushroomArray.length; i++) {
          const mushroom = mushroomArray[i];
          if (isColliding(character, mushroom)) {
            character.style.width = parseInt(character.style.width) + mushroomScore + 'px';
            character.style.height = parseInt(character.style.height) + mushroomScore + 'px';
            gameScreen.removeChild(mushroom);
            mushroomArray.splice(i, 1);
            break;
          }
        }
      }

function isColliding(elem1, elem2) {
        const rect1 = elem1.getBoundingClientRect();
        const rect2 = elem2.getBoundingClientRect();
        return !(
          rect1.bottom < rect2.top ||
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.left > rect2.right
        );
      }

addMushrooms();

document.addEventListener('keydown', (event) => {
        switch (event.code) {
          case 'ArrowLeft':
            moveCharacter(-10, 0);
            break;
          case 'ArrowRight':
            moveCharacter(10, 0);
            break;
          case 'ArrowUp':
            moveCharacter(0, -10);
            break;
          case 'ArrowDown':
            moveCharacter(0, 10);
            break;
        }
      });

document.addEventListener('click', (event) => {
        checkMushroomCollision();
      });
    </script>
  </body>
</html>
```

このコードを実行すると、スマホのブラウザで画面が表示されます。画面上部には移動ボタンが表示され、中央にキャラクターが表示されます。画面上にはランダムな位置にきのこが表示され、これをタップすることで、キャラクターが大きくなっていきます。

また、キャラクターがきのこに触れると、キャラクターが大きくなってきのこが消え、スコアが加算されます。

このゲームは部分的なゲーム化でも楽しめると思われますが、どうぞお試しください。