AI game creator

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

No:4978

232

←

Prev Next

→

centrifuge
Developer User3796｜Date and time 23/6/29 4:05:24
Build time 23.176 sec｜Game capacity 2.162KB｜

Script

遠心分離機ゲームの実装例を見てみましょう。以下はHTMLとJavaScriptのコードです。

🙂

このコードは、スマートフォンの傾きを利用して遠心分離機のシミュレーションを行うゲームです。スマートフォンを傾けることで遠心分離機が回転し、プレイヤーの絵文字は回転に合わせて動きます。プレイヤーを中心に回転させるために、スマートフォンの傾きの値を使用して処理を行っています。以上が遠心分離機ゲームの実装例です。実際に試してみて、楽しんでください！

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

遠心分離機ゲームの実装例を見てみましょう。以下はHTMLとJavaScriptのコードです。

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>遠心分離機ゲーム</title>
  <style>
    #container {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eaeaea;
    }

#spinner {
      position: relative;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      border: 10px solid #ddd;
      animation: spin 2s linear infinite;
    }

#player {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
    }

@keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="spinner">
      <div id="player">🙂</div>
    </div>
  </div>

function handleOrientation(event) {
      var rotation = -event.gamma; // スマホの傾きを取得

var spinner = document.getElementById("spinner");
      spinner.style.transform = "rotate(" + rotation + "deg)";

var player = document.getElementById("player");
      var playerTop = (spinner.offsetTop + spinner.offsetHeight / 2) - player.offsetHeight / 2;
      var playerLeft = (spinner.offsetLeft + spinner.offsetWidth / 2) - player.offsetWidth / 2;
      player.style.top = playerTop + "px";
      player.style.left = playerLeft + rotation / 3 + "px";
    }
  </script>
</body>
</html>
```

このコードは、スマートフォンの傾きを利用して遠心分離機のシミュレーションを行うゲームです。スマートフォンを傾けることで遠心分離機が回転し、プレイヤーの絵文字は回転に合わせて動きます。プレイヤーを中心に回転させるために、スマートフォンの傾きの値を使用して処理を行っています。

以上が遠心分離機ゲームの実装例です。実際に試してみて、楽しんでください！