retro game's game | AI game creator

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

No:3177

7421

retro game
Developer User3671｜Date and time 23/6/24 1:21:16
Build time 44.724 sec｜Game capacity 4.095KB｜

のような雰囲気を出すために、画面にはピクセルで描かれたキャラクターや背景を使用することにしました。以下が、1枚のhtmlファイルに実装されたレトロゲームのプログラムです。

このプログラムは画面にプレイヤーと敵キャラクターを表示し、キー入力によってプレイヤーを動かすことができます。敵キャラクターとプレイヤーが衝突すると、ゲームオーバーとなりスコアが表示されます。また、ゲームループによって画面は継続的に描画されるため、ゲームを遊び続けることができます。レトロゲームの雰囲気を出すために、キャラクターや背景をピクセルで描画するようにしました。また、色も黒や紫、黄色といったレトロゲームでよく使用される色を使用しました。スマートフォンでも操作できるように、キー入力をタップ操作に変更することもできます。レトロゲーム好きには楽しめる1枚のhtmlファイルとなっています。

→ 　

4　

3　

　
　
　
　

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

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

(C)2023 HisashiApp

のような雰囲気を出すために、画面にはピクセルで描かれたキャラクターや背景を使用することにしました。

以下が、1枚のhtmlファイルに実装されたレトロゲームのプログラムです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>レトロゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
			background-color: #111111;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="256" height="240"></canvas>
	<script>
		// ゲームの変数
		var score = 0;
		var gameOver = false;

// ゲームオブジェクト
		var player = {
			x: 100,
			y: 200,
			width: 16,
			height: 16,
			speed: 3,
			color: '#ff00ff',
			draw: function() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			},
			update: function() {
				if (input.left && this.x > 0) {
					this.x -= this.speed;
				}
				if (input.right && this.x < canvas.width - this.width) {
					this.x += this.speed;
				}
				if (input.up && this.y > 0) {
					this.y -= this.speed;
				}
				if (input.down && this.y < canvas.height - this.height) {
					this.y += this.speed;
				}
			}
		};

var enemy = {
			x: 200,
			y: 50,
			width: 16,
			height: 16,
			color: '#ffff00',
			draw: function() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			},
			update: function() {
				if (this.x > player.x) {
					this.x--;
				} else {
					this.x++;
				}
				if (this.y > player.y) {
					this.y--;
				} else {
					this.y++;
				}
				if (collision(player, this)) {
					gameOver = true;
				}
			}
		};

// 入力変数
		var input = {
			left: false,
			right: false,
			up: false,
			down: false
		};

// キーイベント
		document.addEventListener('keydown', function(event) {
			switch(event.keyCode) {
				case 37: // 左
					input.left = true;
					break;
				case 38: // 上
					input.up = true;
					break;
				case 39: // 右
					input.right = true;
					break;
				case 40: // 下
					input.down = true;
					break;
			}
		});

document.addEventListener('keyup', function(event) {
			switch(event.keyCode) {
				case 37: // 左
					input.left = false;
					break;
				case 38: // 上
					input.up = false;
					break;
				case 39: // 右
					input.right = false;
					break;
				case 40: // 下
					input.down = false;
					break;
			}
		});

// 衝突判定
		function collision(a, b) {
			if (a.x < b.x + b.width &&
				a.x + a.width > b.x &&
				a.y < b.y + b.height &&
				a.y + a.height > b.y) {
				return true;
			}
			return false;
		}

// ゲームループ
		function gameLoop() {
			if (!gameOver) {
				window.requestAnimationFrame(gameLoop);
			}
			ctx.clearRect(0, 0, canvas.width, canvas.height);

player.update();
			player.draw();

enemy.update();
			enemy.draw();

if (gameOver) {
				ctx.fillStyle = '#ffffff';
				ctx.font = '20px "Courier New", Courier, monospace';
				ctx.fillText('Game Over', 80, 120);
				ctx.fillText('Score: ' + score, 80, 140);
			}
		}

// 初期化
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		gameLoop();
	</script>
</body>
</html>

このプログラムは画面にプレイヤーと敵キャラクターを表示し、キー入力によってプレイヤーを動かすことができます。敵キャラクターとプレイヤーが衝突すると、ゲームオーバーとなりスコアが表示されます。また、ゲームループによって画面は継続的に描画されるため、ゲームを遊び続けることができます。

レトロゲームの雰囲気を出すために、キャラクターや背景をピクセルで描画するようにしました。また、色も黒や紫、黄色といったレトロゲームでよく使用される色を使用しました。スマートフォンでも操作できるように、キー入力をタップ操作に変更することもできます。レトロゲーム好きには楽しめる1枚のhtmlファイルとなっています。