createjs 使用记录

时间：2023-03-09 14:28:12
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

相关文章