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

No:1504

295

←

Prev Next

→

Praise him when he dodges the beam.
Developer sayaensm｜Date and time 23/6/18 17:43:18
Build time 45.541 sec｜Game capacity 4.099KB｜

Script

ご指示いただいた通り、以下のようなビームを避けるゲームのHTMLファイルを実装しました。

ビームを避けろ！

このゲームは、黄色い円で表されるプレイヤーが、赤い円で表されるビームを避けるゲームです。キーボードの矢印キーでプレイヤーを移動させます。プレイヤーがビームに当たると赤くなり、しばらくすると元に戻ります。ビームはランダムな位置から発射され、キャンバスの外に出たり、プレイヤーに当たったりすると消えます。ビームはある確率で発射されます。

←

Prev　Next

→ 　

Back　

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

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

ご指示いただいた通り、以下のようなビームを避けるゲームのHTMLファイルを実装しました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ビームを避けろ！</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: white;
		}
		h1 {
			color: white;
			text-align: center;
			font-size: 3rem;
		}
	</style>
</head>
<body>
	<h1>ビームを避けろ！</h1>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

window.addEventListener("resize", function() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		});

let player = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			size: 50,
			speed: 10,
			color: "yellow"
		};

let beams = [];
		let beamSpeed = 5;

function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = player.color;
			ctx.beginPath();
			ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
			ctx.fill();

for (let i = 0; i < beams.length; i++) {
				ctx.fillStyle = beams[i].color;
				ctx.beginPath();
				ctx.arc(beams[i].x, beams[i].y, beams[i].radius, 0, Math.PI * 2);
				ctx.fill();

let dx = player.x - beams[i].x;
				let dy = player.y - beams[i].y;
				let distance = Math.sqrt(dx * dx + dy * dy);
				if (distance < player.size + beams[i].radius) {
					player.color = "red";
					setTimeout(function() {
						player.color = "yellow";
					}, 500);
					beams.splice(i, 1);
					i--;
					continue;
				}

beams[i].x += dx / distance * beamSpeed;
				beams[i].y += dy / distance * beamSpeed;
				if (beams[i].x - beams[i].radius > canvas.width ||
					beams[i].x + beams[i].radius < 0 ||
					beams[i].y - beams[i].radius > canvas.height ||
					beams[i].y + beams[i].radius < 0) {
					beams.splice(i, 1);
					i--;
				}
			}

if (Math.random() < 0.01) {
				shootBeam();
			}

requestAnimationFrame(gameLoop);
		}

gameLoop();

document.addEventListener("keydown", function(e) {
			switch (e.code) {
				case "ArrowUp":
					movePlayer("up");
					break;
				case "ArrowDown":
					movePlayer("down");
					break;
				case "ArrowLeft":
					movePlayer("left");
					break;
				case "ArrowRight":
					movePlayer("right");
					break;
			}
		});
	</script>
</body>
</html>