メガネで敵をたおすゲーム's game

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

No:16074

←

Prev Next

→

メガネで敵をたおすゲーム
Developer User7116｜Date and time 23/9/15 23:27:06
Build time 31.268 sec｜Game capacity 2.656KB｜

Script

了解です。以下に、メガネで敵を倒すゲームの実装例を示します。

👓

👹

このプログラムでは、スマートフォンの傾きを利用してメガネの位置を変更し、敵の位置をクリックして得点を加算するゲームです。メガネはスマートフォンの傾きに合わせて移動し、敵の位置はランダムに設定されます。敵をクリックすると得点が加算され、得点は画面上に表示されます。ゲームはスマートフォンのブラウザでプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、メガネで敵を倒すゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>メガネで敵を倒すゲーム</title>
  <style>
    #player {
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #enemy {
      font-size: 60px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    #message {
      font-size: 24px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
  </style>
</head>
<body>
  <div id="player">👓</div>
  <div id="enemy">👹</div>
  <div id="message"></div>

let score = 0;

// 敵の初期位置を設定し、ランダムな場所に表示する
    function setEnemyPosition() {
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;
      const enemySize = enemy.offsetWidth;
      const newX = Math.floor(Math.random() * (screenWidth - enemySize));
      const newY = Math.floor(Math.random() * (screenHeight - enemySize));
      enemy.style.top = newY + "px";
      enemy.style.left = newX + "px";
    }

// 敵をクリックした時に得点を加算し、再び初期位置に表示する
    enemy.addEventListener("click", () => {
      score++;
      message.textContent = "Score: " + score;
      setEnemyPosition();
    });

// スマホの傾きに合わせてメガネの位置を変更する
    window.addEventListener("deviceorientation", (event) => {
      const gamma = event.gamma; // X軸の傾き（-90〜90の範囲）
      const beta = event.beta; // Y軸の傾き（-180〜180の範囲）
      
      player.style.top = (50 + gamma * 2) + "%";
      player.style.left = (50 + beta * 2) + "%";
    });

// ゲームを開始する前に敵の初期位置を設定する
    setEnemyPosition();
  </script>
</body>
</html>
```