Press your eyes with your fingers.'s game | AI game creator

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

No:2554

5741

Press your eyes with your fingers.
Developer anonymous｜Date and time 70/1/1 10:05:51
Build time unknown sec｜Game capacity 3.951KB｜

はい、了解しました！指を押し付けても大丈夫ですよ！それでは、1枚のhtmlファイルでゲームを実装するプログラムを書いてみます。今回は、スマホで操作しやすい「Emoji Jump」というゲームを作ってみましょう。まずは、htmlファイルの中身を書いていきます。

👱

Score: 0

次に、JavaScriptのコードを書いていきます。
このプログラムでは、`createObstacle`関数で障害物を生成し、アニメーションで下に移動させます。同時に、プレイヤーとの接触判定も行い、スコアも加算します。`isCollision`関数でプレイヤーと障害物が接触しているかどうかを判定して、ゲームオーバーにする処理も行います。また、`document.addEventListener`でプレイヤーのジャンプアニメーションも実装しています。以上で、スマホで遊びやすいミニゲーム「Emoji Jump」が完成しました！指で押し付けながら、ぜひ遊んでみてくださいね！

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

はい、了解しました！指を押し付けても大丈夫ですよ！

それでは、1枚のhtmlファイルでゲームを実装するプログラムを書いてみます。今回は、スマホで操作しやすい「Emoji Jump」というゲームを作ってみましょう。

まずは、htmlファイルの中身を書いていきます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Emoji Jump</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #ffeaa7;
      text-align: center;
    }

#player {
      position: relative;
      display: inline-block;
      font-size: 50px;
      margin-top: 100px;
      left: 0;
    }

.obstacle {
      position: absolute;
      display: inline-block;
      font-size: 50px;
      bottom: 0;
    }

#score {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="player">👱</div>
  <div id="score">Score: 0</div>
  <script>
    // ここにJavaScriptのコードを書いていきます
  </script>
</body>
</html>
```

次に、JavaScriptのコードを書いていきます。

```javascript
// 変数を定義
let player = document.getElementById("player");
let scoreLabel = document.getElementById("score");
let score = 0;
let obstacleInterval;
let gameOver = false;

// 障害物を生成する関数
function createObstacle() {
  let obstacle = document.createElement("div");
  obstacle.classList.add("obstacle");
  obstacle.style.left = Math.floor(Math.random() * (window.innerWidth - 50)) + "px";
  obstacle.innerHTML = "🌵";
  document.body.appendChild(obstacle);

// 障害物を下に移動させるアニメーションを実装
  let obstacleInterval = setInterval(() => {
    obstacle.style.bottom = parseInt(obstacle.style.bottom) + 10 + "px";

// 障害物が画面外に出たら削除
    if (parseInt(obstacle.style.bottom) >= window.innerHeight) {
      obstacle.parentNode.removeChild(obstacle);
      clearInterval(obstacleInterval);
    }

// 障害物とプレイヤーが接触した場合、ゲームオーバーにする
    if (isCollision(player, obstacle)) {
      gameOver = true;
      clearInterval(obstacleInterval);
      alert("Game Over!\nScore: " + score);
      location.reload(); // ページをリロードして、再度プレイできるようにする
    }
    
    // スコアを加算する
    scoreLabel.innerHTML = "Score: " + ++score;
  }, 50);
}

// プレイヤーのジャンプアニメーションを実装
document.addEventListener("keyup", (event) => {
  if (event.code === "Space" && !gameOver) {
    player.style.animation = "jump 0.5s";
    setTimeout(() => {
      player.style.animation = "none";
    }, 500);
  }
});

// プレイヤーと障害物が接触しているかどうかを判定する関数
function isCollision(obj1, obj2) {
  let obj1Rect = obj1.getBoundingClientRect();
  let obj2Rect = obj2.getBoundingClientRect();

return !(
    obj1Rect.bottom < obj2Rect.top ||
    obj1Rect.top > obj2Rect.bottom ||
    obj1Rect.right < obj2Rect.left ||
    obj1Rect.left > obj2Rect.right
  );
}

// 障害物を生成するインターバルを設定
obstacleInterval = setInterval(createObstacle, 1500);
```

このプログラムでは、`createObstacle`関数で障害物を生成し、アニメーションで下に移動させます。同時に、プレイヤーとの接触判定も行い、スコアも加算します。`isCollision`関数でプレイヤーと障害物が接触しているかどうかを判定して、ゲームオーバーにする処理も行います。また、`document.addEventListener`でプレイヤーのジャンプアニメーションも実装しています。

以上で、スマホで遊びやすいミニゲーム「Emoji Jump」が完成しました！指で押し付けながら、ぜひ遊んでみてくださいね！