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

No:3158

3768

←

Prev Next

→

pathfinding
Developer User3655｜Date and time 23/6/24 0:27:32
Build time 38.315 sec｜Game capacity 2.872KB｜

Script

パスファインディングゲーム

操作方法：十字キー

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>パスファインディングゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript">
		// ゲームの設定
		var map = [
			[0, 0, 0, 0, 0],
			[0, 1, 1, 1, 0],
			[0, 1, 0, 1, 0],
			[0, 1, 1, 1, 0],
			[0, 0, 0, 0, 0]
		];

var player = {
			x: 1,
			y: 1
		};

var goal = {
			x: 3,
			y: 3
		};

// 描画関数
		function draw() {
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var blockSize = canvas.width / map.length;

// 背景を白で塗りつぶす
			ctx.fillStyle = "#ffffff";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// マップを描画する
			for (var y = 0; y < map.length; y++) {
				for (var x = 0; x < map[y].length; x++) {
					ctx.beginPath();
					if (map[y][x] == 0) {
						ctx.fillStyle = "#000000";
					} else {
						ctx.fillStyle = "#55aaaa";
					}
					ctx.rect(x * blockSize, y * blockSize, blockSize, blockSize);
					ctx.fill();
				}
			}

// プレイヤーを描画する
			ctx.fillStyle = "#ff0000";
			ctx.beginPath();
			ctx.arc(player.x * blockSize + blockSize / 2, player.y * blockSize + blockSize / 2, blockSize / 2, 0, 2 * Math.PI);
			ctx.fill();

// ゴールを描画する
			ctx.fillStyle = "#ffff00";
			ctx.beginPath();
			ctx.arc(goal.x * blockSize + blockSize / 2, goal.y * blockSize + blockSize / 2, blockSize / 2, 0, 2 * Math.PI);
			ctx.fill();
		}

// ゲームオーバー処理
		function gameOver() {
			alert("ゲームオーバー！");
			location.reload();
		}

// ゲームクリア処理
		function gameClear() {
			alert("ゲームクリア！");
			location.reload();
		}

// キー入力処理
		function keyDown(event) {
			switch (event.keyCode) {
				case 37: // 左
					if (map[player.y][player.x - 1] != 0) {
						player.x--;
					}
					break;
				case 38: // 上
					if (map[player.y - 1][player.x] != 0) {
						player.y--;
					}
					break;
				case 39: // 右
					if (map[player.y][player.x + 1] != 0) {
						player.x++;
					}
					break;
				case 40: // 下
					if (map[player.y + 1][player.x] != 0) {
						player.y++;
					}
					break;
			}

draw();

// ゴールに到達したかどうかをチェックする
			if (player.x == goal.x && player.y == goal.y) {
				gameClear();
			}

// 壁にぶつかったかどうかをチェックする
			if (map[player.y][player.x] == 0) {
				gameOver();
			}
		}
	</script>
</head>
<body onload="draw()">
	<div style="text-align:center;">
		<h1>パスファインディングゲーム</h1>
		<canvas id="canvas" width="320" height="320"></canvas>
		<p>操作方法：十字キー</p>
	</div>