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

posted @   诚人小李  阅读(1693)  评论(1)    收藏  举报
编辑推荐:
· 我在厂里搞 wine 的日子
· 如何通过向量化技术比较两段文本是否相似?
· 35+程序员的转型之路:经济寒冬中的希望与策略
· JavaScript中如何遍历对象?
· 领域模型应用
阅读排行:
· 独立项目运营一周年经验分享
· 一款开源免费、通用的 WPF 主题控件包
· 独立开发,这条路可行吗?
· 【定时任务核心】究竟是谁在负责盯着时间,并在恰当时机触发任务?
· 解决了AI聊天的10个痛点后,我又做了一个新功能:交叉分析表
历史上的今天:
2014-10-09 OSI 网络七层模型(笔记)
2014-10-09 fiddler了解
点击右上角即可分享
微信分享提示