Coffee Instructor Level 1's game

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

No:4360

2226

←

Prev Next

→

Coffee Instructor Level 1
Developer もちきなこ｜Date and time 23/6/27 20:41:15
Build time 44.798 sec｜Game capacity 4.05KB｜

Script

了解しました。以下、スマホ操作前提のゲームのサンプルを作成いたしました。

←

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>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		// ゲームのステータスを管理するクラス
		class Game {
			constructor() {
				this.canvas = document.getElementById('canvas');
				this.ctx = this.canvas.getContext('2d');
				this.score = 0;
				this.isGameOver = false;
				this.isStarted = false;
				this.intervalId = null;
				this.player = new Player(this.canvas.width / 2, this.canvas.height - 50);
				this.enemies = [];
			}

start() {
				this.isStarted = true;
				
				// 敵を生成する
				this.intervalId = setInterval(() => {
					if (Math.random() < 0.5) {
						this.enemies.push(new Enemy(Math.random() * this.canvas.width, 0));
					}
				}, 1000);

// ゲームループ開始
				requestAnimationFrame(this.gameLoop.bind(this));
			}

gameLoop() {
				this.update();
				this.draw();

if (!this.isGameOver) {
					requestAnimationFrame(this.gameLoop.bind(this));
				}
			}

update() {
				// 自機の移動
				this.player.update();

// 敵の移動
				this.enemies.forEach(enemy => {
					enemy.update();
					
					// 自機と敵の衝突判定
					if (this.isColliding(this.player, enemy)) {
						this.isGameOver = true;
						alert('ゲームオーバー！ スコア：' + this.score);
					}
					
					// 画面外に出た敵の削除
					if (enemy.y > this.canvas.height) {
						this.enemies.splice(this.enemies.indexOf(enemy), 1);
					}
				});

// スコアの更新
				this.score += 1;
			}

draw() {
				// 背景
				this.ctx.fillStyle = 'white';
				this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

// スコア
				this.ctx.fillStyle = 'black';
				this.ctx.font = '24px Arial';
				this.ctx.fillText('Score: ' + this.score, 10, 30);

// 自機
				this.player.draw();

// 敵
				this.enemies.forEach(enemy => enemy.draw());
			}

isColliding(obj1, obj2) {
				const dx = obj1.x - obj2.x;
				const dy = obj1.y - obj2.y;
				const distance = Math.sqrt(dx * dx + dy * dy);
				return distance < obj1.radius + obj2.radius;
			}

handleClick() {
				if (!this.isStarted) {
					this.start();
				} else if (this.isGameOver) {
					this.restart();
				}
			}

restart() {
				this.score = 0;
				this.isGameOver = false;
				this.player = new Player(this.canvas.width / 2, this.canvas.height - 50);
				this.enemies = [];
				clearInterval(this.intervalId);
				this.start();
			}
		}

// 自機のクラス
		class Player {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.radius = 20;
				this.color = 'blue';
			}

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

update() {
				if (this.x < 0) {
					this.x = 0;
				} else if (this.x > game.canvas.width) {
					this.x = game.canvas.width;
				}
			}
		}

// 敵のクラス
		class Enemy {
			constructor(x, y) {
				this.x = x;
				this.y = y;
				this.radius = 10;
				this.color = 'red';
				this.speed = 5;
			}

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

update() {
				this.y += this.speed;
			}
		}

const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const game = new Game();

// ボタンクリックでゲーム開始またはリスタート
		document.addEventListener('click', () => game.handleClick());

// スマホのタップで自機を動かす
		canvas.addEventListener('touchstart', e => {
			const touch = e.touches[0];
			game.player.x = touch.pageX - canvas.offsetLeft;
		});

canvas.addEventListener('touchmove', e => {
			const touch = e.touches[0];
			game.player.x = touch.pageX - canvas.offsetLeft;
		});
	</script>
</body>
</html>