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

No:2084

1264

←

Prev Next

→

迷路迷路の中を進み、ゴールするゲームです。 ①プレイヤーは最初、スタート地点に存在します。 ②迷..ALL
Developer もちきなこ｜Date and time 23/6/20 1:57:23
Build time 41.684 sec｜Game capacity 2.692KB｜

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">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: black;
			color: white;
			font-size: 4vw;
			text-align: center;
			display: flex;
			flex-direction: column;
		}

h1 {
			margin: 5vw;
		}

#maze {
			margin: auto;
			display: grid;
			grid-gap: 1vw;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(5, 1fr);
			border: 1vw solid white;
			padding: 1vw;
			border-radius: 2vw;
		}

.wall {
			background-color: white;
			border-radius: 1vw;
		}

.path {
			background-color: #bada55;
			border-radius: 1vw;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>迷路ゲーム</h1>
	<div id="maze"></div>

let player = [0, 0]

function render() {
			let mazeDiv = document.getElementById('maze')
			mazeDiv.innerHTML = ""

for (let i = 0; i < maze.length; i++) {
				for (let j = 0; j < maze[i].length; j++) {
					if (maze[i][j] === 0) {
						let path = document.createElement('div')
						path.classList.add('path')
						path.addEventListener('click', move)
						mazeDiv.appendChild(path)
					} else if (maze[i][j] === 1) {
						let wall = document.createElement('div')
						wall.classList.add('wall')
						mazeDiv.appendChild(wall)
					} else if (maze[i][j] === 's') {
						player = [i, j]
						let path = document.createElement('div')
						path.classList.add('path')
						mazeDiv.appendChild(path)
					} else if (maze[i][j] === 'g') {
						let path = document.createElement('div')
						path.classList.add('path')
						path.addEventListener('click', finish)
						mazeDiv.appendChild(path)
					}
				}
			}
			let currentPath = document.getElementsByClassName('path')[player[0]*5+player[1]]
			currentPath.classList.add('player')
		}

function move(event) {
			let target = event.target
			let index = Array.from(target.parentNode.children).indexOf(target)
			let row = Math.floor(index / 5)
			let col = index % 5

if ((Math.abs(player[0] - row) == 1 && Math.abs(player[1] - col) == 0) || (Math.abs(player[0] - row) == 0 && Math.abs(player[1] - col) == 1)) {
				if (maze[row][col] != 1) {
					let currentPath = document.getElementsByClassName('path')[player[0]*5+player[1]]
					currentPath.classList.remove('player')
					player = [row, col]
					target.classList.add('player')
				}
			}
		}

function finish() {
			alert('ゴールしました！')
			location.reload()
		}

render()
	</script>
</body>
</html>