AI game creator

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

No:5878

4613

←

Prev Next

→

bubble bobble
Developer もちきなこ｜Date and time 23/7/1 0:52:32
Build time 31.6 sec｜Game capacity 3.73KB｜

Script

了解です。バブルボブル風のゲームを作成します。

このHTMLファイルは、スマートフォンで遊べるバブルボブル風のゲームです。ゲーム画面が表示され、画面内をタッチすることでプレイヤーを移動させ、バブルがランダムに生成されます。プレイヤーがバブルに触れるとスコアが上がり、バブルは消えます。スコアは画面左上に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です。バブルボブル風のゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>バブルボブル風ゲーム</title>
  <style>
    #gameContainer {
      width: 100vw;
      height: 100vh;
      background-color: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
    }

#player {
      width: 50px;
      height: 50px;
      background-color: yellow;
      border-radius: 50%;
      position: absolute;
    }

.bubble {
      width: 30px;
      height: 30px;
      background-color: orange;
      border-radius: 50%;
      position: absolute;
    }

#score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 18px;
      color: white;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="player"></div>
    <div id="score"></div>
  </div>

// プレイヤーの初期位置
    let playerX = gameWidth / 2;
    let playerY = gameHeight / 2;

// プレイヤーの移動速度
    const playerSpeed = 5;

// スコア
    let score = 0;

// スコアの表示
    const scoreElement = document.getElementById('score');
    scoreElement.innerText = `スコア: ${score}`;

// プレイヤーの表示
    const player = document.getElementById('player');
    player.style.left = `${playerX}px`;
    player.style.top = `${playerY}px`;

// タッチ操作
    window.addEventListener('touchstart', event => {
      if (event.touches[0].clientX < playerX) {
        playerX -= playerSpeed;
      } else {
        playerX += playerSpeed;
      }

if (event.touches[0].clientY < playerY) {
        playerY -= playerSpeed;
      } else {
        playerY += playerSpeed;
      }

player.style.left = `${playerX}px`;
      player.style.top = `${playerY}px`;
    });

// バブルの生成と移動
    setInterval(() => {
      const bubble = document.createElement('div');
      bubble.classList.add('bubble');
      bubble.style.top = `${Math.floor(Math.random() * gameHeight)}px`;
      bubble.style.left = `${Math.floor(Math.random() * gameWidth)}px`;
      document.getElementById('gameContainer').appendChild(bubble);

const bubbleSpeed = Math.floor(Math.random() * 3) + 1;
      const bubbleInterval = setInterval(() => {
        const bubbleTop = parseInt(bubble.style.top);
        const bubbleLeft = parseInt(bubble.style.left);
        const distanceX = Math.abs(playerX - bubbleLeft);
        const distanceY = Math.abs(playerY - bubbleTop);

if (distanceX <= 25 && distanceY <= 25) {
          score++;
          scoreElement.innerText = `スコア: ${score}`;
          clearInterval(bubbleInterval);
          bubble.remove();
        } else {
          if (playerX > bubbleLeft) {
            bubble.style.left = `${bubbleLeft + bubbleSpeed}px`;
          } else {
            bubble.style.left = `${bubbleLeft - bubbleSpeed}px`;
          }

if (playerY > bubbleTop) {
            bubble.style.top = `${bubbleTop + bubbleSpeed}px`;
          } else {
            bubble.style.top = `${bubbleTop - bubbleSpeed}px`;
          }
        }
      }, 100);
    }, 2000);
  </script>
</body>
</html>
```