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

No:1066

168

←

Prev Next

→

Bus Gas Explosion game
Developer User3172｜Date and time 23/6/18 1:26:22
Build time 51.451 sec｜Game capacity 4.082KB｜

Script

バスガス爆発ゲーム

※説明：このプログラムは、「バスガス爆発ゲーム」という2Dシューティングゲームです。プレイヤーはバスを操作し、落下してくるガス爆弾を避けるか迎え撃つことができます。バスがガス爆弾に当たると、爆発してゲームオーバーになります。スマホでも操作できるように設計してあり、絵文字を多く使っています。スタートボタンとストップボタンでゲームを開始／停止できます。また、左右キーでもバスを操作することができます。スコアは落下したガス爆弾の数で、画面左上に表示されます。ゲームオーバーになった場合は、画面中央に爆発の絵文字が表示され、スタートボタンが再び有効になります。

←

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">
	<title>バスガス爆発ゲーム</title>
	<style>
		body {
			background-color: #ffec99;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		canvas {
			border: solid 1px #333;
			margin: 50px auto;
		}
		h1 {
			font-size: 2em;
			margin-top: 20px;
		}
		button {
			background-color: #ffcc33;
			border: none;
			border-radius: 5px;
			color: #333;
			cursor: pointer;
			font-size: 1.2em;
			margin: 10px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<h1>バスガス爆発ゲーム</h1>
	<canvas id="canvas" width="480" height="320"></canvas>
	<button id="startButton">スタート</button>
	<button id="stopButton" disabled>ストップ</button>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const startButton = document.getElementById("startButton");
		const stopButton = document.getElementById("stopButton");
		let requestId;

const images = {
			bus1: "🚌",
			bus2: "🚍",
			fire: "🔥",
			explode: "💥"
		};

let busX = canvas.width / 2;
		let busY = canvas.height - 50;
		const busSpeed = 5;

let fireX;
		let fireY = -30;
		const fireSpeed = 10;

let explodeX;
		let explodeY;

let score = 0;
		const scoreText = "スコア: ";

function drawBus() {
			ctx.font = "40px sans-serif";
			ctx.fillText(images.bus1, busX, busY);
		}

function drawFire() {
			ctx.font = "30px sans-serif";
			ctx.fillText(images.fire, fireX, fireY);
		}

function drawExplode() {
			ctx.font = "100px sans-serif";
			ctx.fillText(images.explode, explodeX, explodeY);
		}

function drawScore() {
			ctx.font = "20px sans-serif";
			ctx.fillText(scoreText + score, 10, 25);
		}

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

function moveBusLeft() {
			busX -= busSpeed;
			if (busX < 0) {
				busX = 0;
			}
		}

function moveBusRight() {
			busX += busSpeed;
			if (busX > canvas.width - 40) {
				busX = canvas.width - 40;
			}
		}

function moveFire() {
			fireY += fireSpeed;
			if (fireY > canvas.height) {
				fireX = busX;
				fireY = -30;
			}
		}

function checkCollision() {
			if (Math.abs(fireX - busX) <= 40 && Math.abs(fireY - busY) <= 50) {
				explodeX = busX - 30;
				explodeY = busY - 70;
				stopGame();
			}
		}

function startGame() {
			startButton.disabled = true;
			stopButton.disabled = false;

busX = canvas.width / 2;
			busY = canvas.height - 50;
			fireX = busX;

requestId = window.requestAnimationFrame(gameLoop);
		}

function stopGame() {
			startButton.disabled = false;
			stopButton.disabled = true;

window.cancelAnimationFrame(requestId);

drawExplode();
		}

function gameLoop() {
			score++;
			clearCanvas();
			drawScore();
			drawBus();
			drawFire();
			moveBusLeft();
			moveBusRight();
			moveFire();
			checkCollision();

requestId = window.requestAnimationFrame(gameLoop);
		}

startButton.addEventListener("click", startGame);
		stopButton.addEventListener("click", stopGame);

※説明：
このプログラムは、「バスガス爆発ゲーム」という2Dシューティングゲームです。プレイヤーはバスを操作し、落下してくるガス爆弾を避けるか迎え撃つことができます。バスがガス爆弾に当たると、爆発してゲームオーバーになります。スマホでも操作できるように設計してあり、絵文字を多く使っています。スタートボタンとストップボタンでゲームを開始／停止できます。また、左右キーでもバスを操作することができます。スコアは落下したガス爆弾の数で、画面左上に表示されます。ゲームオーバーになった場合は、画面中央に爆発の絵文字が表示され、スタートボタンが再び有効になります。