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

No:7758

697

←

Prev Next

→

hammock kite
Developer o2pi4｜Date and time 23/7/9 20:02:06
Build time 11.634 sec｜Game capacity 2.574KB｜

Script

了解しました。以下に、JavaScriptを含むHTMLファイルとして実装した簡単なゲームの例を示します。

ハンモックカイト

カイトをスマホのタッチ操作で操作して、ハンモックに乗ったキャラクターを風に乗せましょう！

このゲームでは、ハンモックに乗ったキャラクターがスマホのタッチ操作で操作できるカイトに乗って風に乗ることが目標です。タイトルや説明文、カイトやキャラクターの描画、タッチ操作の処理、ゲームループなど、基本的な部分を実装しています。何かご要望があれば教えてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。以下に、JavaScriptを含むHTMLファイルとして実装した簡単なゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ハンモックカイト</title>
</head>
<body>

<h1>ハンモックカイト</h1>

<p>カイトをスマホのタッチ操作で操作して、ハンモックに乗ったキャラクターを風に乗せましょう！</p>

// キャンバス要素を取得
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

// カイトの情報
    const kite = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 50,
      speed: 5,
    };

// キャラクターの情報
    const character = {
      x: 50,
      y: canvas.height / 2,
      size: 30,
      isRiding: false,
    };

// タッチ操作の処理
    canvas.addEventListener('touchmove', function(event) {
      event.preventDefault();
      kite.y = event.touches[0].clientY - canvas.offsetTop;
    });

// ゲームループ
    function gameLoop() {
      // キャンバスをクリア
      context.clearRect(0, 0, canvas.width, canvas.height);

// カイトを描画
      context.fillStyle = 'blue';
      context.fillRect(kite.x - kite.size / 2, kite.y - kite.size / 2, kite.size, kite.size);

// キャラクターを描画
      context.fillStyle = character.isRiding ? 'green' : 'red';
      context.fillRect(character.x - character.size / 2, character.y - character.size / 2, character.size, character.size);

// キャラクターがカイトの上にいるか判定
      if (character.y <= kite.y && character.y >= kite.y - kite.size && character.x >= kite.x - kite.size / 2 && character.x <= kite.x + kite.size / 2) {
        character.isRiding = true;
      } else {
        character.isRiding = false;
      }

// ゲームループを再実行
      requestAnimationFrame(gameLoop);
    }

// ゲームを開始
    gameLoop();
  </script>

</body>
</html>
```

このゲームでは、ハンモックに乗ったキャラクターがスマホのタッチ操作で操作できるカイトに乗って風に乗ることが目標です。タイトルや説明文、カイトやキャラクターの描画、タッチ操作の処理、ゲームループなど、基本的な部分を実装しています。

何かご要望があれば教えてください。