Look at them! People look like garbage! Lots of people like peas in a pod free-fall into the sea from a huge aerial battleship.'s game

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

No:8859

1305

←

Prev Next

→

Look at them! People look like garbage! Lots of pe..ALL
Developer User4246｜Date and time 23/7/19 2:10:44
Build time 26.573 sec｜Game capacity 2.857KB｜

Script

する様子を描いたゲームを作ります。以下が実際のHTMLファイルの実装例です。

🚀

このゲームでは、巨大な空中戦艦が画面中央に表示され、海面に自由落下する人がたくさん表示されます。人が海面に到達すると着地し、地面に立つアニメーションが再生されます。また、画面はスマートフォンでも遊べるようにレスポンシブに設定されています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

する様子を描いたゲームを作ります。以下が実際のHTMLファイルの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: skyblue;
    }
    
    #ship {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 50px;
    }
    
    #people {
      position: relative;
      width: 100%;
      height: 300px;
      border: 1px solid black;
      overflow: hidden;
    }
    
    .person {
      position: absolute;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="ship">🚀</div>
  <div id="people"></div>

// 人が自由落下するスピード
    const fallSpeed = 5;

// 人が海面に到達する時間（ミリ秒）
    const landingTime = 3000;

// 画面の幅と高さ
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

// 画面上に人をランダムに生成
    for (let i = 0; i < numPeople; i++) {
      const person = document.createElement("div");
      person.innerText = "👤";
      person.className = "person";
      person.style.left = `${Math.random() * screenWidth}px`;
      person.style.animationDuration = `${landingTime / 1000}s`;
      document.getElementById("people").appendChild(person);
    }

// 人が海面に到達した時の処理
    function onPersonLands(event) {
      event.target.classList.add("landed");
    }

// 人が自由落下しているアニメーション
    const fallingAnimation = `
      @keyframes fall {
        0% {
          top: -50px;
          opacity: 0;
        }
        100% {
          top: ${screenHeight + 50}px;
          opacity: 1;
        }
      }
    `;
    const styleSheet = document.createElement("style");
    styleSheet.innerText = fallingAnimation;
    document.head.appendChild(styleSheet);

// 人が自由落下するアニメーションを設定
    const people = document.getElementsByClassName("person");
    Array.from(people).forEach(person => {
      person.addEventListener("animationend", onPersonLands);
      person.style.animationName = "fall";
      person.style.animationTimingFunction = "linear";
      person.style.animationIterationCount = "infinite";
      person.style.animationDirection = "forward";
      person.style.animationPlayState = "running";
    });
  </script>
</body>
</html>
```