createjs 使用记录
createjs由几个库组成:
l,easeljs,这个是核心,包括了显示列表、事件机制;
2,preloadjs,用于预加载图片等;
3,tweenjs,用于控制元件的缓动;
4,soundjs,用于播放声音。
FPS : 每秒传输帧数
## 简单测试
var canvas = document.getElementById('testCanvas');
stage = new createjs.Stage("testCanvas");
stage = new createjs.Stage(canvas);
w = stage.canvas.width;
h = stage.canvas.height;
spritesheet = new createjs.SpriteSheet({
'images':['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
'frames':{'height':100,'count':10,'width':75}
});
box = new createjs.Sprite(spritesheet);
box.play();
stage.addChild(box);
createjs.Ticker.setFPS(10);
createjs.Ticker.addEventListener('tick',tick);
function tick(){
stage.update();
}
处理文字和画布
var stage = new createjs.Stage('testcanvas');
var text = new createjs.Text('我是汉子','30px Microsoft Yahei','red');
stage.addChild(text);
text.text = '我是新的文字';
text.x = 100;
text.y = 100;
stage.update();
// beginFill 指定颜色填充 例如 "red", "#FF0000", or "rgba(255,0,0,0.5)")设置为空将导致没有填充。
// drawRect ( x y w h ) 绘图 和 rect 相似
// x轴 y轴 宽和高
var stage = new createjs.Stage('testcanvas');
var apen = new createjs.Graphics();
apen.beginFill("red").rect(0, 0, 50, 50);
var shape = new createjs.Shape(apen);
stage.addChild(shape);
stage.update(shape);
其他
createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循环方法,可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
物体碰撞伪代码
1,掉落物的y轴 大于等于 屏幕的高度时,则超出屏幕区域
2, 掉落物的x轴+掉落物的宽度 大于 托盘的x轴 并且
掉落物的x轴 小于 托盘的x轴+托盘的宽度 并且
掉落物的y轴+掉落物的高度 大于等于 托盘的y轴
参考地址
JavaScript游戏开发实例指南
http://blog.csdn.net/lanix516/article/details/47357747
http://blog.csdn.net/lanix516/article/details/47382401
createjs 使用记录的更多相关文章
- WEB前端学习资源清单
常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 <JavaScript 闯关记> JavaS ...
- [转] WEB前端学习资源清单
常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程 编程类中文书籍索引 深入理解JS系列 前端开发仓库 <JavaScript 闯关记> JavaS ...
- createjs记录坑
1.使用preloadjs加载资源: manifest = [ {src: "block.png", id: "ground"}, {src: "re ...
- 制作动画或小游戏——CreateJS基础类(一)
前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...
- CreateJS第0章- Canvas基础
最近网页游戏比较火,以前做过一些小游戏,但是过段时间就都忘了,今天在这里记录一下学习过程,以备后用.做网页游戏有很多种框架,我是flash程序用Adobe出品的CreateJS最容易.基本上继承了fl ...
- Html5游戏框架createJs的简单用法
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!http://www.it165.net/pro/html/201403/11105.html 楼主记忆力不好,最近刚好用了一下create ...
- 前端要怎么学createjs!!!???
前端想做js开发,可以.但是思维要变通,思维要重塑.为啥?因为被div+css坑的有点深.这些都是我自己总结的,不知道其他人是不是这样. 在我看来div+css算是开发吗?肯定不是,这些东西有难的东西 ...
- html游戏引擎,createJs框架
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! createJs网上的中文教程挺少的,以前UC有个Xcanvas的论坛有createJs的详细教程,但是随着XCanvas团队的解散,那个 ...
- 记一次debug记录:Uncaught SyntaxError: Unexpected token ILLEGAL
在使用FIS3搭建项目的时候,遇到了一些问题,这里记录下. 这里是发布搭建代码: // 代码发布时 fis.media('qa') .match('*.{js,css,png}', { useHash ...
随机推荐
- 【HBase学习】Apache HBase项目简介
原创声明:转载请注明作者和原始链接 http://www.cnblogs.com/zhangningbo/p/4068957.html 英文原版:http://hbase.apache.o ...
- Node.js中的ORM
ORM2是一款基于Node.js实现的ORM框架,名字相当的霸气,算是同类框架中非常出色的一款,具体介绍请猛击:https://github.com/dresende/node-orm2 刚接触Nod ...
- C++中的虚函数解析[The explanation for virtual function of CPlusPlus]
1.什么是虚函数? ...
- c语言中格式化输出函数的研究
<一>; 1.前言 在gcc编程中,我们比较经常用到的字符格式化输出函数是printf的,实际上gcc继承了c语言处理字符具有强大功能的风格,它提供了一系列的格式化输出函数,主要存在两个库 ...
- CodeForces 696A(Lorenzo Von Matterhorn ) & CodeForces 696B(Puzzles )
A,给一棵完全二叉树,第一个操作,给两个点,两点路径上的所有边权值都增加w,第二个操作,给两个点,求两点路径上的所有边权值和. 我看一眼题就觉得是树链剖分,而我又不会树链剖分,扔掉. 后来查了题解,首 ...
- Hadoop概念学习系列之谈谈RPC(三十三)
RPC-------->远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存在,如TCP或UDP,为通信程序之间携带信息数 ...
- SpringMVC日期参数自动绑定
Controller: @RequestMapping("/addUser") public String addUser(User user) { ... } Model: pu ...
- hdu 1595 find the longest of the shortest【最短路枚举删边求删除每条边后的最短路,并从这些最短路中找出最长的那条】
find the longest of the shortest Time Limit: 1000/5000 MS (Java/Others) Memory Limit: 32768/32768 ...
- C#抽象工厂模式的几种实现方法及比较
C#抽象工厂模式的几种实现方法及比较 本文转自:http://hi.baidu.com/tufeivista/blog/item/2ca9702978dcc6fb99250a81.html 利用设计模 ...
- vertical-align:top在单词和中文的表现
<ul> <li> <img src="../../saasdist_v2/images/staff-img.png" alt="" ...