rolling around with ones acorns's game

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

No:4992

322

←

Prev Next

→

rolling around with ones acorns
Developer User3806｜Date and time 23/6/29 6:16:51
Build time 21.727 sec｜Game capacity 1.899KB｜

Script

以下は、スマホで遊べる「どんぐりコロコロ」というゲームの実装例です。HTMLファイルに以下のコードを記述し、1枚のHTMLファイルとして実行してください。

🌰

このゲームでは、スマホの傾きを利用して、画面上のどんぐりをコロコロと転がすことができます。スマホを傾けると、どんぐりが対応する方向に動きます。なお、このゲームは単純な物理シミュレーションの例であり、完全なゲームとは言えませんが、スマホの操作を活用して遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>どんぐりコロコロ</title>
  <style>
    #game-screen {
      width: 100vw;
      height: 100vh;
      background-color: lightgray;
      position: relative;
    }
    #acorn {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="game-screen">
    <span id="acorn">🌰</span>
  </div>

function handleOrientation(event) {
      var x = event.gamma; // 横方向の傾き（-90〜90の範囲）
      var y = event.beta; // 縦方向の傾き（-180〜180の範囲）

var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;

var acorn = document.getElementById("acorn");
      var acornWidth = acorn.offsetWidth;
      var acornHeight = acorn.offsetHeight;

var maxX = screenWidth - acornWidth;
      var maxY = screenHeight - acornHeight;

var posX = ((x + 90) / 180) * maxX;
      var posY = ((y + 180) / 360) * maxY;

acorn.style.left = posX + "px";
      acorn.style.top = posY + "px";
    }
  </script>
</body>
</html>
```

このゲームでは、スマホの傾きを利用して、画面上のどんぐりをコロコロと転がすことができます。スマホを傾けると、どんぐりが対応する方向に動きます。

なお、このゲームは単純な物理シミュレーションの例であり、完全なゲームとは言えませんが、スマホの操作を活用して遊ぶことができます。