createjs游戏源码_游戏源码制作

文章目录：

• 1、如何使用createjs来编写html5游戏
• 2、createjs.tween 怎么没效果
• 3、phaser createjs egret cocos2d-js框架看好哪一个
• 4、如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS
• 5、如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
• 6、如何开始学习HTML5游戏开发？

如何使用createjs来编写html5游戏

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。

首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。

接下来开始分析代码：

首先引入js文件

script src="easeljs-0.7.1.min.js"/script

script src="preloadjs-0.4.1.min.js"/script

然后进行舞台初始化操作：

function init(){

stage = new createjs.Stage("cas");

C_W = stage.canvas.width;

C_H = stage.canvas.height;

var manifest = [

{src:"image/man.png" , id:"man"},

{src:"image/ground.png" , id:"ground"},

{src:"image/bg.png" , id:"bg"},

{src:"image/high.jpg" , id:"high"},

{src:"image/coins.png" , id:"coin"}

]

loader = new createjs.LoadQueue(false);

loader.addEventListener("complete" , handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：

function handleComplete(){ //当图片素材load完后执行该方法

var manImage = loader.getResult("man"),

lowground = loader.getResult("ground"),

highground = loader.getResult("high"),

bgImage = loader.getResult("bg"),

coins = loader.getResult("coin");

sky = new createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0, 0, 1 , C_H/bgImage.height);

stage.addChild(sky);

man = createMan(200,326,manImage);

//该框为判定角色的判定区域

kuang = new createjs.Shape();

kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);

// stage.addChild(kuang);

mapHandle(lowground , highground , coins);

createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞台帧率控制

createjs.Ticker.addEventListener("tick", tick);//绑定舞台每一帧的逻辑发生函数

window.addEventListener("keydown" , function(event){

event = event||window.event;

if(event.keyCode===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。

然后进行舞台循环设置，上面有注释了，就不说了。

createjs.tween 怎么没效果

createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。

开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。

phaser createjs egret cocos2d-js框架看好哪一个

　cocos2d-js 没了解过，

egret了解点，

phaser createjs使用过。就egret phaser creatjs来说如果做游戏我更觉得egret强悍些。在应对基本的html5游戏时phaser creatjs可以相互选择，片面的从文件大小就知道phaser应该比creatjs要强些（渲染支持webgl,物理引擎更健全，当然这些都是phaser采用了其它第三方的功能）。当然话说回来我觉的同时去学习这些并不冲突。

如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS

CreateJS最后两个部分，PreloadJS用来加载并统一管理你游戏中用到资源，图片，json文件等等，而SoundJS用来播放声音，两者的用法都非常的简单而且固定。

首先是SoundJS，顾名思义播放声音，使用时只需要先

createjs.Sound.registerSound("assets/sound.mp3", "soundname");

使用时调用：

createjs.Sound.play("soundname");

最后是PreloadJS，使用PreloadJS导入文件首先建立一个LoadQueue，然后即可使用它来载入单个文件，或者载入一个文件列表

var queue = new createjs.LoadQueue(false);//本地开发使用false即可

queue.installPlugin(createjs.Sound);//如果载入声音，必须先注册createjs.Sound

queue.on("complete", handleComplete, this);//载入完成后调用

queue.loadFile({id:"sound", src:"sound.mp3"});//载入单个文件

//载入一个文件列表

queue.loadManifest([

{id: "myImage1", src:"Image1.jpg"}，

{id: "myImage2", src:"Image2.jpg"}

{id: "myImage3", src:"Image3.jpg"}

{id: "myImage4", src:"Image4.jpg"}

]);

function handleComplete() {

createjs.Sound.play("sound");

var image = queue.getResult("myImage1");

var bitmap = new createjs.Bitmap(image);

}

你可以把游戏中用到的所有资源，先编辑到一个manifest列表当中，可以是图片，json，css，js等等，最后使用loadManifest（manifest）导入

如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏

CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的：pre t="code" l="js"var stage, circle;

function init(){

stage = new createjs.Stage(document.getElementById('game'));

createjs.Ticker.addEventListener("tick", handleTick);

createjs.Ticker.setFPS(60);

circle = new createjs.Shape();

circle.graphics.f("red").dc(0,0,50);

circle.x = 0;

circle.y = 100;

stage.addChild(circle);

circle.addEventListener("click", function(event){

createjs.Ticker.setPaused(!createjs.Ticker.getPaused());

});

}

function handleTick(event){

if(!event.paused){

circle.x +=5;

if(circle.x 1000){

circle.x = 0;

}

}

stage.update();

}

如何开始学习HTML5游戏开发？

依次掌握：前端页面重构，javascript高集成设计，PC端全栈项目开发，移动端项目开发，混合（Hybrid）开发，NodeJs全栈开发，游戏开发，PHP开发等专业技术。

投入时间和精力，以兴趣来驱动学习。有一定的自学能力和自控能力，有一套完整的教程资料，熟练使用stackoverflower，segmentfault等站点解决技术性的问题，自学起来难度不会太大。反之，报个班系统的学习开发所需的专业技术。