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

No:6692

132

tyrannosaurus
Developer User3916｜Date and time 23/7/3 4:47:26
Build time 38.8 sec｜Game capacity 3.882KB｜

了解しました。では、スマホ操作前提で遊べるゲームの例として、ティラノサウルスランゲームを作成します。

ティラノサウルスランゲーム

ゲーム中...

上記のコードは、スマホで操作できるティラノサウルスランゲームの例です。ゲーム画面にはディノサウルスの画像があり、障害物が表示されます。ディノサウルスをタップするか、スペースキーを押すことでジャンプします。ジャンプ中に障害物に触れるとゲームオーバーとなります。ゲーム状態は「ゲーム中...」と表示されており、ゲームオーバー時には「Game Over」と表示されます。ただし、本プログラムの実行には以下の条件が必要です。 - ゲーム画面には「dino.png」という名前のディノサウルスの画像が必要です。同じフォルダに配置してください。 - ジャンプ効果音として「jump.mp3」という名前の音声ファイルが必要です。同じフォルダに配置してください。上記の条件を満たしていれば、上記のコードを1枚のHTMLファイルとして保存し、スマートフォンで開くことでゲームをプレイすることができます。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

了解しました。では、スマホ操作前提で遊べるゲームの例として、ティラノサウルスランゲームを作成します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ティラノサウルスランゲーム</title>
  <style>
    #dino {
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const dino = document.getElementById("dino");
      const gameScreen = document.getElementById("game-screen");
      const jumpSound = new Audio("jump.mp3");

let isJumping = false;

function jump() {
        if (!isJumping) {
          isJumping = true;
          jumpSound.play();
          let position = 0;

let upInterval = setInterval(function() {
            if (position >= 150) {
              clearInterval(upInterval);

let downInterval = setInterval(function() {
                if (position <= 0) {
                  clearInterval(downInterval);
                  isJumping = false;
                } else {
                  position -= 20;
                  dino.style.bottom = position + "px";
                }
              }, 20);
            } else {
              position += 20;
              dino.style.bottom = position + "px";
            }
          }, 20);
        }
      }

document.addEventListener("keydown", function(e) {
        if (e.key === " ") {
          jump();
        }
      });

gameScreen.addEventListener("touchstart", jump);

setInterval(function() {
        const gameStatus = document.getElementById("game-status");
        const dinoBottom = parseInt(window.getComputedStyle(dino).getPropertyValue("bottom"));
        const obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));

if (dinoBottom <= 0 && obstacleLeft >= 0 && obstacleLeft <= 60) {
          gameStatus.textContent = "Game Over";
          clearInterval(gameInterval);
        }
      }, 10);

const gameInterval = setInterval(function() {
        const obstacle = document.getElementById("obstacle");
        obstacle.style.animationDuration = Math.random() * 3 + 1 + "s";
      }, 3000);
    });
  </script>

<h1>ティラノサウルスランゲーム</h1>
  <p id="game-status">ゲーム中...</p>

<div id="game-screen" style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
    <img id="dino" src="dino.png" width="50" height="50">
    <div id="obstacle" style="position: absolute; bottom: 0; left: 200px; width: 20px; height: 100px; background-color: green;"></div>
  </div>

</body>
</html>
```

上記のコードは、スマホで操作できるティラノサウルスランゲームの例です。ゲーム画面にはディノサウルスの画像があり、障害物が表示されます。ディノサウルスをタップするか、スペースキーを押すことでジャンプします。ジャンプ中に障害物に触れるとゲームオーバーとなります。ゲーム状態は「ゲーム中...」と表示されており、ゲームオーバー時には「Game Over」と表示されます。

ただし、本プログラムの実行には以下の条件が必要です。

- ゲーム画面には「dino.png」という名前のディノサウルスの画像が必要です。同じフォルダに配置してください。
- ジャンプ効果音として「jump.mp3」という名前の音声ファイルが必要です。同じフォルダに配置してください。

上記の条件を満たしていれば、上記のコードを1枚のHTMLファイルとして保存し、スマートフォンで開くことでゲームをプレイすることができます。