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

No:41790

←

Prev Next

→

ハリーポッター炎のゴブレット
Developer User18743｜Date and time 24/2/9 23:26:53
Build time 13.631 sec｜Game capacity 2.543KB｜

Script

もちろん、ハリーポッター炎のゴブレットというゲームを1枚のHTMLファイルとして実装します。以下が実際のプログラムです。

ハリーポッター炎のゴブレット

スマホで操作してゴブレットを燃やせ！🔥

以上がハリーポッター炎のゴブレットというゲームのHTMLファイルの実装です。このファイルを1枚のHTMLとして保存し、スマホで開くことでゴブレットを操作して遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

もちろん、ハリーポッター炎のゴブレットというゲームを1枚のHTMLファイルとして実装します。以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ハリーポッター炎のゴブレット</title>
</head>
<body>
  <h1>ハリーポッター炎のゴブレット</h1>
  <p>スマホで操作してゴブレットを燃やせ！🔥</p>

// キャンバスの設定
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// ゴブレットの初期位置を設定
    let gobletX = canvas.width / 2;
    let gobletY = canvas.height - 100;

// タッチ座標の初期値を設定
    let touchX = gobletX;
    let touchY = gobletY;

// ゴブレットを描画する関数
    function drawGoblet() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'red';
      ctx.fillRect(gobletX, gobletY, 50, 50);
    }

// タッチ操作のイベントリスナーを登録する
    canvas.addEventListener('touchstart', handleTouchStart, false);
    canvas.addEventListener('touchmove', handleTouchMove, false);

// タッチ開始時の処理
    function handleTouchStart(event) {
      event.preventDefault();
      touchX = event.touches[0].clientX;
      touchY = event.touches[0].clientY;
    }

// タッチ移動時の処理
    function handleTouchMove(event) {
      event.preventDefault();
      touchX = event.touches[0].clientX;
      touchY = event.touches[0].clientY;

// ゴブレットの位置を更新する
      gobletX = touchX - 25;
      gobletY = touchY - 25;

// ゴブレットが画面外に出た場合の処理
      if (gobletX < 0) gobletX = 0;
      if (gobletX > canvas.width - 50) gobletX = canvas.width - 50;
      if (gobletY < 0) gobletY = 0;
      if (gobletY > canvas.height - 50) gobletY = canvas.height - 50;
    }

// ゲームループ
    function gameLoop() {
      drawGoblet();
      requestAnimationFrame(gameLoop);
    }

// ゲームの開始
    gameLoop();

</script>
</body>
</html>
```