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

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

代码语言：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
                        }
                }),
                Bodi.........完整代码请登录后点击上方下载按钮下载查看