Rainbow-colored galaxy's game | AI game creator

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

No:4277

1934

Rainbow-colored galaxy
Developer User3727｜Date and time 23/6/27 18:46:58
Build time 79.805 sec｜Game capacity 7.116KB｜

こちらの要件に基づき、JavaScriptで実装されたゲームを1枚のHTMLファイルとして作成しました。ゲームは「虹色の銀河系」というタイトルで、スマホで遊ぶことができます。以下にゲームの概要を説明します。【ゲーム概要】プレイヤーは「宇宙船」を操作して、敵の攻撃を回避しながら進んでいくゲームです。宇宙船はスワイプによって動かすことができます。画面上には障害物が表示され、それらを避けていく必要があります。また、敵の攻撃に当たるとダメージを受けます。ライフが尽きるとゲームオーバーとなります。【操作方法】・スマホでプレイする場合：画面をスワイプして宇宙船を動かします。・PCでプレイする場合：矢印キーで移動、スペースキーでショットします。【注意点】・PCでプレイする場合、一部機能が制限されることがあります。・画面上部には現在のスコアと残りライフが表示されます。ゲームの実際のプログラムは以下の通りです。絵文字を含んでいないため、申し訳ありません。

→ 　

0　

0　

　

　

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

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

(C)2023 HisashiApp

こちらの要件に基づき、JavaScriptで実装されたゲームを1枚のHTMLファイルとして作成しました。ゲームは「虹色の銀河系」というタイトルで、スマホで遊ぶことができます。以下にゲームの概要を説明します。

【ゲーム概要】
プレイヤーは「宇宙船」を操作して、敵の攻撃を回避しながら進んでいくゲームです。宇宙船はスワイプによって動かすことができます。画面上には障害物が表示され、それらを避けていく必要があります。また、敵の攻撃に当たるとダメージを受けます。ライフが尽きるとゲームオーバーとなります。

【操作方法】
・スマホでプレイする場合：画面をスワイプして宇宙船を動かします。
・PCでプレイする場合：矢印キーで移動、スペースキーでショットします。

【注意点】
・PCでプレイする場合、一部機能が制限されることがあります。
・画面上部には現在のスコアと残りライフが表示されます。

ゲームの実際のプログラムは以下の通りです。絵文字を含んでいないため、申し訳ありません。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>虹色の銀河系</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background: black;
			text-align: center;
			color: white;
			font-size: 32px;
			font-family: sans-serif;
		}
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>

<canvas></canvas>

<script>
		// 初期設定
		const canvas = document.querySelector('canvas');
		const ctx = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		let score = 0;
		let life = 3;

// 宇宙船の設定
		class Ship {
			constructor() {
				this.x = canvas.width / 2;
				this.y = canvas.height - 100;
				this.color = 'white';
				this.width = 50;
				this.height = 50;
				this.speed = 5;
				this.shotInterval = 0;
			}

draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
			}

move(direction) {
				if (direction === 'left' && this.x > 0) {
					this.x -= this.speed;
				} else if (direction === 'right' && this.x < canvas.width) {
					this.x += this.speed;
				}
			}

shot() {
				if (this.shotInterval === 0) {
					new Shot(this.x, this.y - this.height / 2);
					this.shotInterval = 10;
				}
			}

update() {
				if (this.shotInterval > 0) {
					this.shotInterval--;
				}
			}
		}

// 弾の設定
		class Shot {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.color = 'rgba(255, 255, 255, 0.5)';
				this.radius = 3;
				this.speed = 10;
				this.exist = true;
			}

draw() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			}

move() {
				this.y -= this.speed;
				if (this.y < -this.radius) {
					this.exist = false;
				}
			}
		}

// 障害物と敵の設定
		class Obstacle {
			constructor(x, y, width, height, color, type) {
				this.x = x;
				this.y = y;
				this.width = width;
				this.height = height;
				this.color = color;
				this.type = type;
				this.exist = true;
			}

draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}

move() {
				this.y += 5;
				if (this.y > canvas.height) {
					this.exist = false;
				}
			}

checkCollision(ship) {
				if (this.exist) {
					if (this.type === 'enemy') {
						// 敵と衝突した場合
						if (ship.x - ship.width / 2 < this.x + this.width && ship.x + ship.width / 2 > this.x &&
							ship.y - ship.height / 2 < this.y + this.height && ship.y + ship.height / 2 > this.y) {
							life--;
							this.exist = false;
						}
					} else {
						// 障害物と衝突した場合
						if (ship.x - ship.width / 2 < this.x + this.width && ship.x + ship.width / 2 > this.x &&
							ship.y - ship.height / 2 < this.y + this.height && ship.y + ship.height / 2 > this.y) {
							score++;
							this.exist = false;
						}
					}
				}
			}
		}

const ship = new Ship();
		const obstacles = [];
		let interval = 0;

function drawScore() {
			ctx.fillStyle = 'white';
			ctx.fillText(`SCORE: ${score}`, 20, 40);
		}

function drawLife() {
			ctx.fillStyle = 'white';
			ctx.fillText(`LIFE: ${life}`, canvas.width - 120, 40);
		}

function drawGameOver() {
			ctx.fillStyle = 'white';
			ctx.font = '64px sans-serif';
			ctx.fillText('GAME OVER', canvas.width / 2 - 200, canvas.height / 2);
		}

function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawScore();
			drawLife();

// 宇宙船の描画
			ship.draw();

// 障害物と敵の描画
			if (interval % 100 === 0) {
				const type = Math.random() > 0.5 ? 'obstacle' : 'enemy';
				const ob = new Obstacle(Math.random() * canvas.width, -30, Math.random() * 80 + 20, 30, 'white', type);
				obstacles.push(ob);
			}
			interval++;

obstacles.forEach((obstacle, i) => {
				obstacle.draw();
				obstacle.move();
				obstacle.checkCollision(ship);

if (!obstacle.exist) {
					obstacles.splice(i, 1);
				}
			});

// 弾の描画
			shots.forEach((shot, i) => {
				shot.draw();
				shot.move();

if (!shot.exist) {
					shots.splice(i, 1);
				}
			});

// 宇宙船のアップデート
			ship.update();

// スコアが100以上になったらゲームクリア
			if (score >= 100) {
				alert('GAME CLEAR!');
				location.reload();
			}

// ライフが0になったらゲームオーバー
			if (life <= 0) {
				drawGameOver();
				return;
			}

requestAnimationFrame(loop);
		}

// 宇宙船の操作
		let isTouched = false;
		let touchX = 0;

canvas.addEventListener('touchstart', (e) => {
			isTouched = true;
			touchX = e.touches[0].clientX;
		});

canvas.addEventListener('touchend', () => {
			isTouched = false;
			ship.shot();
		});

canvas.addEventListener('touchmove', (e) => {
			if (isTouched) {
				const touchMoveX = e.touches[0].clientX;
				const direction = touchMoveX > touchX ? 'right' : 'left';
				ship.move(direction);
				touchX = touchMoveX;
			}
		});

// PCでプレイする場合
		let isPressedLeft = false;
		let isPressedRight = false;

document.addEventListener('keydown', (e) => {
			if (e.code === 'ArrowLeft') {
				isPressedLeft = true;
			} else if (e.code === 'ArrowRight') {
				isPressedRight = true;
			}
			ship.move(isPressedLeft ? 'left' : isPressedRight ? 'right' : '');
		});

document.addEventListener('keyup', (e) => {
			if (e.code === 'Space') {
				ship.shot();
			} else if (e.code === 'ArrowLeft') {
				isPressedLeft = false;
			} else if (e.code === 'ArrowRight') {
				isPressedRight = false;
			}
			ship.move(isPressedLeft ? 'left' : isPressedRight ? 'right' : '');
		});

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

</body>
</html>
```