A game in which you shoot a lot of radial emoji barrages's game

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

No:191

350

←

Prev Next

→

A game in which you shoot a lot of radial emoji ba..ALL
Developer User2908｜Date and time 23/6/7 11:26:44
Build time 88.072 sec｜Game capacity 4KB｜

Script

to be made.

This game is、The objective is for the player to survive while avoiding the radial emoji barrage. The player moves with the arrow keys. The emoji barrage is randomly generated and、They fly toward the player. If the player is hit by the barrage, the game is over. Pictograms are fire、雷、explosion、I used stars and other things. It works fine on my phone and、The background is black and the pictographs are yellow.

←

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>
	<style>
		body {
			margin: 0;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: black;
		}
		canvas {
			border: 2px solid white;
			background-color: black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		let score = 0;
		let endGame = false;

// 絵文字リスト
		const emojiList = ["🔥", "⚡️", "💥", "🌟"];

// プレイヤー
		const player = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			radius: 20,
			speed: 10
		};

// 絵文字弾幕
		class EmojiBullet {
			constructor(x, y, radius, color, velocity) {
				this.x = x;
				this.y = y;
				this.radius = radius;
				this.color = color;
				this.velocity = velocity;
			}

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

update() {
				this.draw();
				this.x += this.velocity.x;
				this.y += this.velocity.y;
			}
		}

// 絵文字弾幕リスト
		const emojiBullets = [];

// キーダウン時の処理
		window.addEventListener("keydown", function(event) {
			const key = event.code;
			if (key === "ArrowUp") {
				player.y -= player.speed;
			} else if (key === "ArrowDown") {
				player.y += player.speed;
			} else if (key === "ArrowLeft") {
				player.x -= player.speed;
			} else if (key === "ArrowRight") {
				player.x += player.speed;
			}
		});

// ループ処理
		function loop() {
			if (endGame) {
				ctx.fillStyle = "white";
				ctx.font = "30px Arial";
				ctx.textAlign = "center";
				ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
				return;
			}

// 背景を描画
			ctx.fillStyle = "black";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2, false);
			ctx.fillStyle = "white";
			ctx.fill();

// 絵文字弾幕を生成
			if (Math.random() < 0.1) {
				const emoji = emojiList[Math.floor(Math.random() * emojiList.length)];
				const radius = Math.random() * (50 - 10) + 10;
				const x = Math.random() * (canvas.width - radius * 2) + radius;
				const y = Math.random() < 0.5 ? -radius : canvas.height + radius;
				const color = "yellow";
				const angle = Math.atan2(player.y - y, player.x - x);
				const velocity = { x: Math.cos(angle), y: Math.sin(angle) };
				const emojiBullet = new EmojiBullet(x, y, radius, color, velocity);
				emojiBullets.push(emojiBullet);
			}

// 絵文字弾幕を更新
			emojiBullets.forEach(function(emojiBullet, index) {
				// 当たり判定
				const dist = Math.hypot(player.x - emojiBullet.x, player.y - emojiBullet.y);
				if (dist - player.radius - emojiBullet.radius < 1) {
					endGame = true;
				}

// 画面外に出たら削除
				if (emojiBullet.x < -emojiBullet.radius || emojiBullet.x > canvas.width + emojiBullet.radius || emojiBullet.y < -emojiBullet.radius || emojiBullet.y > canvas.height + emojiBullet.radius) {
					emojiBullets.splice(index, 1);
				} else {
					emojiBullet.update();
				}
			});

requestAnimationFrame(loop);
		}

loop();
	</script>
</body>
</html>

このゲームは、プレイヤーが放射状に飛んでくる絵文字弾幕を避けながら生き残ることが目的です。プレイヤーは矢印キーで移動します。絵文字弾幕はランダムに生成され、プレイヤーに向かって飛んできます。プレイヤーが弾幕に当たるとゲームオーバーです。絵文字は火、雷、爆発、星などのものを使用しました。スマホでも正常に動作し、背景は黒色で絵文字は黄色です。