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

No:2577

1609

←

Prev Next

→

Sokoban 3D
Developer AI絵師｜Date and time 23/6/22 0:45:11
Build time 50.394 sec｜Game capacity 4.317KB｜

Script

倉庫番3D

スコア: 0

←

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>倉庫番3D</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #222222;
			color: #FFFFFF;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			display: block;
			margin: auto;
			padding-top: 20px;
			border: 2px solid #FFFFFF;
		}
		#score {
			font-size: 20px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>倉庫番3D</h1>
	<canvas id="game"></canvas>
	<div id="score">スコア: 0</div>

// ゲーム初期化
		function init() {
			// 初期ボックス生成
			for (var i = 0; i < 5; i++) {
				var box = {
					x: getRandomInt(canvas.width),
					y: getRandomInt(canvas.height),
					size: 30,
					color: "📦"
				};
				boxes.push(box);
			}

// イベントリスナー登録（スマホでのタッチ操作対応）
			canvas.addEventListener("touchstart", function(event) {
				event.preventDefault();
				var clientX = event.touches[0].clientX - canvas.offsetLeft;
				var clientY = event.touches[0].clientY - canvas.offsetTop;
				movePlayer(clientX, clientY);
			}, false);
		}

// ゲーム開始
		function start() {
			// 画面更新
			function update() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤー移動
				ctx.fillStyle = player.color;
				ctx.fillText(player.color, player.x, player.y);

// ゴール生成
				ctx.fillStyle = goal.color;
				ctx.fillText(goal.color, goal.x, goal.y);

// ボックス生成
				for (var i = 0; i < boxes.length; i++) {
					var box = boxes[i];
					ctx.fillStyle = box.color;
					ctx.fillText(box.color, box.x, box.y);
				}

// スコア表示
				scoreBox.innerHTML = "スコア: " + score;
			}

// プレイヤー移動
			function movePlayer(mouseX, mouseY) {
				var distance = Math.sqrt(Math.pow(mouseX - player.x, 2) + Math.pow(mouseY - player.y, 2));
				var speed = distance / 5;
				var dx = (mouseX - player.x) / distance * speed;
				var dy = (mouseY - player.y) / distance * speed;

if (player.x + dx < player.size || player.x + dx > canvas.width - player.size || player.y + dy < player.size || player.y + dy > canvas.height - player.size) {
					return;
				}

player.x += dx;
				player.y += dy;

// ゴールに到達した場合
				if (Math.abs(player.x - goal.x) < player.size + goal.size && Math.abs(player.y - goal.y) < player.size + goal.size) {
					score += 50;
					goal.x = getRandomInt(canvas.width - goal.size);
					goal.y = getRandomInt(canvas.height - goal.size);
				}

// ボックスを動かす
				for (var i = 0; i < boxes.length; i++) {
					var box = boxes[i];
					if (Math.abs(player.x - box.x) < player.size + box.size && Math.abs(player.y - box.y) < player.size + box.size) {
						if (player.x > box.x) {
							box.x -= 5;
							if (box.x < box.size) {
								box.x = box.size;
							}
						} else {
							box.x += 5;
							if (box.x > canvas.width - box.size) {
								box.x = canvas.width - box.size;
							}
						}
						if (player.y > box.y) {
							box.y -= 5;
							if (box.y < box.size) {
								box.y = box.size;
							}
						} else {
							box.y += 5;
							if (box.y > canvas.height - box.size) {
								box.y = canvas.height - box.size;
							}
						}

// ボックスがゴールに到達した場合
						if (Math.abs(box.x - goal.x) < box.size + goal.size && Math.abs(box.y - goal.y) < box.size + goal.size) {
							score += 100;
							boxes.splice(i, 1);
							goal.x = getRandomInt(canvas.width - goal.size);
							goal.y = getRandomInt(canvas.height - goal.size);
						}
					}
				}
			}

// ゲーム開始
			init();
			setInterval(update, 16.7);
		}

// ランダムな整数取得
		function getRandomInt(max) {
			return Math.floor(Math.random() * Math.floor(max));
		}

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