怎么用HTML5制作一款小游戏？

用HTML5制作一款小游戏首先肯定得学会HTML，然后推荐可以考虑先去学习别人的成品游戏，借鉴甚至模仿出来，再去构思自己的游戏就很简单了，我目前就在云创动力华中区学习游戏制作，感觉用HTML5制作游戏真的并不难。

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
接下来开始分析代码：
首先引入js文件
<script src="easeljs-071minjs"></script>
<script src="preloadjs-041minjs"></script>
然后进行舞台初始化 *** 作：
function init(){
stage = new createjsStage("cas");
C_W = stagecanvaswidth;
C_H = stagecanvasheight;
var manifest = [
{src:"image/manpng" , id:"man"},
{src:"image/groundpng" , id:"ground"},
{src:"image/bgpng" , id:"bg"},
{src:"image/highjpg" , id:"high"},
{src:"image/coinspng" , id:"coin"}
]
loader = new createjsLoadQueue(false);
loaderaddEventListener("complete" , handleComplete);
loaderloadManifest(manifest);
drawLoading();
}
上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：
function handleComplete(){ //当素材load完后执行该方法
var manImage = loadergetResult("man"),
lowground = loadergetResult("ground"),
highground = loadergetResult("high"),
bgImage = loadergetResult("bg"),
coins = loadergetResult("coin");
sky = new createjsShape();
skygraphicsbf(bgImage)drawRect(0,0,C_W,C_H);
skysetTransform(0, 0, 1 , C_H/bgImageheight);
stageaddChild(sky);
man = createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang = new createjsShape();
kuanggraphicsbeginStroke("rgba(255,0,0,05)")drawRect(0 , 0 , mansize()w , manpicsize()h15);
// stageaddChild(kuang);
mapHandle(lowground , highground , coins);
createjsTickertimingMode = createjsTickerRAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout
createjsTickersetFPS(30);//舞台帧率控制
createjsTickeraddEventListener("tick", tick);//绑定舞台每一帧的逻辑发生函数
windowaddEventListener("keydown" , function(event){
event = event||windowevent;
if(eventkeyCode===32&&manjumpNum<manjumpMax){
manjump();
}
})
}
获得加载完成后端的数据就直接用loadergetResult就可以获取了，跑酷游戏需要一个背景，所以，咱们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。

比如使用
html5
的画布标签canvas开发一个简单的类似qq游戏你画我猜的游戏:首先你要学会canvas标签的基本用法，画线，画笔大小，画笔，截图保存等，然后结合你的js功底在画布上要画出连续的平滑的线条，然后别人就可以根据画的图，猜词语了，猜中了就给分。然后排名什么的。这就是一个简单的html5游戏了网上有很多
列子
的，你可以下一个源码看看

学习html5游戏开发，需要掌握很多知识，比如动画、精灵、、加速度、物理重力、碰撞检测等等，对于初学者来说，最好是找一个游戏引擎来进行学习。 游戏引擎对游戏的很多功能都进行了封装，用游戏引擎写游戏非常快

---