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

No:6588

155

Enter the 17-year-old religion.
Developer User3840｜Date and time 23/7/2 21:44:06
Build time 43.393 sec｜Game capacity 4.088KB｜

了解の返事ありがとうございます。以下に1枚のHTMLファイルとして実装された、JavaScriptを含むゲームの例を示します。このゲームでは、スマホで操作されることを前提としています。ゲームの内容は簡単なゲームですが、実行開始されていることを確認できます。

Emoji Catch!

Catch the falling emojis!

Score: 0

上記のコードでは「Emoji Catch!」というタイトルのゲームが実装されています。画面上に落ちてくる絵文字をキャッチするゲームです。スマホのタッチイベントに応じて絵文字が動くようになっており、キャッチした絵文字の数がスコアとして表示されます。タッチ開始時に絵文字の速度が決まり、タッチ終了時に絵文字が上に移動し、スコアが増えます。絵文字の移動やスコアの更新は、ゲームのメインループで繰り返し処理されています。このゲームは1枚のHTMLファイルとして実装されており、JavaScriptコードはscriptタグで囲まれています。また、スマホで遊ぶことを前提としています。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

了解の返事ありがとうございます。

以下に1枚のHTMLファイルとして実装された、JavaScriptを含むゲームの例を示します。このゲームでは、スマホで操作されることを前提としています。ゲームの内容は簡単なゲームですが、実行開始されていることを確認できます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emoji Catch!</title>
  <style>
    body {
      text-align: center;
      font-size: 3rem;
    }
  </style>
</head>
<body>
  <h1>Emoji Catch!</h1>
  <p>Catch the falling emojis!</p>
  <p>Score: <span id="score">0</span></p>
  <canvas id="gameCanvas" width="300" height="400"></canvas>
  <script>
    // キャンバスとコンテキストの取得
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Emojiの配列
    const emojis = ["😀", "🍎", "🐶", "🌈", "⚽️", "✈️", "🎮", "🎵"];
    const emojiSize = 50;

// スコア
    let score = 0;
    const scoreElement = document.getElementById("score");

// Emojiの位置と速度の初期値
    let emojiX = canvas.width / 2;
    let emojiY = canvas.height - emojiSize;
    let emojiSpeedX = 0;
    let emojiSpeedY = -3;

// タッチイベントリスナーの追加
    canvas.addEventListener("touchstart", handleTouchStart);
    canvas.addEventListener("touchend", handleTouchEnd);

// ゲームのメインループ
    function gameLoop() {
      clearCanvas();
      updateEmoji();
      drawEmoji();
      requestAnimationFrame(gameLoop);
    }

// キャンバスをクリアする関数
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Emojiの座標を更新する関数
    function updateEmoji() {
      emojiX += emojiSpeedX;
      emojiY += emojiSpeedY;

if (emojiY < 0 || emojiY + emojiSize > canvas.height) {
        loseGame();
      }
    }

// Emojiを描画する関数
    function drawEmoji() {
      ctx.fillText(emojis[score % emojis.length], emojiX, emojiY);
    }

// ゲームオーバー時の処理を行う関数
    function loseGame() {
      alert("Game Over!");
      location.reload();
    }

// タッチイベントの処理関数群
    function handleTouchStart(event) {
      event.preventDefault();

emojiSpeedX = calculateSpeedX(event.changedTouches[0].clientX);
      emojiSpeedY = calculateSpeedY(event.changedTouches[0].clientY);
    }

function handleTouchEnd() {
      emojiSpeedX = 0;
      emojiSpeedY = -3;
      score++;
      scoreElement.textContent = score;
    }

function calculateSpeedX(touchX) {
      const canvasRect = canvas.getBoundingClientRect();
      const canvasX = touchX - canvasRect.left;
      return (canvasX - emojiX) / 30;
    }

function calculateSpeedY(touchY) {
      const canvasRect = canvas.getBoundingClientRect();
      const canvasY = touchY - canvasRect.top;
      const distance = Math.sqrt((emojiX - canvasX) ** 2 + (emojiY - canvasY) ** 2);
      return (canvasY - emojiY) / distance * 3;
    }

// ゲーム開始
    gameLoop();
  </script>
</body>
</html>
```

上記のコードでは「Emoji Catch!」というタイトルのゲームが実装されています。画面上に落ちてくる絵文字をキャッチするゲームです。スマホのタッチイベントに応じて絵文字が動くようになっており、キャッチした絵文字の数がスコアとして表示されます。

タッチ開始時に絵文字の速度が決まり、タッチ終了時に絵文字が上に移動し、スコアが増えます。絵文字の移動やスコアの更新は、ゲームのメインループで繰り返し処理されています。

このゲームは1枚のHTMLファイルとして実装されており、JavaScriptコードはscriptタグで囲まれています。また、スマホで遊ぶことを前提としています。