横スクロールゲームで、カニが南の島を進んでいく。エビが攻撃してくる。カニのお姫様に出会えれば勝ち。's game

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

No:43162

←

Prev Next

→

横スクロールゲームで、カニが南の島を進んでいく。エビが攻撃してくる。カニのお姫様に出会えれば勝ち。
Developer User19111｜Date and time 24/2/14 14:57:35
Build time 15.868 sec｜Game capacity 4.128KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カニゲーム</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { background-color: #3b5998; display: block; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="500"></canvas>

// キャラクターの準備
    const crab = {
      x: 50,
      y: canvas.height / 2,
      width: 50,
      height: 50,
      speed: 5,
      dx: 0,
      dy: 0
    };

const princess = {
      x: canvas.width - 100,
      y: canvas.height / 2,
      width: 50,
      height: 50
    };

const shrimp = {
      x: canvas.width,
      y: canvas.height / 2,
      width: 50,
      height: 50,
      speed: 7
    };

let isGameOver = false;
    let score = 0;

// ゲームオーバー画面の表示
    function showGameOverScreen() {
      ctx.fillStyle = "#000";
      ctx.font = "30px sans-serif";
      ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
    }

// キャンバスのクリア
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// キャラクターの描画
    function drawCharacter(x, y, width, height, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }

// キャンバスの更新
    function updateCanvas() {
      if (isGameOver) {
        showGameOverScreen();
        return;
      }

clearCanvas();

// キャラクターの移動
      crab.x += crab.dx;
      crab.y += crab.dy;

// カニの描画
      drawCharacter(crab.x, crab.y, crab.width, crab.height, "#F1C40F");

// エビの描画
      shrimp.x -= shrimp.speed;
      drawCharacter(shrimp.x, shrimp.y, shrimp.width, shrimp.height, "#FF0000");

// お姫様の描画
      drawCharacter(princess.x, princess.y, princess.width, princess.height, "#FFC0CB");

// 壁に衝突したらゲームオーバー
      if (
        crab.x + crab.width > canvas.width ||
        crab.x < 0 ||
        crab.y + crab.height > canvas.height ||
        crab.y < 0
      ) {
        isGameOver = true;
      }

// エビとの衝突判定
      if (
        crab.x < shrimp.x + shrimp.width &&
        crab.x + crab.width > shrimp.x &&
        crab.y < shrimp.y + shrimp.height &&
        crab.y + crab.height > shrimp.y
      ) {
        score += 1;
        shrimp.x = canvas.width;
        shrimp.y = Math.random() * (canvas.height - shrimp.height);
      }

// お姫様との衝突判定
      if (
        crab.x < princess.x + princess.width &&
        crab.x + crab.width > princess.x &&
        crab.y < princess.y + princess.height &&
        crab.y + crab.height > princess.y
      ) {
        isGameOver = true;
        // ゲームクリア画面の表示
        ctx.fillStyle = "#000";
        ctx.font = "30px sans-serif";
        ctx.fillText("Game Clear!!", canvas.width / 2 - 80, canvas.height / 2);
      }

requestAnimationFrame(updateCanvas);
    }

// キャラクターの移動処理
    function moveCharacter(e) {
      switch (e.key) {
        case "ArrowUp":
          crab.dy = -crab.speed;
          break;
        case "ArrowDown":
          crab.dy = crab.speed;
          break;
        case "ArrowLeft":
          crab.dx = -crab.speed;
          break;
        case "ArrowRight":
          crab.dx = crab.speed;
          break;
        default:
          break;
      }
    }

// キャラクターの停止処理
    function stopCharacter(e) {
      if (
        e.key === "ArrowUp" ||
        e.key === "ArrowDown" ||
        e.key === "ArrowLeft" ||
        e.key === "ArrowRight"
      ) {
        crab.dx = 0;
        crab.dy = 0;
      }
    }

// イベントリスナーの設定
    window.addEventListener("keydown", moveCharacter);
    window.addEventListener("keyup", stopCharacter);

// ゲームの開始
    updateCanvas();
  </script>
</body>
</html>