H5游戏引擎实战[ 上 ]

作者: 智障是如何炼成的 | 来源:发表于2018-03-24 17:30 被阅读0次

原作于2017-3-25
搬家与2018-3-24

ES6精彩实战之<智能迷宫>

———宝贵编程经验分享会———

   hello大家好，这里是Web云课堂，之前的一年里我们经历了Html和CSS的系统攻城，此时的你们已经是做静态（动静结合）网页的高手了，本堂课的主讲师JimJin将带领大家进入成为Web安全专家的第4阶段第三小节：JavaScript的实战实验。本节课我将演示如何运用Web编程语言JS来制作一个完整的系统的网页应用程序，相比之前的理论和小实验，本次的任务将是前所未有的巨大，因为我们要做的是一个系统，一个软件，一个面向客户的Application，所以这也是对之前JS基础学习的一个总结。本次实验完成后JavaScript也就告一段落了，之后我们将进入服务器脚本语言的学习。
   OK，以上都是废话：）如果说html和css语言都没必要学（因为有图形软件），但不同于H5的标记语言和CSS的渲染语言，程序语言（涉及到大量的数值逻辑计算）JavaScript是非学不可，笔记JS是所有程序语言中最方便同时最易学的语言（有之一），由于它凌驾于browser之上的特性，它是最方便的小软件制作器。OK，let’s进入主题。

   诶，实在抱歉又说了一堆废话。。但有原因的因为今天。。咳咳，不说了，我这次的做的软件是一款游戏——迷宫。有所不同的是，这个迷宫是一个智能迷宫，何谓智能？在我的字典里，智能迷宫是一个自由探索自由调整，功能齐全的系统迷宫，其中包括如下功能：

1.能够更改所有元素的颜色。
2.能够变换任意形状的尺寸。
3.能够自由调整地图的大小。
4.能够随机生成迷宫的地图。
5.能够自由绘制路线的位置。
6.能够从起点或者从终点走。
7.能够沿途记录走过的路径。
8.能够瞬间移动到之前的点。
9.能够有多种难度迷宫算法。
10.能够自定义背景音乐图片。
11.能够支持计时和分数系统。
12.能够拥有快速冲刺的技能。
13.能够提供完善的帮助提示。

git:https://github.com/JinHengyu/

用自家的浏览器打开，但因为本人只Safari和Firefox上测试过，并不能保证所有浏览器兼容，所以建议你们使用Firefox、Chrome、Safari、Opera之一的浏览器打开，最好不要IE。。下面进入游戏的全流程讲解。

   以下是作者我花了两周时间（挤压下来）中的逻辑步骤，当然这是整合版的，因为这其中我经历了无数的困难，专业程序员debug的步骤都是：发现问题、解决问题；而我：感觉不对劲、发现问题、寻找问题、研究问题、就决问题失败、换条思路、发现新问题、喝口茶、重思考问题。。。。好了，所以我总结出了一个人编写软件的核心十个步骤，不仅仅是这个游戏：

第一步：确定底层原理

1）画布canvas

  作为一个唯物主义共青团员，我首先需要确定智能迷宫及其周边环境的物质组成原理。我们需要确定迷宫的物理结构，换句话说，它是用什么做的。这里我一开始也思考了许多方案：比如可以采用HTML5提供的画布元素来绘制迷宫，通过画布上的重复性的擦写操作来完成游戏；当然我们也可不用画布而是采用表格元素，在晶格阵中每格都是可走的位置；我们还可以引入大量的元素并用CSS进行表格布局；最后我们还可以通过一张张的地图图片img来表现迷宫，不过这种办法真是，即使最坏的情况也不会用它。。

2）绝对定位

   因为方便最终我选择了迷宫部分使用画布canvas，而行走对象借用一个上层元素绝对定位来完成行走。绝对定位是从html流中剔除出而凌驾于画布之上的元素，因而两者间相互独立，绝对定位也很方便，属于“动态元素”。

3）浮动元素

   智能迷宫还需要一个控制台，这个我决定使用一个div，其中包括一些表单控件。下面是html控制台部分的代码：

<div style="float: right;" id="controller">
    键盘控制：<br>
    <input type="radio" id="move_origin" name="keyboard" disabled>起点
    <input type="radio" id="move_destination" name="keyboard" disabled>终点
    <input type="radio" id="move_pen" name="keyboard" checked>笔尖<br>
    设置颜色：<br>
    背景：<input type="text" id="canvas_color" value="#eee"><br>
    起点：<input type="text" id="origin_color" value="red"><br>
    终点：<input type="text" id="destination_color" value="lime"><br>
    墙体：<input type="text" id="wall_color" value="black"><br>
    路径：<input type="text" id="path_color" value="yellow"><br>
    是否记录路径：<input type="checkbox" id="record" ><br>
    <button id="paint" onClick="paint()" style="font-size: 1em;">开始制图</button><br>
    坐标(x,y)：<br>
    起点：<input type="number" id="ori_x" value="1" min="1" max="50" step="1" onChange="ori_x_cha()">
    <input type="number" id="ori_y" value="1" min="1" max="50" step="1" onChange="ori_y_cha()"><br>
    终点：<input type="number" id="des_x" value="50" min="1" max="50" step="1" onChange="des_x_cha()">
    <input type="number" id="des_y" value="50" min="1" max="50" step="1" onChange="des_y_cha()"><br>
    笔尖：<input type="number" id="pen_x" value="0.5" min="0.5" max="50.5" step="1" >
    <input type="number" id="pen_y" value="0.5" min="0.5" max="50.5" step="1" ><br>
    地图设置：<br>
    墙体厚度：<input type="number" min="1" max="10" step="1"  value="3" id="wall_size"><br> 
    方块边长：<input type="number" min="1" max="50" step="1"  value="12" id="square_size"><br>
    水平数量：<input type="number" min="1" max="99" step="1"  value="50" id="amount_x"><br>
    垂直数量：<input type="number" min="1" max="99" step="1"  value="50" id="amount_y"><br>
    迷宫生成算法：<br>
    <button id="generate" onClick="generate()" style="font-size: 1em;">简单模式</button>
    <button id="advanced_generate" onClick="advanced_generate()" style="font-size: 1em;">高级模式</button><br>
    其他：<br>
    <button onClick="alert('尽请期待')">背景音乐</button><br>
    <button onClick="alert('尽请期待')">得分系统</button>
</div>

第二步：选择合适的框架

1）内核很重要

  迷宫的框架！！至少这是个2d的游戏（3d本人正在研究），又至少排除了曲线图，全部采用“横平竖直”的矩阵结构。然后我考虑了目标对象该如何移动：是渐变还是突变？墙该怎么画：虚拟还是实体？还有——对象目标是一个色块还是一个图像？最后我决定采用实体墙和正方格，移动对象也是正方形，用背景色标注。考虑到很多浏览器不支持颜色选择器，颜色采用input text，支持CSS的三种颜色书写格式：常用名称、16进制和RGB格式。其他参数使用input number，剩下的控件都是button，哦对了，还有一个input radio，待会有用。

2）分层分类

  正如《星港》中上帝（就是平行宇宙外的那个五维生物）所说，“你们人类永远只知道分工而不会合作”。当然这不是反人类，而是揭露了我们三维宇宙的一些不变定理：系统都是由不同部门分层分类地分工完成的任务。

站在最高层，总共4个H5元素，分别是canvas，div控制台（float：right），起点和终点div（position：absolute）。canvas的最底层是背景色，上层由方块square和墙wall组成：起点div的z_index大于终点div的z-index以便到达终点时可以覆盖，但他们都是直接覆盖在canvas之上的。控制台div很灵活，因为是浮动定位，可以随浏览器窗口随意漂浮。控制台主要由一些表单元素和说明文字组成：（打开文件就能看到，这里就不截图了）。

第三步：建立虚拟媒介

1）虚拟坐标

为什么呢？画布的原始坐标是以像素为单位，但是为了满足需求，可以自由变换尺寸和大小，需要一个内外模式之间的中介，那就是虚拟坐标。因为语言上说明有点难度，所以直接上图：
<img alt='诶呀卧槽??'>

第四步：定义一些关键的变量

1）数值字段

  这里小编总结了一句philosophy：算法工程师靠经验来CODING，码农靠知识来DEBUGING！！fuck重复的变量：小编在这上面也是吃了很多亏。。并不是每个可变的量都给他分配一段变量！！尤其我们这里有一个input number元素需要实时显示value值，我们就可以直接利用这个value字段来存储唯一的内存空间。

var wall_size=3;//墙的宽度
var square_size=12;//方块的边长
var amount_x=50;//x的最大坐标
var amount_y=50;//y的最大坐标

2）存储型变量

用来存放大量数据，比较考验数据结构的理论。
var wall=new Array();//用来存放所有的墙
var shortest_path=new Array();//用来存放随机路径
var direction=new Array();//用来存放可走的方向
var already_path=new Array();//用来存放沿途走过的路径

3）状态变量

该字段也很重要，总共设置了两个：一个state变量用来显示此时迷宫是在play状态还是draw状态；还有一个get变量，后面会介绍用途。

4）标签对象

Very Important！索性把所有标签元素全给document.getElementById了，不然后面引用的时候累死宝宝。虽然我并没有全设：

    var wall_color=document.getElementById("wall_color");
    var path_color=document.getElementById("path_color");
        var origin=document.getElementById("origin");
    var destination=document.getElementById("destination");
    var pen_x=document.getElementById("pen_x");
    var pen_y=document.getElementById("pen_y");
    var ori_x=document.getElementById("ori_x");
    var ori_y=document.getElementById("ori_y");
    var des_x=document.getElementById("des_x");
    var des_y=document.getElementById("des_y");
        var canvas=document.getElementById("canvas");

5）参数变量

这个指的是那些辅助变量，比如用于循环语句的i和j，以及用于JS方法的形式参数event和key等等。