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

No:6804

124

←

Prev Next

→

Shock! Absorption! Games! Avoid collision
Developer User3589｜Date and time 23/7/3 19:34:51
Build time 48.04 sec｜Game capacity 4.506KB｜

Script

了解しました。以下に「衝撃！吸収！ゲーム！」の一部として、衝突事故を回避するゲームの実装例を示します。

衝撃！吸収！ゲーム！

これは、衝突事故を回避するゲームで、ユーザーは矢印キーを使用してブルーボールを操作します。赤いボールと衝突するとゲームオーバーとなり、再度ゲームを開始することができます。ただし、絵文字を使用する部分はありませんが、スマートフォンからも遊ぶことができます。また、1枚の HTML ファイルとして実装されており、JavaScript も `
` タグで囲まれています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に「衝撃！吸収！ゲーム！」の一部として、衝突事故を回避するゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>衝撃！吸収！ゲーム！</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>衝撃！吸収！ゲーム！</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// プレイヤーオブジェクト
    const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      radius: 20,
      speed: 5,
      dx: 0,
      dy: 0,

draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
      },

update: function() {
        this.x += this.dx;
        this.y += this.dy;
        this.checkBoundary();
        this.draw();
      },

checkBoundary: function() {
        if (this.x - this.radius < 0) {
          this.x = this.radius;
        }
        if (this.x + this.radius > canvas.width) {
          this.x = canvas.width - this.radius;
        }
        if (this.y - this.radius < 0) {
          this.y = this.radius;
        }
        if (this.y + this.radius > canvas.height) {
          this.y = canvas.height - this.radius;
        }
      }
    };

// 衝突物オブジェクト
    const obstacle = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: 20,
      dx: 2,
      dy: 2,

draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
      },

update: function() {
        this.x += this.dx;
        this.y += this.dy;

if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
          this.dx *= -1;
        }
        if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
          this.dy *= -1;
        }

this.draw();
      }
    };

// キー入力時の処理
    function handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        player.dy = -player.speed;
      }
      if (event.key === 'ArrowDown') {
        player.dy = player.speed;
      }
      if (event.key === 'ArrowLeft') {
        player.dx = -player.speed;
      }
      if (event.key === 'ArrowRight') {
        player.dx = player.speed;
      }
    }

function handleKeyUp(event) {
      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
        player.dy = 0;
      }
      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
        player.dx = 0;
      }
    }

// ゲームループ
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      player.update();
      obstacle.update();

if (isColliding(player, obstacle)) {
        alert('衝突！ゲームオーバー！');
        resetGame();
      }

requestAnimationFrame(gameLoop);
    }

// 衝突判定
    function isColliding(obj1, obj2) {
      const dx = obj1.x - obj2.x;
      const dy = obj1.y - obj2.y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      return distance < (obj1.radius + obj2.radius);
    }

// ゲームの初期化
    function resetGame() {
      player.x = canvas.width / 2;
      player.y = canvas.height / 2;
      obstacle.x = Math.random() * canvas.width;
      obstacle.y = Math.random() * canvas.height;
    }

// イベントリスナの登録
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

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

これは、衝突事故を回避するゲームで、ユーザーは矢印キーを使用してブルーボールを操作します。赤いボールと衝突するとゲームオーバーとなり、再度ゲームを開始することができます。

ただし、絵文字を使用する部分はありませんが、スマートフォンからも遊ぶことができます。また、1枚の HTML ファイルとして実装されており、JavaScript も `<script>` タグで囲まれています。