Move the bus to the left or right's game

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

No:1073

154

←

Prev Next

→

Move the bus to the left or right
Developer User3172｜Date and time 23/6/18 1:34:26
Build time 30.327 sec｜Game capacity 2.416KB｜

Script

スコア: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>バスゲーム</title>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<p>スコア: <span id="score">0</span></p>
<script>
// Canvas要素
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

// バス画像
var busImg = new Image();
busImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/198/bus_1f68c.png";
var busX = canvas.width/2 - 25;
var busY = canvas.height - 100;
var busSpeed = 10;

// 炎画像
var fireImg = new Image();
fireImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/198/fire_1f525.png";
var fireX = 0;
var fireY = 0;
var fireSpeed = 5;

// スコア
var score = 0;
var scoreElm = document.getElementById("score");

// 描画
function draw() {
  // Canvasをクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

// バスを描く
  ctx.drawImage(busImg, busX, busY, 50, 50);

// 炎を描く
  ctx.drawImage(fireImg, fireX, fireY, 25, 25);

// スコアを表示
  scoreElm.textContent = score;
}

// 移動
function move() {
  // バスを移動
  if (leftPressed && busX > 0) {
    busX -= busSpeed;
  } else if (rightPressed && busX < canvas.width - 50) {
    busX += busSpeed;
  }

// 炎を移動
  fireY += fireSpeed;

// 炎が画面外に出た場合
  if (fireY > canvas.height) {
    newFire();
  }

// 炎がバスに当たった場合
  if (fireX > busX && fireX < busX + 50 && fireY > busY && fireY < busY + 50) {
    boom();
  }
}

// 炎を新しく表示
function newFire() {
  fireX = Math.floor(Math.random() * (canvas.width - 25));
  fireY = 0 - Math.floor(Math.random() * 100);
  score += 1;
}

// 爆発する
function boom() {
  clearInterval(interval);
  alert("Game Over!");
}

// キー入力
var leftPressed = false;
var rightPressed = false;

document.addEventListener("keydown", function(event) {
  if (event.key == "ArrowLeft") {
    leftPressed = true;
  } else if (event.key == "ArrowRight") {
    rightPressed = true;
  }
});

document.addEventListener("keyup", function(event) {
  if (event.key == "ArrowLeft") {
    leftPressed = false;
  } else if (event.key == "ArrowRight") {
    rightPressed = false;
  }
});

// ゲーム開始
newFire();
var interval = setInterval(function() {
  draw();
  move();
}, 20);

</script>
</body>
</html>