赤が青から逃げる's game

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

No:14490

←

Prev Next

→

赤が青から逃げる
Developer User6248｜Date and time 23/9/2 14:19:44
Build time 26.463 sec｜Game capacity 2.963KB｜

Script

了解です。以下にHTMLファイルの実装例を示します。

このゲームでは、赤い円がキャンバス内を操作可能で、青い円を避けることが目的です。矢印キーを使用して移動します。赤い円が青い円と接触するとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です。以下にHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>赤が青から逃げるゲーム</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

const PLAYER_RADIUS = 20;
    const PLAYER_SPEED = 5;
    const ENEMY_RADIUS = 10;
    const ENEMY_SPEED = 2;

let playerX = canvas.width / 2;
    let playerY = canvas.height / 2;
    let leftKeyPressed = false;
    let rightKeyPressed = false;
    let upKeyPressed = false;
    let downKeyPressed = false;

let enemyX = Math.random() * (canvas.width - 2 * ENEMY_RADIUS) + ENEMY_RADIUS;
    let enemyY = Math.random() * (canvas.height - 2 * ENEMY_RADIUS) + ENEMY_RADIUS;

function drawPlayer() {
      ctx.beginPath();
      ctx.arc(playerX, playerY, PLAYER_RADIUS, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

function drawEnemy() {
      ctx.beginPath();
      ctx.arc(enemyX, enemyY, ENEMY_RADIUS, 0, Math.PI * 2);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (leftKeyPressed) {
        playerX -= PLAYER_SPEED;
      }
      if (rightKeyPressed) {
        playerX += PLAYER_SPEED;
      }
      if (upKeyPressed) {
        playerY -= PLAYER_SPEED;
      }
      if (downKeyPressed) {
        playerY += PLAYER_SPEED;
      }

drawPlayer();
      drawEnemy();

if (playerX + PLAYER_RADIUS > enemyX - ENEMY_RADIUS &&
          playerX - PLAYER_RADIUS < enemyX + ENEMY_RADIUS &&
          playerY + PLAYER_RADIUS > enemyY - ENEMY_RADIUS &&
          playerY - PLAYER_RADIUS < enemyY + ENEMY_RADIUS) {
        alert("Game Over");
        clearInterval(gameLoop);
      }
    }

const gameLoop = setInterval(update, 10);
  </script>
</body>
</html>
```