A game about avoiding a crazy barrage of bullets's game

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

No:961

247

←

Prev Next

→

A game about avoiding a crazy barrage of bullets
Developer User3198｜Date and time 23/6/17 23:15:14
Build time 44.954 sec｜Game capacity 3.726KB｜

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>Bullet Dodger</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// ゲームの設定
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		const playerRadius = 30;
		const projectileRadius = 10;
		const playerColor = '👾';
		const projectileColor = '💥';
		const projectileSpeed = 4;
		const projectileInterval = 1000;
		const acceleration = 0.1;
		const maxSpeed = 10;
		let projectiles = [];
		let player = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			dx: 0,
			dy: 0
		};
		let score = 0;

// ユーザーの入力
		let touchDown = false;
		function handleTouchDown() {
			touchDown = true;
		}
		function handleTouchUp() {
			touchDown = false;
		}
		addEventListener('touchstart', handleTouchDown);
		addEventListener('touchend', handleTouchUp);
		addEventListener('touchcancel', handleTouchUp);
		addEventListener('touchleave', handleTouchUp);

function handleMouseMove(e) {
			player.x = e.clientX;
			player.y = e.clientY;
		}
		addEventListener('mousemove', handleMouseMove);

// ゲームの状態を更新する
		function update() {
			// プレイヤーの移動
			if (touchDown) {
				let angle = Math.atan2(player.y - touches[0].clientY, player.x - touches[0].clientX);
				player.dx += -acceleration * Math.cos(angle);
				player.dy += -acceleration * Math.sin(angle);
			} else {
				player.dx *= 0.9;
				player.dy *= 0.9;
			}
			player.x += player.dx;
			player.y += player.dy;
			if (player.dx > maxSpeed) player.dx = maxSpeed;
			if (player.dy > maxSpeed) player.dy = maxSpeed;

// 弾幕の発射
			if (Math.random() < 0.01) {
				let angle = Math.random() * Math.PI * 2;
				let dx = projectileSpeed * Math.cos(angle);
				let dy = projectileSpeed * Math.sin(angle);
				projectiles.push({
					x: player.x,
					y: player.y,
					dx: dx,
					dy: dy
				});
			}

// 弾幕の移動
			for (let i = projectiles.length - 1; i >= 0; i--) {
				let projectile = projectiles[i];
				projectile.x += projectile.dx;
				projectile.y += projectile.dy;

if (projectile.x < 0 || projectile.x > canvas.width || projectile.y < 0 || projectile.y > canvas.height) {
					projectiles.splice(i, 1);
					continue;
				}

if (Math.sqrt(Math.pow(projectile.x - player.x, 2) + Math.pow(projectile.y - player.y, 2)) < playerRadius + projectileRadius) {
					alert(`Game over! Score: ${score}`);
					location.reload();
					return;
				}
			}

score++;
		}

// ゲーム画面を描画する
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 弾幕を描画する
			projectiles.forEach(projectile => {
				ctx.fillStyle = projectileColor;
				ctx.beginPath();
				ctx.arc(projectile.x, projectile.y, projectileRadius, 0, Math.PI * 2, false);
				ctx.fill();
			});

// プレイヤーを描画する
			ctx.font = `${playerRadius}px serif`;
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillStyle = playerColor;
			ctx.fillText(playerColor, player.x, player.y);
			ctx.strokeStyle = 'black';
			ctx.lineWidth = 1;
			ctx.beginPath();
			ctx.arc(player.x, player.y, playerRadius, 0, Math.PI * 2, false);
			ctx.stroke();

// スコアを描画する
			ctx.font = '16px sans-serif';
			ctx.fillStyle = 'black';
			ctx.textAlign = 'left';
			ctx.fillText(`Score: ${score}`, 10, 30);

requestAnimationFrame(draw);
		}

// ゲームを開始する
		setInterval(update, 16);
		requestAnimationFrame(draw);
	</script>
</body>
</html>