使用HTML5+CSS3+JavaScript制作网页游戏的流程

    这几天学习网页前端每天都有所收获，下面来分享一下用H5C3+JS开发网页小游戏的流程，供大家学习、参考，也为了是自己在以后的日子里不会忘记。
    所谓玩游戏，实际上是另一种形式的人机交互，是人机交互就让我想起了网站开发的MVC框架，而H5小游戏就相当于把后端代码放在前端运行，因此前后端都作用于你的浏览器。
    1.画布的绘制
        这里的画布（或者说是游戏窗口）是我们与后台程序进行信息交换的主体，使用多层<canvas>最有利于绘制多层背景的游戏框体，使用z-index属性对这些<canvas>的层数进行设置，z-index属性值越小，当前<canvas>就越在底层，在经过CSS的一番修饰之后，就可以得到一个位于特定位置的游戏画布，由于关于HTML和CSS修饰不属于开发的主要内容，因此在这里不再赘述.
    2.各种对象的绘制
    首先定义一个主函数的JS文件，用于各种对象的定义以及实例化和游戏函数的动态执行，比如对画布的实例化，游戏背景的实例化，时钟方程的实例化，游戏动态效果图片的数组化以及他们的属性的初始值的定义，绘制函数的使用，有的游戏用的是鼠标控制，有的游戏用键盘控制，鼠标控制的函数和键盘控制的函数也要在这里定义。
        （1）背景的绘制
            静态背景只需要在刷新绘制函数之外运行背景绘制函数就可以啦，而动态背景则需要定义他的坐标属性，速度属性等，使用prototype原型对背景对象进行初始化定义，然后用同样的原型方法定义draw函数以控制背景的动态变化，在这里背景一般都处于最底层，所以在使用画布的时候要格外注意画布的z-index值否则会出现构图混乱的现象。
        （2）游戏主角的绘制
            首先要创建一个主角对象，然后用prototype构建初始化主角对象属性的函数，最后要有一个绘制函数，在这里游戏的主角的属性一般比其他对象的要多很多，所以一定要谨慎小心，错别字和参数错误在这里是很常见的，特别是在这里由于定义的各种变量总是有可能和其他变量有所冲突，所以使用save()和restore()函数把绘制函数的主体部分给包起来，规定作用域，这样就可以让绘制不越界。
        （3）其他渲染对象和其他游戏内容的绘制
            创建过程和游戏主角的创建过程是类似的，大家可以按照需求自己定义，穿件适合自己游戏需求的渲染对象和其他游戏内容，使之更符合我们的设计。一定要注意在HTML里面对JS进行引用，在帧绘制函数里对所有的对象进行重新绘制。
        （4）游戏规则的设置
            新建规则函数的JS文件，在各个游戏里面游戏内容一般都会和碰撞相关，所以规则函数都会涉及到坐标和角度，对坐标，角度计算的函数都要看一下他的API，如果有需要的话，再写一个有关分值记录和GameOver判断的函数。这样经过不断地调试，游戏基本就已经实现的差不多了。
        （5）最后的渲染
            在对游戏的各种对象进行各种操作，让游戏更加人性化、更生动。
    我所用的编译环境是webstrom和DW，大家可以使用自己喜欢的编译环境，今天就说到这里了。