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

No:23753

湘南新宿ライン、高崎線直通回、特別快速、高崎行き、脱線事故再現
Developer User11134｜Date and time 23/11/3 11:49:08
Build time 96.881 sec｜Game capacity 4.209KB｜

Script

了解です。以下に、スマホ操作を前提としたゲームのサンプルプログラムを記述します。

脱線事故ゲーム

このプログラムでは、HTML5のCanvasを使用して「脱線事故ゲーム」を実装しています。ボールとパドルの衝突判定や壁との衝突判定を行い、ゲームの進行を制御します。キーボードの操作（左右キー）とタッチ操作にも対応しています。ゲームが正しく動作するかを確認するには、上記のコードをコピーして任意のテキストエディタに貼り付け、拡張子を「.html」にして保存し、ウェブブラウザで開いてください。その際、スマートフォンの画面で操作することを想定していますので、PC上で開いた場合はデベロッパーツールなどでスマートフォンの表示を模擬するなどの設定が必要かもしれません。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、スマホ操作を前提としたゲームのサンプルプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>脱線事故ゲーム</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>脱線事故ゲーム</h1>
  
  <canvas id="game-board" width="600" height="400"></canvas>
  
  <script>
    // ゲームの初期化
    const canvas = document.getElementById("game-board");
    const context = canvas.getContext("2d");
    let x = canvas.width / 2;
    let y = canvas.height - 30;
    let dx = 2;
    let dy = -2;
  
    // パドルの初期化
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX = (canvas.width - paddleWidth) / 2;
    let rightPressed = false;
    let leftPressed = false;
  
    // ボールとパドルの衝突判定
    function collisionDetection() {
      if (x + dx > paddleX && x + dx < paddleX + paddleWidth && y + dy > canvas.height - paddleHeight) {
        dy = -dy;
      }
    }
  
    // ゲームの更新と描画
    function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      // ボールの描画
      context.beginPath();
      context.arc(x, y, 10, 0, Math.PI * 2);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
  
      // パドルの描画
      context.beginPath();
      context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      context.fillStyle = "#0095DD";
      context.fill();
      context.closePath();
  
      // ボールの移動
      x += dx;
      y += dy;
  
      // パドルの移動
      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
      }
  
      // ボールの壁との衝突判定
      if (x + dx > canvas.width - 10 || x + dx < 10) {
        dx = -dx;
      }
      if (y + dy < 10) {
        dy = -dy;
      } else if (y + dy > canvas.height - 10) {
        // ボールが画面下部に到達したらゲームオーバー
        alert("ゲームオーバー");
        document.location.reload();
      }
  
      collisionDetection();
      
      requestAnimationFrame(updateGame);
    }
  
    // キーボードの操作
    function keyDownHandler(event) {
      if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = true;
      } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = true;
      }
    }
  
    function keyUpHandler(event) {
      if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = false;
      } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = false;
      }
    }
  
    // タッチ操作
    function touchMoveHandler(event) {
      const touchX = event.touches[0].clientX;
      if (touchX > canvas.width / 2) {
        rightPressed = true;
        leftPressed = false;
      } else {
        rightPressed = false;
        leftPressed = true;
      }
    }
  
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("touchmove", touchMoveHandler, false);
    updateGame();
  </script>
</body>
</html>
```

このプログラムでは、HTML5のCanvasを使用して「脱線事故ゲーム」を実装しています。ボールとパドルの衝突判定や壁との衝突判定を行い、ゲームの進行を制御します。キーボードの操作（左右キー）とタッチ操作にも対応しています。

ゲームが正しく動作するかを確認するには、上記のコードをコピーして任意のテキストエディタに貼り付け、拡張子を「.html」にして保存し、ウェブブラウザで開いてください。その際、スマートフォンの画面で操作することを想定していますので、PC上で開いた場合はデベロッパーツールなどでスマートフォンの表示を模擬するなどの設定が必要かもしれません。