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
如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]
如果您想转载本博客,请注明出处
如果您对本文有意见或者建议,欢迎留言
感谢您的阅读,请关注我的后续博客
【推荐】AI 的力量,开发者的翅膀:欢迎使用 AI 原生开发工具 TRAE
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 源码浅析:SpringBoot main方法结束为什么程序不停止
· C#性能优化:为何 x * Math.Sqrt(x) 远胜 Math.Pow(x, 1.5)
· 本可避免的P1事故:Nginx变更导致网关请求均响应400
· 还在手写JSON调教大模型?.NET 9有新玩法
· 复杂业务系统线上问题排查过程
· AI 的力量,开发者的翅膀:欢迎使用字节旗下的 AI 原生开发工具 TRAE
· 「闲聊文」准大三的我,思前想后还是不搞java了
· C#性能优化:为何 x * Math.Sqrt(x) 远胜 Math.Pow(x, 1.5)
· 千万级的大表如何新增字段?
· 《HelloGitHub》第 112 期
2014-10-09 OSI 网络七层模型(笔记)
2014-10-09 fiddler了解