Line Rotating Rainbow,Snake,Random Pictogram's game

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

No:3134

2255

←

Prev Next

→

Line Rotating Rainbow,Snake,Random Pictogram
Developer User3660｜Date and time 23/6/23 23:15:41
Build time 48.675 sec｜Game capacity 4.122KB｜

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>Line Rotation Rainbow Shooting Game</title>
	<style>
		canvas {
			background-color: black;
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

// 設定
		const FPS = 60;
		const CANVAS_WIDTH = window.innerWidth;
		const CANVAS_HEIGHT = window.innerHeight;
		canvas.width = CANVAS_WIDTH;
		canvas.height = CANVAS_HEIGHT;
		let score = 0;

// 絵文字
		const emojis = ["😀", "🤑", "😍", "👻", "🐶", "🍣", "🎉", "🏀"];

// プレイヤー
		class Player {
			constructor() {
				this.x = CANVAS_WIDTH / 2;
				this.y = CANVAS_HEIGHT - 50;
				this.width = 50;
				this.height = 50;
				this.color = "white";
			}
			draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}
			update() {
				// スマホで操作
				// https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
				canvas.addEventListener("touchstart", (e) => {
					const touchX = e.touches[0].clientX;
					if (touchX < CANVAS_WIDTH / 2) {
						this.x -= 20;
					} else {
						this.x += 20;
					}
				});
				canvas.addEventListener("touchmove", (e) => {
					const touchX = e.touches[0].clientX;
					if (touchX < CANVAS_WIDTH / 2) {
						this.x -= 20;
					} else {
						this.x += 20;
					}
				});
			}
		}

// レーザー
		class Laser {
			constructor(x, y, speed, color) {
				this.x = x;
				this.y = y;
				this.width = 5;
				this.height = 20;
				this.speed = speed;
				this.color = color;
			}
			draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}
			update() {
				this.y -= this.speed;
				if (this.y < 0) {
					this.destroy();
				}
			}
			destroy() {
				lasers.splice(lasers.indexOf(this), 1);
			}
		}

// 敵
		class Enemy {
			constructor(x, y, speed, emoji) {
				this.x = x;
				this.y = y;
				this.width = 50;
				this.height = 50;
				this.speed = speed;
				this.emoji = emoji;
			}
			draw() {
				ctx.font = "50px serif";
				ctx.fillText(this.emoji, this.x, this.y);
			}
			update() {
				this.y += this.speed;
				if (this.y > CANVAS_HEIGHT) {
					this.destroy();
				}
			}
			destroy() {
				enemies.splice(enemies.indexOf(this), 1);
			}
		}

// フレームごとの更新
		function update() {
			ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// プレイヤー
			player.draw();
			player.update();

// レーザー
			for (const laser of lasers) {
				laser.draw();
				laser.update();
			}

// 敵
			for (const enemy of enemies) {
				enemy.draw();
				enemy.update();
			}

// 当たり判定
			for (const laser of lasers) {
				for (const enemy of enemies) {
					if (laser.x < enemy.x + enemy.width
						&& laser.x + laser.width > enemy.x
						&& laser.y < enemy.y + enemy.height
						&& laser.y + laser.height > enemy.y) {
						laser.destroy();
						enemy.destroy();
						score++;
					}
				}
			}

// スコア表示
			ctx.fillStyle = "white";
			ctx.font = "30px serif";
			ctx.fillText(score.toString(), 10, 30);

// 1秒ごとに敵を追加
			if (Date.now() - last_enemy_time > 1000) {
				const x = Math.floor(Math.random() * (CANVAS_WIDTH - 50));
				const speed = Math.floor(Math.random() * 10) + 10;
				const emoji = emojis[Math.floor(Math.random() * emojis.length)];
				enemies.push(new Enemy(x, 0, speed, emoji));
				last_enemy_time = Date.now();
			}

// フレームごとに更新
			requestAnimationFrame(update);
		}

// 初期化
		const player = new Player();
		const lasers = [];
		const enemies = [];
		let last_enemy_time = Date.now();
		update();
		
		// レーザーの発射
		canvas.addEventListener("click", (e) => {
			const x = player.x + player.width / 2 - 2;
			const y = player.y - 20;
			const speed = 20;
			const color = "red";
			lasers.push(new Laser(x, y, speed, color));
		});
	</script>
</body>
</html>