原生js实现一个走出迷宫小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：原生js实现一个走出迷宫小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.js"></script>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

h1 {
  color: #ff8e40;
  font-family: "Monoton", sans-serif;
  font-size: 60px;
}

.insstruction {
  font-weigth: 700;
  font-size: 0.75rem;
}

.winner {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: absolute;
  width: 100vw;
  z-index: 1;
}
</style>

  
  
</head>

<body translate="no">
  <div class="winner hidden">
	<h1>You Win!</h1>
</div>
<p class="insstruction">Play the game with either <strong>AWDS</strong> or the <strong>arrow</strong> keys</p>
  
      <script >
(function () {
	const { Engine, Render, Runner, World, Bodies, Body, Events } = Matter;

	let difficulties = 12;

	const config = {
		cellsHorizontal: difficulties,
		cellsVertical: difficulties,
		wallWidth: 8,
		outerWallWidth: 20,
		backgroundColor: "#ede6e3",
		ballColor: "#ff8e40",
		goalColor: "red",
		wallColor: "#36382e"
	};

	const unit = 24;
	const width = config.cellsHorizontal * unit;
	const height = config.cellsVertical * unit;

	const engine = Engine.create();
	engine.world.gravity.y = 0;
	const { world } = engine;
	const render = Render.create({
		element: document.body,
		engine: engine,
		options: {
			width,
			height,
			background: config.backgroundColor,
			wireframes: false
		}
	});

	Render.run(render);
	Runner.run(Runner.create(), engine);

	const body = document.querySelector("body");
	body.style.backgroundColor = config.backgroundColor;
	// Board walls
	const walls = [
		Bodies.rectangle(width / 2, 0, width, config.outerWallWidth, {
			isStatic: true,
			render: {
				fillStyle: config.wallColor
			}
		}),
		Bodies.rectangle(width / 2, height, width, config.outerWallWidth, {
			isStatic: true,
			render: {
				fillStyle: config.wallColor
			}
		}),
		Bodies.rectangle(0, height / 2, config.outerWallWidth, height, {
			isStatic: true,
			render: {
				fillStyle: config.wallColor
			}
		}),
		Bodies.rectangle(width, height / 2, config.outerWallWidth, height, {
			isStatic: true,
			render: {
				fillStyle: config.wallColor
			}
		})
	];
	World.add(world, walls);

	// Maze generation
	const shuffle = (arr) => {
		for (let counter = arr.length - 1; counter > 0; counter--) {
			const index = Math.floor(Math.random() * (counter + 1));
			[arr[counter], arr[index]] = [arr[index], arr[counter]];
		}

		return arr;
	};

	const grid = Array(config.cellsVertical)
		.fill(null)
		.map(() => Array(config.cellsHorizontal).fill(false));

	const verticals = Array(config.cellsVertical)
		.fill(null)
		.map(() => Array(config.cellsHorizontal - 1).fill(false));

	const horizontals = Array(config.cellsVertical - 1)
		.fill(null)
		.map(() => Array(config.cellsHorizontal).fill(false));

	const startRow = Math.floor(Math.random() * config.cellsVertical);
	const startColumn = Math.floor(Math.random() * config.cellsHorizontal);

	const stepThroughCell = (row, column) => {
		// If I have visited the cell at [row, column], then return
		if (grid[row][column]) {
			return;
		}
		// Mark this cell as being visisted
		grid[row][column] = true;
		// Assemble random-ordered list of neighbors
		const neighbors = shuffle([
			[row - 1, column, "up"], // Above
			[row, column + 1, "right"], // Right
			[row + 1, column.........完整代码请登录后点击上方下载按钮下载查看