02 2012 档案
摘要：
功能描述：
左右方向键控制玩家的方向，上下方向键控制玩家的前进和后退。
在上面的效果预览中，可以看到右边是2D的平面地图，而左边的则是第一人称的3D视图，这两幅图的关系是非常密切的，实质上，实现3D视觉的过程，就是依据2D地图把地图转换成第一人称视觉的过程。
在之前的一篇文章：《javascript实现3D房间》中，3D效果的实现只局限于平面（意思是从侧面看没有立体效果），在这种有局限性的3D效果中，我们以一个个物体为单位，通过不同物体平面之间的视觉差实现3D。而在这次的效果中，为了使物体从不同角度看都能具有立体效果，我们把单位从平面改成线。
阅读全文
功能描述：
左右方向键控制玩家的方向，上下方向键控制玩家的前进和后退。
在上面的效果预览中，可以看到右边是2D的平面地图，而左边的则是第一人称的3D视图，这两幅图的关系是非常密切的，实质上，实现3D视觉的过程，就是依据2D地图把地图转换成第一人称视觉的过程。
在之前的一篇文章：《javascript实现3D房间》中，3D效果的实现只局限于平面（意思是从侧面看没有立体效果），在这种有局限性的3D效果中，我们以一个个物体为单位，通过不同物体平面之间的视觉差实现3D。而在这次的效果中，为了使物体从不同角度看都能具有立体效果，我们把单位从平面改成线。
阅读全文
摘要：
功能描述：
结合A*算法和HTML5完成的一个寻路demo。
鼠标点击地图任意位置，飞鸟会寻找最短路程到达该位置。
阅读全文
功能描述：
结合A*算法和HTML5完成的一个寻路demo。
鼠标点击地图任意位置，飞鸟会寻找最短路程到达该位置。
阅读全文
摘要：
功能描述：
该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。
继上一个HTML5游戏小demo《HTML5超级玛丽游戏demo》后，这次开发的游戏添加了更多元素并增强了可玩性，该游戏同样基于本人开发的HTML5游戏框架cnGameJS。
阅读全文
功能描述：
该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。
继上一个HTML5游戏小demo《HTML5超级玛丽游戏demo》后，这次开发的游戏添加了更多元素并增强了可玩性，该游戏同样基于本人开发的HTML5游戏框架cnGameJS。
阅读全文
摘要：返回目录
1.什么是精灵对象（sprite）？
所谓的精灵对象，就是游戏中的一个具有行为的元素，以超级玛丽为例，玛丽，敌人都算是一个精灵对象。在cnGameJS框架中，精灵对象如下几个特点：
1.添加动画：在之前的动画篇中，我们介绍过cnGameJS如何实现帧动画。而作为精灵对象，就是动画的使用者。例如我们控制玛丽向不同方向的行走，玛丽会产生行走的动画。
2.包含图像：对于另外一些精灵对象，它可能不需要运动动画，这时我们就可以只让它使用图像。
3.能进行不同类型的运动：可以让精灵对象向不同方向，以不同加速度进行移动。
阅读全文
摘要：返回目录
由于整个游戏都在一个游戏循环中进行，所以游戏循环可以说是游戏的核心部分。每次循环时，更新游戏对象的属性，以及绘制游戏元素。
阅读全文
摘要：返回目录
1.什么场合需要用到游戏地图对象？
游戏地图对象适用于类似坦克大战，推箱子之类的游戏。这些游戏的地图都由一个个小格子组成，使用游戏地图对象，可以很方便地生成这种地图。
阅读全文
摘要：返回目录
1.功能
该模块也很简单，主要包括三个基础图形的绘制：矩形 圆形 文字。我们把一个个图像以构造函数的模式封装，例如当我们需要绘制一个矩形对象，我们首先new出一个矩形对象，再调用对象的draw方法进行绘制。例如：
阅读全文
摘要：返回目录
1.为什么我们需要外部输入模块？
在游戏中我们常常用到类似这样的操作：鼠标点击某位置，玩家对象移动到该位置，或者按鼠标方向键，玩家向不同方向移动，等等。这些操作无一不用与外部输入设备打交道。作为游戏的设计者，我们很需要在任何时候知道鼠标目前的位置，键盘的点击状况等，从而方便我们对游戏元素加以控制。因此作为一个游戏框架，外部输入模块也是必不可少的。
阅读全文
摘要：返回目录
本模块的碰撞检查只局限于点与矩形，（平行的）矩形与矩形，点与圆形，圆形与圆形之间的检测，因此该模块也很简单，直接结合代码来看看：
阅读全文
摘要：返回目录
在游戏中，游戏角色的动画效果是一个游戏必不可少的一部分。这节我们以构造超级马里奥的角色为例，讲解cnGameJS里动画的实现。
1.原理：
一个动画如果要实现一连串动作，我们可以把每个动作的快照保留起来，并放在一个大图上面，然后每次帧更新的时候，就在每个动作的快照之间循环显示，最终得出一个动画。
阅读全文
摘要：返回目录
1.什么时候需要场景对象？
场景对象有区别于上一篇介绍的地图对象，它们分别应用于不同类型的游戏。之前的地图对象应用于格子类的游戏，例如推箱子，坦克大战。而本节介绍的场景对象，则适用于拥有特定场景的游戏，例如超级玛丽，恐龙快打等。这类游戏通常在2d场景内控制一个玩家对象，随着玩家的移动，场景跟着移动。
阅读全文
摘要：返回目录
1.cnGameJs框架的代码组织
核心函数模块，主要的作用是为之后的框架开发和用户对游戏的开发提供方便，整个框架在一个闭包之中，避免对全局作用域的污染。之后每个不同的模块分别在自己的闭包内，使不同模块的分割更清晰。
阅读全文
摘要：返回目录
1.功能
该模块是游戏的入口，我们通过该模块加载资源，并且在资源加载完成后调用游戏对象的入口函数。另外该模块还包括游戏场景之间的切换，以及加载百分比的计算和显示。
阅读全文
摘要：cnGameJS是本人开发的一个基于HTML5的游戏框架，包括资源加载，碰撞检测，动画等模块。本系列文章主要介绍各个模块的开发流程，以及附上一个使用该框架进行开发的小游戏demo：《超级玛丽游戏demo》
阅读全文
摘要：功能说明： 基于HTML5的超级玛丽游戏的demo，方向键左右控制移动，方向键上控制跳跃，该游戏基于本人开发的HTML5游戏框架cnGameJS（详情点击这里：HTML5游戏框架cnGameJS开发实录）。 请用最新版本浏览器查看。效果展示：代码实现： 该游戏demo主要包含的元素有：资源加载，外部输入，碰撞检测，动画，游戏循环以及场景，我将一步步进行分析讲解。 1.资源加载： 我们首先要有一个游戏对象，代表一个关卡。该对象有如下三个方法：initialize，update和draw。它们分别的功能是初始化，更新所有游戏元素和绘制所有游戏元素。在游戏开始前，必须先加载所有图片资源...
阅读全文
摘要：功能说明：
利用css的border实现图片的翻转效果，支持从上到下、从下到上，从左到右，从右到左四种翻转。
兼容IE 7 8 9 10 firefox chrome
阅读全文