ゲーム開始時、画面上部からランダムに傘が出現する。・傘は画面内をランダムに動き、スマホのタッチイベントによって操作する。・傘を傘立てにあるスロットに落とし、傘をセットしていく。・画面内に表示される傘の数は制限されており、一定数セットするとゲームクリアとなる。・途中、誤って傘立てに傘を落とさずに画面外に落下させた場合は、ゲームオーバーとなる。's game

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

No:3904

1295

←

Prev Next

→

ゲーム開始時、画面上部からランダムに傘が出現する。・傘は画面内をランダムに動き、スマホのタッチイ..ALL
Developer User3589｜Date and time 23/6/26 22:44:51
Build time 34.161 sec｜Game capacity 3.58KB｜

Script

ご要望の通りに開発しました。以下がコードです。

ご確認よろしくお願いいたします。

←

Prev　Next

→ 　

Back　

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

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

ご要望の通りに開発しました。以下がコードです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>傘セットゲーム</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-color: #def0ff;
    }
    .container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .slot {
      position: absolute;
      bottom: 10%;
      margin: 0 2%;
      width: 20%;
      height: 10%;
      border: 2px solid #222;
      background-color: #555;
    }
    .umbrella {
      position: absolute;
      top: -15%;
      left: 0;
      width: 15%;
      height: auto;
      cursor: pointer;
    }
    #score {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 5vw;
      text-align: center;
    }
  </style>
  <script>
    let score = 0;
    let maxScore = 5;
    
    const createUmbrella = () => {
      const umbrellaImg = document.createElement('img');
      umbrellaImg.className = 'umbrella';
      umbrellaImg.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/241/umbrella-with-rain-drops_2602-fe0f.png';
      umbrellaImg.style.left = `${Math.floor(Math.random() * 80)}%`;
      const container = document.querySelector('.container');
      container.appendChild(umbrellaImg);
      
      // 傘がランダムに動く
      let translateY = 0;
      const moveUmbrella = () => {
        if (!umbrellaImg || umbrellaImg.offsetTop >= container.clientHeight) {
          clearInterval(intervalId);
          container.removeChild(umbrellaImg);
          if (score < maxScore) {
            createUmbrella();
          }
          return;
        }
        umbrellaImg.style.top = `${umbrellaImg.offsetTop + translateY}px`;
      }
      const intervalId = setInterval(moveUmbrella, 50);
      
      // タッチイベントで傘を操作する
      let offsetX = 0;
      container.addEventListener('touchstart', (event) => {
        offsetX = event.touches[0].clientX - umbrellaImg.offsetLeft - umbrellaImg.clientWidth / 2;
      });
      container.addEventListener('touchmove', (event) => {
        event.preventDefault();
        if (umbrellaImg) {
          const x = event.touches[0].clientX - offsetX;
          umbrellaImg.style.left = `${Math.min(container.clientWidth - umbrellaImg.clientWidth, Math.max(0, x))}px`;
        }
      });
      container.addEventListener('touchend', (event) => {
        if (umbrellaImg) {
          translateY = container.clientHeight / 20; // 傘を下に落とす動き
        }
      });
    }
    
    window.onload = () => {
      createUmbrella();
      
      // スロットに傘が落ちたらスコアを加算する
      const slotList = document.querySelectorAll('.slot');
      for (const slot of slotList) {
        slot.addEventListener('animationend', () => {
          if (slot.querySelector('.umbrella')) {
            score++;
            document.querySelector('#score').textContent = score;
          }
          slot.innerHTML = '';
        })
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div id="score">0</div>
  </div>
</body>
</html>
```

ご確認よろしくお願いいたします。