A salesmans game for delivery while escaping from a complainer's game

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

No:1035

134

←

Prev Next

→

A salesmans game for delivery while escaping from ..ALL
Developer User3212｜Date and time 23/6/18 0:23:45
Build time 39.479 sec｜Game capacity 3.674KB｜

Script

営業マンがクレーマーから逃げながら納品を目指すゲームです。

「←」と「→」キーで営業マンを移動させ、クレーマーに当たらないように納品場所まで進んでください。

スコア：0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>クレーマー逃げゲーム</title>
</head>
<body>
  <div id="game">
    <p>営業マンがクレーマーから逃げながら納品を目指すゲームです。</p>
    <p>「←」と「→」キーで営業マンを移動させ、クレーマーに当たらないように納品場所まで進んでください。</p>
    <p id="score">スコア：0</p>
    <canvas id="canvas"></canvas>
  </div>

// ゲームオブジェクト
    const game = {
      score: 0,
      player: {
        x: canvas.width / 2,
        y: canvas.height - 100,
        radius: 50,
      },
      enemy: {
        x: Math.random() * (canvas.width - 100) + 50,
        y: 50,
        radius: 30,
        speed: 5,
      },
      target: {
        x: canvas.width - 100,
        y: canvas.height - 100,
        radius: 50,
      },
      draw: function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText('😎', this.player.x - 20, this.player.y + 20);
        ctx.fillText('😠', this.enemy.x - 15, this.enemy.y + 15);
        ctx.fillText('🏢', this.target.x - 20, this.target.y + 20);
        ctx.beginPath();
        ctx.arc(
          this.player.x,
          this.player.y,
          this.player.radius,
          0,
          Math.PI * 2
        );
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(
          this.enemy.x,
          this.enemy.y,
          this.enemy.radius,
          0,
          Math.PI * 2
        );
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(
          this.target.x,
          this.target.y,
          this.target.radius,
          0,
          Math.PI * 2
        );
        ctx.stroke();
      },
      update: function() {
        // プレイヤーの移動
        if (keys.left) {
          this.player.x -= 10;
        }
        if (keys.right) {
          this.player.x += 10;
        }
        // クレーマーの移動
        if (this.enemy.y < canvas.height) {
          this.enemy.y += this.enemy.speed;
        } else {
          this.enemy.x = Math.random() * (canvas.width - 100) + 50;
          this.enemy.y = 50;
        }
        // 当たり判定
        if (
          Math.sqrt((this.player.x - this.enemy.x) ** 2 + (this.player.y - this.enemy.y) ** 2) <= this.player.radius + this.enemy.radius
        ) {
          alert(`クレーマーに捕まってしまいました！スコア：${this.score}`);
          window.location.reload();
        } else if (
          Math.sqrt((this.player.x - this.target.x) ** 2 + (this.player.y - this.target.y) ** 2) <= this.player.radius + this.target.radius
        ) {
          alert(`納品場所に到着しました！スコア：${this.score}`);
          window.location.reload();
        }
        // スコア更新
        this.score += 1;
        document.getElementById('score').innerHTML = `スコア：${this.score}`;
      },
    };

// キーの監視
    const keys = {};
    document.addEventListener('keydown', e => {
      keys[e.key] = true;
    });
    document.addEventListener('keyup', e => {
      keys[e.key] = false;
    });

// ゲームループ
    function loop() {
      game.update();
      game.draw();
      requestAnimationFrame(loop);
    }
    loop();
  </script>
</body>
</html>