AI game creator

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

No:132

443

←

Prev Next

→

Reflection Laser
Developer ひさひさ｜Date and time 23/5/24 1:09:26
Build time 254.707 sec｜Game capacity 5.023KB｜

Script

Game Summary: The objective of the game is for the player to defeat all enemies by reflecting lasers. When the player fires a laser、Lasers travel by reflecting off walls and enemies. However、When the laser hits the player、The game is over. The following is a list of、Here is an example of a game containing JavaScript implemented in a single html file.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

ゲーム概要：プレイヤーはレーザーを反射して全ての敵を倒すことが目的です。プレイヤーがレーザーを発射すると、レーザーは壁や敵に反射して移動します。しかし、レーザーがプレイヤーに当たると、ゲームオーバーとなります。

以下が、1枚のhtmlファイルに実装されたJavaScriptを含むゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>反射レーザー</title>
	<style>
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="500"></canvas>
	<script>
		// 初期設定
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let ball = {x: 150, y: 450, r: 10, dx: 0, dy: 0};
		let walls = [
			{x1: 10, y1: 10, x2: 290, y2: 10},
			{x1: 10, y1: 10, x2: 10, y2: 490},
			{x1: 10, y1: 490, x2: 290, y2: 490},
			{x1: 290, y1: 10, x2: 290, y2: 490},
			{x1: 100, y1: 100, x2: 200, y2: 200},
			{x1: 100, y1: 400, x2: 200, y2: 300},
		];
		let enemies = [
			{x: 50, y: 50},
			{x: 250, y: 450},
			{x: 150, y: 250},
		];
		let lasers = [];
		let score = 0;

// レーザー発射
		function fire() {
			lasers.push({x: ball.x, y: ball.y, dx: ball.dx, dy: ball.dy});
		}

// レーザー移動
		function moveLasers() {
			for (let i = 0; i < lasers.length; i++) {
				let laser = lasers[i];
				laser.x += laser.dx;
				laser.y += laser.dy;
			}
		}

// レーザーと壁の衝突判定
		function handleWallCollision(laser) {
			for (let i = 0; i < walls.length; i++) {
				let wall = walls[i];
				let point = getIntersection(laser.x, laser.y, laser.x+5*laser.dx, laser.y+5*laser.dy,
					wall.x1, wall.y1, wall.x2, wall.y2);
				if (point) {
					laser.dx = -laser.dx;
					laser.dy = -laser.dy;
				}
			}
		}

// レーザーと敵の衝突判定
		function handleEnemyCollision(laser) {
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				if (Math.sqrt(Math.pow(enemy.x-laser.x, 2) + Math.pow(enemy.y-laser.y, 2)) < 15) {
					score++;
					enemies.splice(i, 1);
					lasers.splice(lasers.indexOf(laser), 1);
				}
			}
		}

// レーザーとボールの衝突判定
		function handleBallCollision(laser) {
			if (Math.sqrt(Math.pow(laser.x-ball.x, 2) + Math.pow(laser.y-ball.y, 2)) < ball.r) {
				alert("Game over!");
				location.reload();
			}
		}

// 衝突判定
		function handleCollisions() {
			for (let i = lasers.length-1; i >= 0; i--) {
				let laser = lasers[i];
				handleWallCollision(laser);
				handleEnemyCollision(laser);
				handleBallCollision(laser);
			}
		}

// 交点を求める
		function getIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
			let d = (y4-y3)*(x2-x1)-(x4-x3)*(y2-y1);
			if (d == 0) return false;
			let u = ((x4-x3)*(y1-y3)-(y4-y3)*(x1-x3)) / d;
			let v = ((x2-x1)*(y1-y3)-(y2-y1)*(x1-x3)) / d;
			if (u < 0 || u > 1) return false;
			if (v < 0 || v > 1) return false;
			let x = x1 + u*(x2-x1);
			let y = y1 + u*(y2-y1);
			return {x:x, y:y};
		}

// 描画
		function draw() {
			// 背景を描画
			ctx.fillStyle = "#eee";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			// 壁を描画
			ctx.strokeStyle = "#222";
			ctx.lineWidth = 10;
			for (let i = 0; i < walls.length; i++) {
				let wall = walls[i];
				ctx.beginPath();
				ctx.moveTo(wall.x1, wall.y1);
				ctx.lineTo(wall.x2, wall.y2);
				ctx.stroke();
			}
			// 敵を描画
			ctx.fillStyle = "#f00";
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				ctx.beginPath();
				ctx.arc(enemy.x, enemy.y, 15, 0, 2*Math.PI);
				ctx.fill();
			}
			// ボールを描画
			ctx.fillStyle = "#00f";
			ctx.beginPath();
			ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
			ctx.fill();
			// レーザーを描画
			ctx.strokeStyle = "#f00";
			ctx.lineWidth = 3;
			for (let i = 0; i < lasers.length; i++) {
				let laser = lasers[i];
				ctx.beginPath();
				ctx.moveTo(laser.x, laser.y);
				ctx.lineTo(laser.x+5*laser.dx, laser.y+5*laser.dy);
				ctx.stroke();
			}
			// スコアを描画
			ctx.fillStyle = "#000";
			ctx.font = "20px 'Segoe UI',sans-serif";
			ctx.fillText("Score: "+score, 10, 30);
		}

// ゲームループ
		function loop() {
			requestAnimationFrame(loop);
			moveLasers();
			handleCollisions();
			draw();
		}

// イベントリスナーを設定
		window.addEventListener("keydown", function(e) {
			if (e.key == "ArrowLeft") {
				ball.dx = -5;
			} else if (e.key == "ArrowRight") {
				ball.dx = 5;
			} else if (e.key == "ArrowUp") {
				ball.dy = -5;
			} else if (e.key == "ArrowDown") {
				ball.dy = 5;
			} else if (e.key == " ") {
				fire();
			}
		});
		window.addEventListener("keyup", function(e) {
			if (e.key == "ArrowLeft" || e.key == "ArrowRight") {
				ball.dx = 0;
			} else if (e.key == "ArrowUp" || e.key == "ArrowDown") {
				ball.dy = 0;
			}
		});

// ゲーム開始
		loop();
	</script>
</body>
</html>