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

No:1572

4597

One more push and the power will be meteo!
Developer User3025｜Date and time 23/6/18 18:43:16
Build time 50.912 sec｜Game capacity 6.493KB｜

以下が1枚のhtmlファイルで実装されたゲームの例です。

Meteo Power

このゲームでは、隕石が地球に向かって飛んでくるので、それを撃墜してください！

左右の矢印キーで移動、スペースキーでショット、Pキーでポーズ

現在の得点：0

現在の残機：3

このゲームは「Meteo Power」という名前のシューティングゲームです。プレイヤーは矢印キーで移動し、スペースキーでショットを打ちます。隕石が地球に向かって飛んでくるので、それを撃墜することが目的です。隕石を撃墜すると10点、プレイヤーに当たると残機が1つ減ります。残機が0になるとゲームオーバーです。なるべくスマホで操作できるように、矢印キーやスペースキーを使用しています。絵文字はあまり使えませんが、色やフォントサイズの変更によって見やすさを意識しました。

→ 　

4　

4　

　

　
　

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

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

(C)2023 HisashiApp

以下が1枚のhtmlファイルで実装されたゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>Meteo Power</title>
</head>
<body>
	<h1>Meteo Power</h1>
	<p>このゲームでは、隕石が地球に向かって飛んでくるので、それを撃墜してください！</p>
	<canvas id="canvas" width="400" height="600"></canvas>
	<p>左右の矢印キーで移動、スペースキーでショット、Pキーでポーズ</p>
	<p>現在の得点：<span id="score">0</span></p>
	<p>現在の残機：<span id="lives">3</span></p>

<script>
		// ゲームの設定
		let config = {
			width: 400,
			height: 600,
			playerSpeed: 5,
			bulletSpeed: 8,
			meteors: [],
			maxMeteors: 10,
			score: 0,
			lives: 3,
			gameOver: false
		};

// キャンバスとコンテキストの取得
		let canvas = document.getElementById('canvas');
		let ctx = canvas.getContext('2d');

// プレイヤーの設定
		let player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			width: 30,
			height: 30,
			color: 'yellow',
			bullets: [],
			canShoot: true
		};

// 隕石の生成
		function createMeteor() {
			let meteor = {
				x: Math.random() * canvas.width,
				y: 0,
				radius: 25 + Math.random() * 25,
				color: 'gray',
				speed: 1 + Math.random() * 5
			};
			config.meteors.push(meteor);
		}

// 隕石の移動と衝突判定
		function updateMeteors() {
			for (let i = 0; i < config.meteors.length; i++) {
				let meteor = config.meteors[i];
				meteor.y += meteor.speed;

// プレイヤーとの衝突判定
				if (!config.gameOver && checkCollision(meteor, player)) {
					playerHit();
					config.meteors.splice(i, 1);
					i--;
					continue;
				}

// 弾との衝突判定
				for (let j = 0; j < player.bullets.length; j++) {
					let bullet = player.bullets[j];
					if (checkCollision(meteor, bullet)) {
						config.score += 10;
						config.meteors.splice(i, 1);
						player.bullets.splice(j, 1);
						i--;
						break;
					}
				}

// 画面外に出たら削除
				if (meteor.y > canvas.height + meteor.radius) {
					config.meteors.splice(i, 1);
					i--;
				}
			}
		}

// プレイヤーの移動と弾の生成・移動
		function updatePlayer() {
			if (rightPressed && player.x + player.width < canvas.width) {
				player.x += config.playerSpeed;
			}
			else if (leftPressed && player.x > 0) {
				player.x -= config.playerSpeed;
			}

if (spacePressed && player.canShoot && player.bullets.length < 3) {
				shoot();
			}

for (let i = 0; i < player.bullets.length; i++) {
				let bullet = player.bullets[i];
				bullet.y -= config.bulletSpeed;

// 画面外に出たら削除
				if (bullet.y < 0) {
					player.bullets.splice(i, 1);
					i--;
				}
			}

// 弾を発射できるまでのクールダウン
			if (!player.canShoot) {
				player.cooldown--;
				if (player.cooldown <= 0) {
					player.canShoot = true;
					player.cooldown = 5;
				}
			}
		}

// 弾を生成
		function shoot() {
			let bullet = {
				x: player.x + player.width / 2,
				y: player.y,
				width: 5,
				height: 15,
				color: 'red'
			};
			player.bullets.push(bullet);
			player.canShoot = false;
			player.cooldown = 5;
		}

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

// プレイヤーが隕石に当たった時の処理
		function playerHit() {
			config.lives--;
			if (config.lives <= 0) {
				config.gameOver = true;
			}
		}

// ゲームループ
		function loop() {
			if (!config.gameOver) {
				ctx.clearRect(0, 0, canvas.width, canvas.height);

updateMeteors();
				updatePlayer();

// 隕石の生成
				if (config.meteors.length < config.maxMeteors) {
					createMeteor();
				}

// プレイヤーの描画
				ctx.fillStyle = player.color;
				ctx.fillRect(player.x, player.y, player.width, player.height);

// 弾の描画
				for (let i = 0; i < player.bullets.length; i++) {
					let bullet = player.bullets[i];
					ctx.fillStyle = bullet.color;
					ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
				}

// 隕石の描画
				for (let i = 0; i < config.meteors.length; i++) {
					let meteor = config.meteors[i];
					ctx.fillStyle = meteor.color;
					ctx.beginPath();
					ctx.arc(meteor.x, meteor.y, meteor.radius, 0, Math.PI * 2);
					ctx.fill();
				}

// 得点と残機の表示
				document.getElementById('score').innerHTML = config.score;
				document.getElementById('lives').innerHTML = config.lives;

// ゲーム続行
				requestAnimationFrame(loop);
			}
			else {
				// ゲームオーバーの表示
				ctx.fillStyle = 'black';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.fillStyle = 'white';
				ctx.font = '50px Arial';
				ctx.textAlign = 'center';
				ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2);
				ctx.font = '30px Arial';
				ctx.fillText('Final Score: ' + config.score, canvas.width / 2, canvas.height / 2 + 50);
			}
		}

// キー操作の設定
		let rightPressed = false;
		let leftPressed = false;
		let spacePressed = false;
		document.addEventListener('keydown', function(e) {
			if (e.keyCode == 39) {
				rightPressed = true;
			}
			else if (e.keyCode == 37) {
				leftPressed = true;
			}
			else if (e.keyCode == 32) {
				spacePressed = true;
			}
			else if (e.keyCode == 80) {
				config.gameOver = true;
			}
		});
		document.addEventListener('keyup', function(e) {
			if (e.keyCode == 39) {
				rightPressed = false;
			}
			else if (e.keyCode == 37) {
				leftPressed = false;
			}
			else if (e.keyCode == 32) {
				spacePressed = false;
			}
		});

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

このゲームは「Meteo Power」という名前のシューティングゲームです。プレイヤーは矢印キーで移動し、スペースキーでショットを打ちます。隕石が地球に向かって飛んでくるので、それを撃墜することが目的です。隕石を撃墜すると10点、プレイヤーに当たると残機が1つ減ります。残機が0になるとゲームオーバーです。なるべくスマホで操作できるように、矢印キーやスペースキーを使用しています。絵文字はあまり使えませんが、色やフォントサイズの変更によって見やすさを意識しました。