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

No:5086

2442

←

Prev Next

→

cat ramen
Developer User3589｜Date and time 23/6/29 17:40:09
Build time 39.448 sec｜Game capacity 3.302KB｜

Script

猫ラーメンというゲームを作成いたします。以下は実際のプログラム例です。

猫ラーメン

このプログラムは、猫がラーメンを追いかけるゲームです。猫はキーボードの矢印キーで移動し、ラーメンをキャッチすることが目的です。画面内に表示される猫を操作して、ラーメンを取りましょう。ラーメンを取ると、新しい位置に再配置されます。キーボード操作が前提ですが、スマートフォンでもゲームを遊ぶことができます。ただし、モバイル端末ではキーボードがないため、代わりに矢印ボタンやスワイプ操作などを用意する必要があります。具体的な方法は、モバイルデバイスを対象としたJavaScriptイベントを使用することで実装可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

猫ラーメンというゲームを作成いたします。以下は実際のプログラム例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>猫ラーメン</title>
</head>
<body>
  <h1>猫ラーメン</h1>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// 猫の初期位置と速度
    var catX = 150;
    var catY = 400;
    var catSpeedX = 0;
    var catSpeedY = 0;

// ラーメンの初期位置
    var ramenX = 140;
    var ramenY = 20;

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

// ゲームの状態更新
    function update() {
      // 猫の位置を更新
      catX += catSpeedX;
      catY += catSpeedY;

// 猫とラーメンの当たり判定
      if (catX < ramenX + 20 &&
          catX + 20 > ramenX &&
          catY < ramenY + 20 &&
          catY + 20 > ramenY) {
        // ラーメンをキャッチした場合の処理
        resetRamen();
      }
    }

// ゲーム画面の描画
    function draw() {
      // 画面をクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// 猫の描画
      ctx.fillStyle = "😺";
      ctx.fillRect(catX, catY, 20, 20);

// ラーメンの描画
      ctx.fillStyle = "🍜";
      ctx.fillRect(ramenX, ramenY, 20, 20);
    }

// キー入力の処理
    document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);

function keyUpHandler(e) {
      if (e.keyCode == 37 || e.keyCode == 39) {
        catSpeedX = 0;  // 左右方向キーを離す
      }
      else if (e.keyCode == 38 || e.keyCode == 40) {
        catSpeedY = 0;  // 上下方向キーを離す
      }
    }

// ラーメンをリセット
    function resetRamen() {
      ramenX = Math.random() * (canvas.width - 20);
      ramenY = Math.random() * (canvas.height - 20);
    }

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

このプログラムは、猫がラーメンを追いかけるゲームです。猫はキーボードの矢印キーで移動し、ラーメンをキャッチすることが目的です。画面内に表示される猫を操作して、ラーメンを取りましょう。ラーメンを取ると、新しい位置に再配置されます。

キーボード操作が前提ですが、スマートフォンでもゲームを遊ぶことができます。ただし、モバイル端末ではキーボードがないため、代わりに矢印ボタンやスワイプ操作などを用意する必要があります。具体的な方法は、モバイルデバイスを対象としたJavaScriptイベントを使用することで実装可能です。