教師ゲーム犬ゲーム料理ゲーム運転ゲーム's game

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

No:15119

←

Prev Next

→

教師ゲーム犬ゲーム料理ゲーム運転ゲーム
Developer User6485｜Date and time 23/9/6 8:05:51
Build time 49.883 sec｜Game capacity 4.025KB｜

Script

了解しました。運転ゲームを作成します。以下に実装例を示します。

スコア: 0

上記のHTMLファイルは、スマホで遊べる運転ゲームであり、JavaScriptを使用して動作しています。canvas要素を使用してゲーム画面を表示し、車が障害物を避けるゲームです。車は左右に移動可能で、障害物に接触するとゲームオーバーとなります。スコアも表示され、ゲームオーバー時には文字が表示されます。実行するとゲームを遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。運転ゲームを作成します。以下に実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>運転ゲーム</title>
</head>
<body>
<p id="score">スコア: 0</p>
<canvas id="gameCanvas" width="400" height="600" style="border:1px solid #000000;"></canvas>

// 車のオブジェクト
function Car() {
  this.x = canvas.width / 2;
  this.y = canvas.height - 80;
  this.width = 50;
  this.height = 100;
  this.moveLeft = false;
  this.moveRight = false;

this.draw = function() {
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

this.update = function() {
    if (this.moveLeft && this.x > 0) {
      this.x -= 5;
    }
    if (this.moveRight && this.x < canvas.width - this.width) {
      this.x += 5;
    }

for (var i = 0; i < obstacleList.length; i++) {
      if (this.collisionDetection(obstacleList[i])) {
        gameover = true;
      }
    }

if (!gameover) {
      score++;
      document.getElementById("score").textContent = "スコア: " + score;
    }
  }

this.collisionDetection = function(obstacle) {
    if (this.x < obstacle.x + obstacle.width &&
        this.x + this.width > obstacle.x &&
        this.y < obstacle.y + obstacle.height &&
        this.y + this.height > obstacle.y) {
      return true;
    }
    return false;
  }
}

// 障害物のオブジェクト
function Obstacle(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

this.draw = function() {
    ctx.fillStyle = "#000000";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

this.update = function() {
    this.y += 5;
    if (this.y > canvas.height) {
      this.reset();
    }
  }

this.reset = function() {
    this.x = Math.random() * canvas.width;
    this.y = -100;
    this.width = 50 + Math.random() * 100;
    this.height = 10 + Math.random() * 20;
  }
}

// ゲームの初期化
function init() {
  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext("2d");
  car = new Car();

document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);

for (var i = 0; i < 5; i++) {
    var obstacle = new Obstacle(Math.random() * canvas.width, -100 * i, 50 + Math.random() * 100, 10 + Math.random() * 20);
    obstacleList.push(obstacle);
  }

setInterval(gameLoop, 10);
}

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

car.draw();
  car.update();

for (var i = 0; i < obstacleList.length; i++) {
    var obstacle = obstacleList[i];
    obstacle.draw();
    obstacle.update();
  }

if (gameover) {
    ctx.font = "30px Arial";
    ctx.fillText("ゲームオーバー", canvas.width / 2 - 100, canvas.height / 2);
  }
}

// キーが押された時のイベントハンドラ
function keyDownHandler(e) {
  if (e.key == "Left" || e.key == "ArrowLeft") {
    car.moveLeft = true;
  } else if (e.key == "Right" || e.key == "ArrowRight") {
    car.moveRight = true;
  }
}

// キーが離された時のイベントハンドラ
function keyUpHandler(e) {
  if (e.key == "Left" || e.key == "ArrowLeft") {
    car.moveLeft = false;
  } else if (e.key == "Right" || e.key == "ArrowRight") {
    car.moveRight = false;
  }
}

// ゲームの初期化を実行
init();
</script>
</body>
</html>
```