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

No:9615

←

Prev Next

→

Halloween Games
Developer User4392｜Date and time 23/7/26 17:21:44
Build time 29.681 sec｜Game capacity 2.812KB｜

Script

了解です。以下、簡単なハロウィンゲームの実装例です。

ハロウィンゲーム

このプログラムは、黄色の四角いプレイヤーを操作して、画面上から降ってくるオレンジ色の四角い敵から逃げるゲームです。タッチ操作でプレイヤーを移動させることができます。敵にぶつかるとゲームオーバーになり、スコアが表示されます。再度遊ぶ場合はページをリロードしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下、簡単なハロウィンゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ハロウィンゲーム</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>ハロウィンゲーム</h1>
  <canvas id="canvas" width="400" height="400"></canvas>

// ゲームの初期状態
    let gameover = false;
    let score = 0;

// プレイヤーの初期状態
    const playerSize = 40;
    let playerX = canvas.width / 2;
    let playerY = canvas.height - playerSize;

// スマホのタッチ位置を取得
    canvas.addEventListener("touchmove", function (event) {
      const rect = canvas.getBoundingClientRect();
      playerX = event.touches[0].clientX - rect.left - playerSize / 2;
    });

// 敵の初期状態
    const enemySize = 20;
    let enemyX = Math.floor(Math.random() * (canvas.width - enemySize));
    let enemyY = 0;

// メインループ
    function loop() {
      // ゲームオーバーなら終了
      if (gameover) {
        alert("Game over! スコア: " + score);
        return;
      }

// キャンバスをクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
      ctx.fillStyle = "yellow";
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// 敵を描画
      ctx.fillStyle = "orange";
      ctx.fillRect(enemyX, enemyY, enemySize, enemySize);

// 当たり判定
      if (playerX < enemyX + enemySize &&
          enemyX < playerX + playerSize &&
          playerY < enemyY + enemySize &&
          enemyY < playerY + playerSize) {
        gameover = true;
      }

// スコアを描画
      ctx.fillStyle = "white";
      ctx.font = "20px sans-serif";
      ctx.fillText("スコア: " + score, 10, 30);

// 敵を移動
      enemyY += 5;

// 敵が画面外に出たら新しい敵を生成
      if (enemyY > canvas.height) {
        enemyX = Math.floor(Math.random() * (canvas.width - enemySize));
        enemyY = 0;
        score++;
      }

// 次のフレームを予約
      requestAnimationFrame(loop);
    }

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