56 |
57 |
58 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
80 |
81 |
82 |
使用 Quark.EventManager 注册舞台事件
83 |
var em = new Q.EventManager();
84 | var events = Q.supportTouch ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"];
85 | em.registerStage(stage, events);
86 |
87 |
88 |
89 |
90 |
为显示对象编写事件侦听函数
91 |
obj.addEventListener("touchend", function(e)
92 | {
93 | //do something
94 | });
95 |
事件侦听函数会接收一个事件参数e，它包含e.eventX，e.eventY，e.eventTarget，e.lastEventTarget等属性。
96 |
97 |
98 |
99 |
100 |
删除事件侦听
101 |
//删除指定事件类型的指定侦听函数
102 | obj.removeEventListener("touchend", touchendHandler);
103 |
104 | //删除指定事件类型的所有侦听函数
105 | obj.removeEventListener("touchend");
106 |
107 |
108 |
109 |
110 |
删除舞台事件
111 |
em.unregisterStage(stage, events);
112 |
113 |
114 |
115 |
116 |
一些方法的简写
117 |
obj.on = obj.addEventListener
118 | obj.un = obj.removeEventListener
119 | obj.fire = obj.dispatchEvent
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | © QuarkJS Dev-Team 2012
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
--------------------------------------------------------------------------------
/src/base/display/Button.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数.
6 | * @name Button
7 | * @augments DisplayObjectContainer
8 | * @class Button类继承自DisplayObjectContainer，是Quark中的简单按钮实现。
9 | * @argument {Object} props 一个对象，包含以下属性：
10 | *
image - Image对象。
11 | *
up - 按钮弹起状态下的显示帧数组对象。如：[0,0,50,50]。
12 | *
over - 按钮经过状态下的显示帧数组对象。如：[50,0,50,50]。
13 | *
down - 按钮按下状态下的显示帧数组对象。如：[100,0,50,50]。
14 | *
disabled - 按钮不可用状态下的显示帧数组对象。如：[150,0,50,50]。
15 | */
16 | var Button = Quark.Button = function(props)
17 | {
18 | this.state = Button.UP;
19 | this.enabled = true;
20 |
21 | props = props || {};
22 | Button.superClass.constructor.call(this, props);
23 | this.id = props.id || Quark.UIDUtil.createUID("Button");
24 |
25 | this._skin = new Quark.MovieClip({id:"skin", image:props.image});
26 | this.addChild(this._skin);
27 | this._skin.stop();
28 |
29 | this.eventChildren = false;
30 | if(props.useHandCursor === undefined) this.useHandCursor = true;
31 | if(props.up) this.setUpState(props.up);
32 | if(props.over) this.setOverState(props.over);
33 | if(props.down) this.setDownState(props.down);
34 | if(props.disabled) this.setDisabledState(props.disabled);
35 | };
36 | Quark.inherit(Button, Quark.DisplayObjectContainer);
37 |
38 | /**
39 | * 按钮的弹起状态。常量值。
40 | */
41 | Button.UP = "up";
42 | /**
43 | * 按钮的经过状态。常量值。
44 | */
45 | Button.OVER = "over";
46 | /**
47 | * 按钮的按下状态。常量值。
48 | */
49 | Button.DOWN = "down";
50 | /**
51 | * 按钮的不可用状态。常量值。
52 | */
53 | Button.DISABLED = "disabled";
54 |
55 | /**
56 | * 设置按钮弹起状态的显示帧。
57 | * @param {Array} upState 弹起状态的显示帧。
58 | * @return {Button} 返回按钮本身。
59 | */
60 | Button.prototype.setUpState = function(upState)
61 | {
62 | upState.label = Button.UP;
63 | this._skin.setFrame(upState, 0);
64 | this.upState = upState;
65 | return this;
66 | };
67 |
68 | /**
69 | * 设置按钮经过状态的显示帧。
70 | * @param {Array} overState 经过状态的显示帧。
71 | * @return {Button} 返回按钮本身。
72 | */
73 | Button.prototype.setOverState = function(overState)
74 | {
75 | overState.label = Button.OVER;
76 | this._skin.setFrame(overState, 1);
77 | this.overState = overState;
78 | return this;
79 | };
80 |
81 | /**
82 | * 设置按钮按下状态的显示帧。
83 | * @param {Array} downState 点击状态的显示帧。
84 | * @return {Button} 返回按钮本身。
85 | */
86 | Button.prototype.setDownState = function(downState)
87 | {
88 | downState.label = Button.DOWN;
89 | this._skin.setFrame(downState, 2);
90 | this.downState = downState;
91 | return this;
92 | };
93 |
94 | /**
95 | * 设置按钮不可用状态的显示帧。
96 | * @param {Array} disabledState 不可用状态的显示帧。
97 | * @return {Button} 返回按钮本身。
98 | */
99 | Button.prototype.setDisabledState = function(disabledState)
100 | {
101 | disabledState.label = Button.DISABLED;
102 | this._skin.setFrame(disabledState, 3);
103 | this.disabledState = disabledState;
104 | return this;
105 | };
106 |
107 | /**
108 | * 设置按钮是否启用。
109 | * @param {Boolean} enabled 指定按钮是否启用。默认为false。
110 | * @return {Button} 返回按钮本身。
111 | */
112 | Button.prototype.setEnabled = function(enabled)
113 | {
114 | if(this.enabled == enabled) return this;
115 | this.eventEnabled = this.enabled = enabled;
116 | if(!enabled)
117 | {
118 | if(this.disabledState) this._skin.gotoAndStop(Button.DISABLED);
119 | else this._skin.gotoAndStop(Button.UP);
120 | }else
121 | {
122 | if(this._skin.currentFrame == 3) this._skin.gotoAndStop(Button.UP);
123 | }
124 | return this;
125 | };
126 |
127 | /**
128 | * 改变按钮的显示状态。
129 | * @param {String} state 指定按钮的显示状态。
130 | * @return {Button} 返回按钮本身。
131 | */
132 | Button.prototype.changeState = function(state)
133 | {
134 | if(this.state == state) return;
135 | this.state = state;
136 |
137 | switch(state)
138 | {
139 | case Button.OVER:
140 | case Button.DOWN:
141 | case Button.UP:
142 | if(!this.enabled) this.eventEnabled = this.enabled = true;
143 | this._skin.gotoAndStop(state);
144 | break;
145 | case Button.DISABLED:
146 | this.setEnabled(false);
147 | break;
148 | }
149 | return this;
150 | };
151 |
152 | /**
153 | * 按钮的默认事件处理行为。
154 | * @private
155 | */
156 | Button.prototype.dispatchEvent = function(e)
157 | {
158 | if(!this.enabled) return;
159 |
160 | switch(e.type)
161 | {
162 | case "mousemove":
163 | if(this.overState) this.changeState(Button.OVER);
164 | break;
165 | case "mousedown":
166 | case "touchstart":
167 | case "touchmove":
168 | if(this.downState) this.changeState(Button.DOWN);
169 | break;
170 | case "mouseup":
171 | if(this.overState) this.changeState(Button.OVER);
172 | else this.changeState(Button.UP);
173 | break;
174 | case "mouseout":
175 | case "touchout":
176 | case "touchend":
177 | if(this.upState) this.changeState(Button.UP);
178 | break;
179 | }
180 | Button.superClass.dispatchEvent.call(this, e);
181 | };
182 |
183 | /**
184 | * 把Button的drawable置空，否则传入image参数时会绘制成Button的背景。
185 | * @private
186 | */
187 | Button.prototype.setDrawable = function(drawable)
188 | {
189 | Button.superClass.setDrawable.call(this, null);
190 | };
191 |
192 | })();
--------------------------------------------------------------------------------
/docs/tutorial_infrastructure.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
QuarkJS - An HTML5 Game Framework
7 |
8 |
9 |
10 |
11 |
12 |
13 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
54 |
55 |
56 |
57 |
58 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
80 |
Quark的基础架构图：
81 |
82 |
83 |
84 |
85 |
显示对象列表（Display Object List）
86 |
87 | 显示对象列表是Quark中参照Actionscript3中的显示对象列表设计的一套显示和管理对象的结构。他跟HTML的DOM树结构非常相似。
88 | 显示对象列表的根是舞台stage，可以通过调用 stage.step() 方法来更新显示对象列表。
89 |
90 |
91 |
92 |
93 |
94 |
上下文（Context）
95 |
96 | Context在Quark中负责对象的渲染，还包括位移、旋转、缩放等变换。参照CanvasRenderingContext2D的设计思路，我们实现了CanvasContext和DOMContext。
97 | CanvasContext采用canvas渲染，DOMContext采用DOM和CSS的 background 和 transform(3d) 进行渲染。
98 | Context有一个画布canvas属性，这是显示对象将被渲染到的地方。canvas属性是一个 HTMLCanvasElement 或 HTMLDivElement 对象。
99 | Context会被注入到舞台stage里，显示对象列表更新的时候会调用context的 transform() 进行变换，再调用 draw() 方法绘制对象。
100 |
101 |
102 |
103 |
104 |
105 |
计时器（Timer）
106 |
107 | Timer是一个计时器。在Quark中用来驱动显示对象列表的更新和渲染。
108 | Timer通过 addListener() 方法来注册侦听器(侦听器需实现 step() 方法)。
109 |
110 |
111 |
112 |
113 |
114 |
显示对象列表、上下文、计时器三者分工合作，共同组成了Quark Base的架构。
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | © QuarkJS Dev-Team 2012
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
--------------------------------------------------------------------------------
/src/base/context/DOMContext.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 检测浏览器是否支持transform或transform3D。
6 | */
7 | var testElem = document.createElement("div");
8 | var supportTransform = testElem.style[Quark.cssPrefix + "Transform"] != undefined;
9 | var supportTransform3D = testElem.style[Quark.cssPrefix + "Perspective"] != undefined;
10 | var docElem = document.documentElement;
11 | if(supportTransform3D && 'webkitPerspective' in docElem.style)
12 | {
13 | testElem.id = 'test3d';
14 | var st = document.createElement('style');
15 | st.textContent = '@media (-webkit-transform-3d){#test3d{height:3px}}';
16 | document.head.appendChild(st);
17 | docElem.appendChild(testElem);
18 |
19 | supportTransform3D = testElem.offsetHeight === 3;
20 |
21 | st.parentNode.removeChild(st);
22 | testElem.parentNode.removeChild(testElem);
23 | };
24 | Quark.supportTransform = supportTransform;
25 | Quark.supportTransform3D = supportTransform3D;
26 | if(!supportTransform)
27 | {
28 | trace("Warn: DOMContext requires css transfrom support.");
29 | return;
30 | }
31 |
32 | /**
33 | * 构造函数.
34 | * @name DOMContext
35 | * @augments Context
36 | * @class DOMContext是DOM渲染上下文，将显示对象以dom方式渲染到舞台上。
37 | * @param {Object} props 一个对象。包含以下属性：
38 | *
canvas - 渲染上下文所对应的画布，HTMLDivElement对象。
39 | */
40 | var DOMContext = Quark.DOMContext = function(props)
41 | {
42 | DOMContext.superClass.constructor.call(this, props);
43 | };
44 | Quark.inherit(DOMContext, Quark.Context);
45 |
46 | /**
47 | * 绘制指定对象的DOM到舞台上。
48 | * @param {DisplayObject} target 要绘制的显示对象。
49 | */
50 | DOMContext.prototype.draw = function(target)
51 | {
52 | if(!target._addedToDOM)
53 | {
54 | var parent = target.parent;
55 | var targetDOM = target.getDrawable(this);
56 | if(parent != null)
57 | {
58 | var parentDOM = parent.getDrawable(this);
59 | if(targetDOM.parentNode != parentDOM) parentDOM.appendChild(targetDOM);
60 | if(parentDOM.parentNode == null && parent instanceof Quark.Stage)
61 | {
62 | this.canvas.appendChild(parentDOM);
63 | parent._addedToDOM = true;
64 | }
65 | target._addedToDOM = true;
66 | }
67 | }
68 | };
69 |
70 | /**
71 | * 对指定的显示对象的DOM进行css属性设置或变换。
72 | * @param {DisplayObject} target 要进行属性设置或变换的显示对象。
73 | */
74 | DOMContext.prototype.transform = function(target)
75 | {
76 | var image = target.getDrawable(this);
77 | //优化：可以对那些添加到DOM后就不再需要变换的显示对象设置transformEnabled=false。
78 | if(!target.transformEnabled && target._addedToDOM) return;
79 |
80 | var prefix = Quark.cssPrefix,
81 | origin = prefix + "TransformOrigin",
82 | transform = prefix + "Transform",
83 | style = image.style;
84 |
85 | if(!style.display || target.propChanged("visible", "alpha"))
86 | {
87 | style.display = (!target.visible || target.alpha <= 0) ? "none" : "";
88 | }
89 | if(!style.opacity || target.propChanged("alpha"))
90 | {
91 | style.opacity = target.alpha;
92 | }
93 | if(!style.backgroundPosition || target.propChanged("rectX", "rectY"))
94 | {
95 | style.backgroundPosition = (-target.rectX) + "px " + (-target.rectY) + "px";
96 | }
97 | if(!style.width || target.propChanged("width", "height"))
98 | {
99 | style.width = target.width + "px";
100 | style.height = target.height + "px";
101 | }
102 | if(!style[origin] || target.propChanged("regX", "regY"))
103 | {
104 | style[origin] = target.regX + "px " + target.regY + "px";
105 | }
106 | if(!style[transform] || target.propChanged("x", "y", "regX", "regY", "scaleX", "scaleY", "rotation"))
107 | {
108 | var css = Quark.supportTransform3D ? getTransformCSS(target, true) : getTransformCSS(target, false);
109 | style[transform] = css;
110 | }
111 | if(!style.zIndex || target.propChanged("_depth"))
112 | {
113 | style.zIndex = target._depth;
114 | }
115 | if(target.mask != null)
116 | {
117 | style[Q.cssPrefix + "MaskImage"] = target.mask.getDrawable(this).style.backgroundImage;
118 | style[Q.cssPrefix + "MaskRepeat"] = "no-repeat";
119 | style[Q.cssPrefix + "MaskPosition"] = target.mask.x + "px " + target.mask.y + "px";
120 | }
121 | style.pointerEvents = target.eventEnabled ? "auto" : "none";
122 | };
123 |
124 | /**
125 | * 根据指定对象生成css变换的样式。
126 | * @param {DisplayObject} target 显示对象。
127 | * @param {Boolean} useTransform3D 是否采用transform—3d变换。在支持transform—3d的浏览器中推荐使用。默认为false。
128 | * @return {String} 生成的css样式。
129 | */
130 | function getTransformCSS(target, useTransform3D)
131 | {
132 | var css = "";
133 |
134 | if(useTransform3D)
135 | {
136 | css += "translate3d(" + (target.x-target.regX) + "px, " + (target.y-target.regY) + "px, 0px)"
137 | + "rotate3d(0, 0, 1, " + target.rotation + "deg)"
138 | + "scale3d(" + target.scaleX + ", " + target.scaleY + ", 1)";
139 | }else
140 | {
141 | css += "translate(" + (target.x-target.regX) + "px, " + (target.y-target.regY) + "px)"
142 | + "rotate(" + target.rotation + "deg)"
143 | + "scale(" + target.scaleX + ", " + target.scaleY + ")";
144 | }
145 | return css;
146 | };
147 |
148 | /**
149 | * 隐藏指定对象渲染的dom节点，用于当显示对象visible=0或alpha=0等情况，由显示对象内部方法调用。
150 | * @param {DisplayObject} target 要隐藏的显示对象。
151 | */
152 | DOMContext.prototype.hide = function(target)
153 | {
154 | target.getDrawable(this).style.display = "none";
155 | };
156 |
157 | /**
158 | * 删除指定显示对象渲染的dom节点，由显示对象内部方法调用。
159 | * @param {DisplayObject} target 要删除的显示对象。
160 | */
161 | DOMContext.prototype.remove = function(target)
162 | {
163 | var targetDOM = target.getDrawable(this);
164 | var parentNode = targetDOM.parentNode;
165 | if(parentNode != null) parentNode.removeChild(targetDOM);
166 | target._addedToDOM = false;
167 | };
168 |
169 | })();
--------------------------------------------------------------------------------
/src/base/display/Text.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数。
6 | * @name Text
7 | * @augments DisplayObject
8 | * @class Text类提供简单的文字显示功能。
9 | * @property text 指定要显示的文本内容。
10 | * @property font 指定使用的字体样式。
11 | * @property color 指定使用的字体颜色。
12 | * @property textAlign 指定文本的对齐方式。可以是以下任意一个值："start", "end", "left", "right", and "center"。
13 | * @property outline 指定文本是绘制边框还是填充。
14 | * @property maxWidth 指定文本绘制的最大宽度。仅在canvas中使用。
15 | * @property lineWidth 指定文本行的最大宽度。
16 | * @property lineSpacing 指定文本的行距。单位为像素。
17 | * @property fontMetrics 指定字体的度量对象。一般可忽略此属性，可用于提高性能。
18 | */
19 | var Text = Quark.Text = function(props)
20 | {
21 | this.text = "";
22 | this.font = "12px arial";
23 | this.color = "#000";
24 | this.textAlign = "start";
25 | this.outline = false;
26 | this.maxWidth = 10000;
27 | this.lineWidth = null;
28 | this.lineSpacing = 0;
29 | this.fontMetrics = null;
30 |
31 | props = props || {};
32 | Text.superClass.constructor.call(this, props);
33 | this.id = Quark.UIDUtil.createUID("Text");
34 |
35 | if(this.fontMetrics == null) this.fontMetrics = Text.getFontMetrics(this.font);
36 | }
37 | Quark.inherit(Text, Quark.DisplayObject);
38 |
39 |
40 | /**
41 | * 在指定的渲染上下文上绘制文本。
42 | * @private
43 | */
44 | Text.prototype._draw = function(context)
45 | {
46 | if(!this.text || this.text.length == 0) return;
47 |
48 | //set drawing style
49 | context.font = this.font;
50 | context.textAlign = this.textAlign;
51 | context.textBaseline = "top";
52 | if(this.outline) context.strokeStyle = this.color;
53 | else context.fillStyle = this.color;
54 |
55 | //find and draw all explicit lines
56 | var lines = this.text.split(/\r\n|\r|\n|
/);
57 | var y = 0, lineHeight = this.fontMetrics.height + this.lineSpacing;
58 | this.width = this.lineWidth || 0;
59 |
60 | for(var i = 0, len = lines.length; i < len; i++)
61 | {
62 | var line = lines[i], width = context.measureText(line).width;
63 |
64 | //check if the line need to split
65 | if(this.lineWidth == null || width < this.lineWidth)
66 | {
67 | if(width > this.width) this.width = width;
68 | this._drawTextLine(context, line, y);
69 | y += lineHeight;
70 | continue;
71 | }
72 |
73 | //split the line by each single word, loop to find the break
74 | //TODO: optimize the regular expression
75 | var words = line.split(/([^\x00-\xff]|\b)/), str = words[0];
76 | for(var j = 1, wlen = words.length; j < wlen; j++)
77 | {
78 | var word = words[j];
79 | if(!word || word.length == 0) continue;
80 |
81 | var newWidth = context.measureText(str + word).width;
82 | if(newWidth > this.lineWidth)
83 | {
84 | this._drawTextLine(context, str, y);
85 | y += lineHeight;
86 | str = word;
87 | }else
88 | {
89 | str += word;
90 | }
91 | }
92 |
93 | //draw remaining string
94 | this._drawTextLine(context, str, y);
95 | y += lineHeight;
96 | }
97 |
98 | this.height = y;
99 | };
100 |
101 | /**
102 | * 在指定的渲染上下文上绘制一行文本。
103 | * @private
104 | */
105 | Text.prototype._drawTextLine = function(context, text, y)
106 | {
107 | var x = 0;
108 | switch(this.textAlign)
109 | {
110 | case "center":
111 | x = this.width*0.5;
112 | break;
113 | case "right":
114 | case "end":
115 | x = this.width;
116 | break;
117 | };
118 | if(this.outline) context.strokeText(text, x, y, this.maxWidth);
119 | else context.fillText(text, x, y, this.maxWidth);
120 | };
121 |
122 | /**
123 | * 指定渲染文本的字体样式。
124 | */
125 | Text.prototype.setFont = function(font, ignoreFontMetrics)
126 | {
127 | if(this.font == font) return;
128 | this.font = font;
129 | if(!ignoreFontMetrics) this.fontMetrics = Text.getFontMetrics(this.font);
130 | };
131 |
132 | /**
133 | * Overrideed.
134 | * @private
135 | */
136 | Text.prototype.render = function(context)
137 | {
138 | if(context instanceof Quark.DOMContext)
139 | {
140 | var dom = this.getDrawable(context), style = dom.style;
141 | style.font = this.font;
142 | style.textAlign = this.textAlign;
143 | style.color = this.color;
144 | //Notice: be care of width/height might be 0.
145 | style.width = this.width + "px";
146 | style.height = this.height + "px";
147 | style.lineHeight = (this.fontMetrics.height + this.lineSpacing) + "px";
148 | dom.innerHTML = this.text;
149 | }
150 | Text.superClass.render.call(this, context);
151 | };
152 |
153 | /**
154 | * Overrideed.
155 | * @private
156 | */
157 | Text.prototype.getDrawable = function(context)
158 | {
159 | //for DOMContext drawing only
160 | if(this.drawable == null) this.setDrawable(Quark.createDOM("div"), true);
161 | return this.drawable.get(this, context);
162 | };
163 |
164 | /**
165 | * 此方法可帮助我们得到指定字体的行高、基准线等度量信息。
166 | * @method getFontMetrics
167 | * @return {Object} 返回字体的度量信息，包括height、ascent、descent等。
168 | */
169 | Text.getFontMetrics = function(font)
170 | {
171 | var metrics = { };
172 | var elem = Quark.createDOM("div", {style:{font:font, position:"absolute"}, innerHTML:"M"});
173 | document.body.appendChild(elem);
174 | //the line height of the specific font style.
175 | metrics.height = elem.offsetHeight;
176 |
177 | //trick: calculate baseline shift by creating 1px height element that will be aligned to baseline.
178 | elem.innerHTML = '
';
179 | var baseline = elem.childNodes[0];
180 | //the ascent value is the length from the baseline to the top of the line height.
181 | metrics.ascent = baseline.offsetTop + baseline.offsetHeight;
182 | //the descent value is the length from the baseline to the bottom of the line height.
183 | metrics.descent = metrics.height - metrics.ascent;
184 |
185 | document.body.removeChild(elem);
186 | return metrics;
187 | };
188 |
189 |
190 | })();
--------------------------------------------------------------------------------
/docs/tutorial_displayobject.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | QuarkJS - An HTML5 Game Framework
7 |
56 |
57 |
58 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | 显示对象是Quark显示对象列表结构的顶级对象。
84 | Image即图片。一般包括 HTMLImageElement、HTMLCanvasElement 和 HTMLVideoElement。在Quark中图片会被封装成一个Quark.Drawable 的对象。通过 setDrawable() 和 getDrawable() 接口来设置和获取。
85 | Data即数据。包括显示对象的 x、y、width、height、alpha、rotation、visible、scaleX、scaleY、regX、regY、eventEnabled、polyArea等属性以及用户自定义的各种数据。
86 | 可以通过继承扩展不同的显示对象。
87 |
88 |
89 |
90 |
91 |
92 |
显示对象容器（DisplayObjectContainer）
93 |
94 | 显示对象容器就是一种可以容纳子对象的显示对象。显示对象和显示对象容器的嵌套就构成了Quark显示对象列表结构。这跟HTML的DOM树结构非常相似。
95 | 舞台Stage是一种特殊的显示对象。他是显示对象结构的根root，总入口。
96 | 显示对象容器通过 addChild() 和 removeChild() 等方法来添加和删除子对象。
97 | 显示对象容器里的子对象采用自动深度管理方法。一般新添加的对象会显示在之前添加的对象之上。可以通过 setChildIndex() 等方法来改变子对象在容器中的索引位置，即深度。
98 | 显示对象容器提供 getObjectUnderPoint() 方法来获得某一点下的子对象。
99 |
100 |
101 |
102 |
103 |
104 |
显示对象生命周期（DisplayObject LifeCircle）
105 |
106 |
107 | 显示对象的生命周期开始于添加到显示对象列表 container.addChild(obj)。
108 | 显示对象的生命周期结束于移除显示对象列表 container.removeChild(obj)。
109 | 在通过 stage.step() 方法刷新舞台的显示对象列表时，会依次循环调用显示对象的 update() 和 render() 方法来实现更新对象数据和渲染。
110 |
111 |
112 |
113 |
114 |
115 |
显示对象的事件处理机制（Event Mechanism）
116 |
117 | Quark提供一个简单的 EventManager 来做系统事件的监听和回调，通过 EventManager.registerStage() 方法注册相应的事件如mousedown、touchstart等到舞台，舞台会自动转发给触发事件的显示对象。
118 | 可以通过 obj.addEventListener() 方法让显示对象监听和响应各种事件。
119 |
120 |
121 |
122 |
123 |
124 |
显示对象的碰撞检测（Object Collision）
125 |
126 | Quark目前只提供矩形碰撞(Rectangle Collision)，暂不支持像素级别的碰撞检测(Pixel Collision)。
127 | 显示对象提供 getBounds() 方法获得其外包围矩形区域。
128 | 显示对象提供 hitTestPoint() 和 hitTestObject() 等方法来做点或对象的碰撞检测。
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | © QuarkJS Dev-Team 2012
140 |
141 |
142 |
QuarkJS - An HTML5 Game Framework
7 |
56 |
57 |
58 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
86 |
87 |
88 |
2. 创建渲染上下文
89 |
上下文Context在quark中负责渲染，目前有DOMContext和CanvasContext两种。
90 |
//create a DOMContext
91 | var container = Quark.getDOM("container");
92 | var domContext = new Quark.DOMContext({canvas:container});
93 |
94 | //or create a CanvasContext
95 | var container = Quark.getDOM("container");
96 | var canvas = Quark.createDOM("canvas", {width:480, height:320, style:
97 | {
98 | position:"absolute",
99 | backgroundColor:"#fff"
100 | }});
101 | container.appendChild(canvas);
102 | var canvasContext = new Quark.CanvasContext({canvas:canvas});
103 |
104 |
105 |
106 |
3. 创建舞台
107 |
显示对象通过Context在舞台Stage上被渲染出来。
108 |
var stage = new Quark.Stage({width:480, height:320, context:canvasContext, update:function()
109 | {
110 | //write your own update code here
111 | }});
112 |
113 |
114 |
115 |
4. 创建计时器
116 |
舞台Stage上的物体的运动等变化，都是通过一个计时器Timer不断地调用Stage.step()方法来实现刷新的。
117 |
var fps = 60;
118 | var timer = new Q.Timer(1000/fps);
119 | timer.addListener(stage);
120 | timer.start();
121 |
122 |
123 |
124 |
5. 注册舞台事件
125 |
要想舞台上的显示对象能响应用户的点击、触碰等交互事件，就必需为舞台注册相应的事件。
126 |
var em = new Quark.EventManager();
127 | var events = Quark.supportTouch ? ["touchstart", "touchmove", "touchend"] : ["mousedown", "mousemove", "mouseup"];
128 | em.registerStage(stage, events);
129 |
130 |
131 |
132 |
6. 准备工作完成
133 |
至此，初始化工作基本完成。你可以开始利用quark提供的各种类和方法来创建各种显示对象。开始创建你的第一个HTML5游戏吧！
134 |
var bmp = new Quark.Bitmap({image:imgElem, rect:[0,0,100,100], update:function()
135 | {
136 | //update code here
137 | }});
138 | stage.addChild(bmp);
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | © QuarkJS Dev-Team 2012
149 |
150 |
151 |
QuarkJS API Reference
7 |
56 |
57 |
58 |
104 |
105 |
106 |
全部类
107 |
108 |
109 |
110 |
111 | 类 说明
114 |
115 |
116 |
117 |
118 |
119 |
120 | Audio类是原生Audio的封装。 Bitmap位图类，表示位图图像的显示对象，简单说它就是Image对象的某个区域的抽象表示。 Button类继承自DisplayObjectContainer，是Quark中的简单按钮实现。 CanvasContext是Canvas渲染上下文，将显示对象渲染到指定的Canvas上。 Context是Quark框架中显示对象结构的上下文，实现显示对象结构的渲染。此类为抽象类。 DisplayObject类是可放在舞台上的所有显示对象的基类。DisplayObject类定义了若干显示对象的基本属性。渲染一个DisplayObject其实是进行若干变换后再渲染其drawable对象。 DisplayObjectContainer类继承自DisplayObject，是显示列表中显示对象容器的基类。每个DisplayObjectContainer对象都有自己的子级列表children，用于组织对象的Z轴顺序。注意：DisplayObjectContainer对象的宽高默认为0，在autoSize=false的情况下，需要手动设置宽高。 DOMContext是DOM渲染上下文，将显示对象以dom方式渲染到舞台上。 Drawable是可绘制图像或DOM的包装。当封装的是HTMLImageElement、HTMLCanvasElement或HTMLVideoElement对象时，可同时支持canvas和dom两种渲染方式，而如果封装的是dom时，则不支持canvas方式。 EventDispatcher类是可调度事件的类的基类，它允许显示列表上的任何对象都是一个事件目标。 EventManager是一个简单的系统事件管理器。 Graphics类包含一组创建矢量图形的方法。 ImageLoader类是一个图片加载器，用于动态加载图片资源。 MovieClip影片剪辑类，表示一组动画片段。MovieClip是由Image对象的若干矩形区域组成的集合序列，并按照一定规则顺序播放。帧frame的定义格式为：{rect:*required*, label:"", interval:0, stop:0, jump:-1}。 Quark是QuarkJS框架的全局对象，也是框架内部所有类的全局命名空间。在全局Q未被占用的情况下，也可以使用其缩写Q。 舞台是显示对象的根，所有显示对象都会被添加到舞台上，必须传入一个context使得舞台能被渲染。舞台是一种特殊显示对象容器，可以容纳子显示对象。 Text类提供简单的文字显示功能。 Timer是一个计时器。它能按指定的时间序列运行代码。 Tween类是一个缓动动画类。使用它能实现移动、改变大小、淡入淡出等效果。
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 | © QuarkJS Dev-Team 2012
168 |
169 |
170 |
QuarkJS - An HTML5 Game Framework
7 |
56 |
57 |
58 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
85 |
86 |
87 |
1. 准备游戏舞台容器
88 |
<div id="container" style="position:absolute;left:0;top:0;width:480px;height:320px;background:#eee;"></div>
89 | <img id="bodyWalk" src="images/body_walk.png" style="display:none;" />
90 | <img id="headIdle" src="images/head_idle.png" style="display:none;" />
91 |
这里的容器就是一个普通的div，并设定好其宽高。另外为了演示方便，我们把项目所需的2个图片素材使用img标签做了预加载。
92 |
93 |
94 |
95 |
2. 设置游戏的背景
96 |
container = Q.getDOM("container");
97 | container.style.background = "-ms-linear-gradient(top, #00889d, #94d7e1, #58B000)";
98 | container.style.background = "-moz-linear-gradient(top, #00889d, #94d7e1, #58B000)";
99 | container.style.background = "-webkit-gradient(linear, 0 0, 0 bottom, from(#00889d), to(#58B000), color-stop(0.5,#94d7e1))";
100 | container.style.background = "-o-linear-gradient(top, #00889d, #94d7e1, #58B000)";
101 | container.style.filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00889d, endColorstr=#94d7e1)";
102 |
这里使用了css的线性渐变背景。
103 |
104 |
105 |
106 |
3. 初始化上下文
107 |
params = Q.getUrlParams();
108 | if(params.canvas)
109 | {
110 | var canvas = Quark.createDOM("canvas", {width:480, height:320, style:{position:"absolute",backgroundColor:"#eee"}});
111 | container.appendChild(canvas);
112 | context = new Quark.CanvasContext({canvas:canvas});
113 | }else{
114 | context = new Quark.DOMContext({canvas:container});
115 | }
116 |
上下文在quark中负责渲染工作。这里可以根据URL参数canvas来选择使用CanvasContext还是DOMContext。
117 |
118 |
119 |
120 |
4. 初始化舞台
121 |
stage = new Q.Stage({context:context, width:480, height:320,
122 | update:function()
123 | {
124 | frames++;
125 | }});
126 |
127 | timer = new Q.Timer(1000/30);
128 | timer.addListener(stage);
129 | timer.start();
130 |
131 | em = new Q.EventManager();
132 | var events = Q.supportTouch ? ["touchend"] : ["mouseup"];
133 | em.registerStage(stage, events, true, true);
134 |
在这一步，我们初始化了一个舞台，并把刚才创建的上下文context传给舞台。这样quark就知道如何把舞台上面的元素渲染出来了。但是舞台默认是静止的，不会主动刷新，因此我们需要一个计时器timer来定时更新舞台，从而驱动整个游戏运行。然后注册舞台事件，使舞台上的元素能接收交互事件，这里只接收touchend和mouseup事件。
135 |
136 |
137 |
138 |
5. 把小松鼠添加到舞台
139 |
squirrel = new Squirrel({id:"squirrel", x:200, y:160, autoSize:true});
140 | stage.addChild(squirrel);
141 |
142 | squirrel.addEventListener(events[0], squirrel.jump);
143 |
创建一只小松鼠，并使用stage.addChild()方法添加到舞台。这里的松鼠类Squirrel是我们预先创建好的，待会再讲解如何创建这个类。通过addEventListener()方法为松鼠添加touchend或mouseup事件侦听，这样玩家就可以控制其跳跃。
144 |
145 |
146 |
147 |
6. 创建松鼠类Squirrel
148 |
var Squirrel = function(props)
149 | {
150 | Squirrel.superClass.constructor.call(this, props);
151 | this.init();
152 | };
153 | Q.inherit(Squirrel, Q.DisplayObjectContainer);
154 |
Squirrel类是在Squirrel.js文件中实现的。在这里松鼠是由头部和身体两部分组成，因此Squirrel类继承自DisplayObjectContainer容器类。
155 |
156 |
157 |
158 |
7. 构建松鼠的形象
159 |
this.head = new Q.MovieClip({id:"head", image:Q.getDOM("headIdle"), useFrames:true, interval:2, x:5, y:0});
160 | this.head.addFrame([
161 | {rect:[0,0,66,56]},
162 | {rect:[69,0,66,56]},
163 | {rect:[138,0,66,56]},
164 | {rect:[207,0,66,56]}]);
165 |
166 | this.body = new Q.MovieClip({id:"body", image:Q.getDOM('bodyWalk'), useFrames:true, interval:2, x:0, y:25});
167 | this.body.addFrame([
168 | {rect:[0,0,108,66]},
169 | {rect:[109,0,108,66]},
170 | {rect:[218,0,108,66]},
171 | {rect:[327,0,108,66]},
172 | {rect:[436,0,108,66]},
173 | {rect:[545,0,108,66]},
174 | {rect:[0,70,108,66]},
175 | {rect:[109,70,108,66]},
176 | {rect:[218,70,108,66]},
177 | {rect:[327,70,108,66]},
178 | {rect:[436,70,108,66]}]);
179 |
180 | this.addChild(this.body, this.head);
181 |
松鼠的头部和身体都有各自的动作，因此head和body都采用MovieClip类来实现。再用addChild()方法添加到Squirrel容器类里，这样一只松鼠的形象就组成了。
182 |
183 |
184 |
185 |
8. 实现松鼠的跳跃逻辑
186 |
Squirrel.prototype.jump = function(e)
187 | {
188 | if(!this.jumping)
189 | {
190 | this.jumping = true;
191 | this.currentSpeedY = this.speedY;
192 | }
193 | };
194 |
195 | Squirrel.prototype.update = function()
196 | {
197 | if(this.jumping)
198 | {
199 | this.currentSpeedY -= 0.3;
200 | this.y -= this.currentSpeedY;
201 | if(this.originY <= this.y)
202 | {
203 | this.y = this.originY;
204 | this.jumping = false;
205 | }
206 | }
207 | };
208 |
为了实现松鼠的跳跃，我们首先创建jump方法，在第5步中可以看到我们把touchend或mouseup事件绑定到了jump方法。然后我们在Squirrel的update方法里实现具体的跳跃逻辑。
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 | © QuarkJS Dev-Team 2012
219 |
220 |
221 |
var path = "M250 150 L150 350 L350 350 Z";
189 | * var shape = new Quark.Graphics({width:500, height:500});
190 | * shape.drawSVGPath(path).beginFill("#0ff").endFill();
191 | */
192 | Graphics.prototype.drawSVGPath = function(pathData)
193 | {
194 | var path = pathData.split(/,| (?=[a-zA-Z])/);
195 |
196 | this._addAction(["beginPath"]);
197 | for(var i = 0, len = path.length; i < len; i++)
198 | {
199 | var str = path[i], cmd = str[0].toUpperCase(), p = str.substring(1).split(/,| /);
200 | if(p[0].length == 0) p.shift();
201 |
202 | switch(cmd)
203 | {
204 | case "M":
205 | this._addAction(["moveTo", p[0], p[1]]);
206 | break;
207 | case "L":
208 | this._addAction(["lineTo", p[0], p[1]]);
209 | break;
210 | case "C":
211 | this._addAction(["bezierCurveTo", p[0], p[1], p[2], p[3], p[4], p[5]]);
212 | break;
213 | case "Z":
214 | this._addAction(["closePath"]);
215 | break;
216 | default:
217 | break;
218 | }
219 | }
220 | return this;
221 | };
222 |
223 | /**
224 | * 执行全部绘制动作。内部私有方法。
225 | * @private
226 | */
227 | Graphics.prototype._draw = function(context)
228 | {
229 | context.beginPath();
230 | for(var i = 0, len = this._actions.length; i < len; i++)
231 | {
232 | var action = this._actions[i],
233 | f = action[0],
234 | args = action.length > 1 ? action.slice(1) : null;
235 |
236 | if(typeof(context[f]) == "function") context[f].apply(context, args);
237 | else context[f] = action[1];
238 | }
239 | };
240 |
241 | /**
242 | * Override method.
243 | * @private
244 | */
245 | Graphics.prototype.getDrawable = function(context)
246 | {
247 | //for DOMContext drawing only
248 | if(this.drawable == null) this.setDrawable(this.toImage());
249 | return this.drawable.get(this, context);
250 | };
251 |
252 | /**
253 | * 缓存graphics到一个canvas或image。可用来提高渲染效率。
254 | */
255 | Graphics.prototype.cache = function(toImage)
256 | {
257 | var canvas = Quark.createDOM("canvas", {width:this.width, height:this.height});
258 | this._draw(canvas.getContext("2d"));
259 |
260 | this._cache = canvas;
261 | if(toImage) this._cache = this.toImage();
262 | return this._cache;
263 | };
264 |
265 | /**
266 | * 清除缓存。
267 | */
268 | Graphics.prototype.uncache = function()
269 | {
270 | this._cache = null;
271 | };
272 |
273 | /**
274 | * 把Graphics对象转换成dataURL格式的位图。
275 | * @param {String} type 指定转换为DataURL格式的图片mime类型。默认为"image/png"。
276 | */
277 | Graphics.prototype.toImage = function(type)
278 | {
279 | var cache = this._cache || this.cache(true);
280 | if(cache instanceof HTMLImageElement) return cache;
281 |
282 | var img = new Image();
283 | img.src = cache.toDataURL(type || "image/png");
284 | img.width = this.width;
285 | img.height = this.height;
286 | return img;
287 | };
288 |
289 | /**
290 | * 清除所有绘制动作并复原所有初始状态。
291 | */
292 | Graphics.prototype.clear = function()
293 | {
294 | this._actions.length = 0;
295 | this._cache = null;
296 |
297 | this.lineWidth = 1;
298 | this.strokeStyle = "0";
299 | this.lineAlpha = 1;
300 | this.lineCap = null;
301 | this.lineJoin = null;
302 | this.miterLimit = 10;
303 | this.hasStroke = false;
304 |
305 | this.fillStyle = "0";
306 | this.fillAlpha = 1;
307 | };
308 |
309 | /**
310 | * 添加一个绘制动作。内部私有方法。
311 | * @private
312 | */
313 | Graphics.prototype._addAction = function(action)
314 | {
315 | this._actions.push(action);
316 | return this;
317 | };
318 |
319 | /**
320 | * @private
321 | */
322 | Graphics._getContext = function()
323 | {
324 | var ctx = Quark.createDOM("canvas").getContext("2d");
325 | this._getContext = function()
326 | {
327 | return ctx;
328 | };
329 | return ctx;
330 | };
331 |
332 | })();
333 |
--------------------------------------------------------------------------------
/src/base/display/DisplayObjectContainer.js:
--------------------------------------------------------------------------------
1 | (function(){
2 |
3 | /**
4 | * 构造函数.
5 | * @name DisplayObjectContainer
6 | * @augments DisplayObject
7 | * @class DisplayObjectContainer类继承自DisplayObject，是显示列表中显示对象容器的基类。每个DisplayObjectContainer对象都有自己的子级列表children，用于组织对象的Z轴顺序。注意：DisplayObjectContainer对象的宽高默认为0，在autoSize=false的情况下，需要手动设置宽高。
8 | * @property eventChildren 指示DisplayObjectContainer的子元素是否接受交互事件，如mousedown，touchstart等。默认为true。
9 | * @property autoSize 指示DisplayObjectContainer是否随子元素自动设置大小。默认为false。
10 | */
11 | var DisplayObjectContainer = Quark.DisplayObjectContainer = function(props)
12 | {
13 | this.eventChildren = true;
14 | this.autoSize = false;
15 |
16 | props = props || {};
17 | DisplayObjectContainer.superClass.constructor.call(this, props);
18 | this.id = props.id || Quark.UIDUtil.createUID("DisplayObjectContainer");
19 | this.setDrawable(props.drawable || props.image || null);
20 |
21 | this.children = [];
22 | if(props.children)
23 | {
24 | for(var i = 0; i < props.children.length; i++)
25 | {
26 | this.addChild(props.children[i]);
27 | }
28 | }
29 | };
30 | Quark.inherit(DisplayObjectContainer, Quark.DisplayObject);
31 |
32 | /**
33 | * 将一个DisplayObject子实例添加到该DisplayObjectContainer实例的子级列表中的指定位置。
34 | * @param {DisplayObject} child 要添加的显示对象。
35 | * @param {Integer} index 指定显示对象要被添加到的索引位置。
36 | * @return {DisplayObjectContainer} 返回显示容器本身。
37 | */
38 | DisplayObjectContainer.prototype.addChildAt = function(child, index)
39 | {
40 | if(index < 0) index = 0;
41 | else if(index > this.children.length) index = this.children.length;
42 |
43 | var childIndex = this.getChildIndex(child);
44 | if(childIndex != -1)
45 | {
46 | if(childIndex == index) return this;
47 | this.children.splice(childIndex, 1);
48 | }else if(child.parent)
49 | {
50 | child.parent.removeChild(child);
51 | }
52 |
53 | this.children.splice(index, 0, child);
54 | child.parent = this;
55 |
56 | if(this.autoSize)
57 | {
58 | var rect = new Quark.Rectangle(0, 0, this.rectWidth || this.width, this.rectHeight || this.height);
59 | var childRect = new Quark.Rectangle(child.x, child.y, child.rectWidth || child.width, child.rectHeight || child.height);
60 | rect.union(childRect);
61 | this.width = rect.width;
62 | this.height = rect.height;
63 | }
64 |
65 | return this;
66 | };
67 |
68 | /**
69 | * 将一个DisplayObject子实例添加到该DisplayObjectContainer实例的子级列表中。
70 | * @param {DisplayObject} child 要添加的显示对象。
71 | * @return {DisplayObjectContainer} 返回显示容器本身。
72 | */
73 | DisplayObjectContainer.prototype.addChild = function(child)
74 | {
75 | var start = this.children.length;
76 | for(var i = 0; i < arguments.length; i++)
77 | {
78 | var child = arguments[i];
79 | this.addChildAt(child, start + i);
80 | }
81 | return this;
82 | };
83 |
84 | /**
85 | * 从DisplayObjectContainer的子级列表中指定索引处删除子对象。
86 | * @param {Integer} index 指定要删除的显示对象的索引位置。
87 | * @return {Boolean} 删除成功返回true，否则返回false。
88 | */
89 | DisplayObjectContainer.prototype.removeChildAt = function(index)
90 | {
91 | if (index < 0 || index >= this.children.length) return false;
92 | var child = this.children[index];
93 | if (child != null)
94 | {
95 | var stage = this.getStage();
96 | if(stage != null) stage.context.remove(child);
97 | child.parent = null;
98 | }
99 | this.children.splice(index, 1);
100 | return true;
101 | };
102 |
103 | /**
104 | * 从DisplayObjectContainer的子级列表中删除指定子对象。
105 | * @param {DisplayObject} child 指定要删除的显示对象。
106 | * @return {Boolean} 删除成功返回true，否则返回false。
107 | */
108 | DisplayObjectContainer.prototype.removeChild = function(child)
109 | {
110 | return this.removeChildAt(this.children.indexOf(child));
111 | };
112 |
113 | /**
114 | * 删除DisplayObjectContainer的所有子对象。
115 | */
116 | DisplayObjectContainer.prototype.removeAllChildren = function()
117 | {
118 | while(this.children.length > 0) this.removeChildAt(0);
119 | };
120 |
121 | /**
122 | * 返回DisplayObjectContainer的位于指定索引处的子显示对象。
123 | * @param {Integer} index 指定子显示对象的索引位置。
124 | * @return {DisplayObject} 返回指定的子显示对象。
125 | */
126 | DisplayObjectContainer.prototype.getChildAt = function(index)
127 | {
128 | if (index < 0 || index >= this.children.length) return null;
129 | return this.children[index];
130 | };
131 |
132 | /**
133 | * 返回指定对象在DisplayObjectContainer的子级列表中的索引位置。
134 | * @param {Integer} child 指定子显示对象。
135 | * @return {Integer} 返回指定子显示对象的索引位置。
136 | */
137 | DisplayObjectContainer.prototype.getChildIndex = function(child)
138 | {
139 | return this.children.indexOf(child);
140 | };
141 |
142 | /**
143 | * 设置指定对象在DisplayObjectContainer的子级列表中的索引位置。
144 | * @param {DisplayObject} child 指定子显示对象。
145 | * @param {Integer} index 指定子显示对象新的索引位置。
146 | */
147 | DisplayObjectContainer.prototype.setChildIndex = function(child, index)
148 | {
149 | if(child.parent != this) return;
150 | var oldIndex = this.children.indexOf(child);
151 | if(index == oldIndex) return;
152 | this.children.splice(oldIndex, 1);
153 | this.children.splice(index, 0, child);
154 | };
155 |
156 | /**
157 | * 交换在DisplayObjectContainer的子级列表中的两个子对象的索引位置。
158 | * @param {DisplayObject} child1 指定交换索引位置的子显示对象1。
159 | * @param {DisplayObject} child2 指定交换索引位置的子显示对象2。
160 | */
161 | DisplayObjectContainer.prototype.swapChildren = function(child1, child2)
162 | {
163 | var index1 = this.getChildIndex(child1), index2 = this.getChildIndex(child2);
164 | this.children[index1] = child2;
165 | this.children[index2] = child1;
166 | };
167 |
168 | /**
169 | * 交换在DisplayObjectContainer的子级列表中的指定索引位置的两个子对象。
170 | * @param {Integer} index1 指定交换索引位置1。
171 | * @param {Integer} index2 指定交换索引位置2。
172 | */
173 | DisplayObjectContainer.prototype.swapChildrenAt = function(index1, index2)
174 | {
175 | var child1 = this.getChildAt(index1), child2 = this.getChildAt(index2);
176 | this.children[index1] = child2;
177 | this.children[index2] = child1;
178 | };
179 |
180 | /**
181 | * 返回DisplayObjectContainer中指定id的子显示对象。
182 | * @param {String} 指定子显示对象的id。
183 | * @return {DisplayObject} 返回指定id的子显示对象。
184 | */
185 | DisplayObjectContainer.prototype.getChildById = function(id)
186 | {
187 | for(var i = 0, len = this.children.length; i < len; i++)
188 | {
189 | var child = this.children[i];
190 | if(child.id == id) return child;
191 | }
192 | return null;
193 | };
194 |
195 | /**
196 | * 删除并返回DisplayObjectContainer中指定id的子显示对象。
197 | * @param {String} 指定子显示对象的id。
198 | * @return {DisplayObject} 返回删除的指定id的子显示对象。
199 | */
200 | DisplayObjectContainer.prototype.removeChildById = function(id)
201 | {
202 | for(var i = 0, len = this.children.length; i < len; i++)
203 | {
204 | if(this.children[i].id == id)
205 | {
206 | return this.removeChildAt(i);
207 | }
208 | }
209 | return null;
210 | };
211 |
212 | /**
213 | * 根据参数keyOrFunction指定的子元素键值或自定义函数对DisplayObjectContainer的子元素进行排序。
214 | * @param keyOrFunction 指定排序的子元素的键值或自定义函数。
215 | */
216 | DisplayObjectContainer.prototype.sortChildren = function(keyOrFunction)
217 | {
218 | var f = keyOrFunction;
219 | if(typeof(f) == "string")
220 | {
221 | var key = f;
222 | f = function(a, b)
223 | {
224 | return b[key] - a[key];
225 | };
226 | }
227 | this.children.sort(f);
228 | };
229 |
230 | /**
231 | * 确定指定对象是否为DisplayObjectContainer的子显示对象。
232 | * @param {DisplayObject} child 指定的显示对象。
233 | * @return {Boolean} 指定对象为DisplayObjectContainer的子显示对象返回true，否则返回false。
234 | */
235 | DisplayObjectContainer.prototype.contains = function(child)
236 | {
237 | return this.getChildIndex(child) != -1;
238 | };
239 |
240 | /**
241 | * 返回DisplayObjectContainer的子显示对象的数量。
242 | * @return {Integer} 返回子显示对象的数量。
243 | */
244 | DisplayObjectContainer.prototype.getNumChildren = function()
245 | {
246 | return this.children.length;
247 | };
248 |
249 | /**
250 | * 覆盖父类DisplayObject的_update方法，更新所有子显示对象的深度。
251 | * @protected
252 | */
253 | DisplayObjectContainer.prototype._update = function(timeInfo)
254 | {
255 | //先更新容器本身的数据，再更新子元素的数据
256 | var result = true;
257 | if(this.update != null) result = this.update(timeInfo);
258 | if(result === false) return;
259 |
260 | var copy = this.children.slice(0);
261 | for(var i = 0, len = copy.length; i < len; i++)
262 | {
263 | var child = copy[i];
264 | child._depth = i + 1;
265 | child._update(timeInfo);
266 | }
267 | };
268 |
269 | /**
270 | * 渲染DisplayObjectContainer本身及其所有子显示对象。
271 | * @param {Context} 渲染上下文。
272 | */
273 | DisplayObjectContainer.prototype.render = function(context)
274 | {
275 | DisplayObjectContainer.superClass.render.call(this, context);
276 |
277 | for(var i = 0, len = this.children.length; i < len; i++)
278 | {
279 | var child = this.children[i];
280 | child._render(context);
281 | }
282 | };
283 |
284 | /**
285 | * 返回x和y指定点下的DisplayObjectContainer的子项（或孙子项，依此类推）的数组集合。默认只返回最先加入的子显示对象。
286 | * @param {Number} x 指定点的x轴坐标。
287 | * @param {Number} y 指定点的y轴坐标。
288 | * @param {Boolean} usePolyCollision 指定是否采用多边形碰撞检测。默认为false。
289 | * @param {Boolean} returnAll 指定是否返回指定点下的所有显示对象。默认为false。
290 | * @return 返回指定点下的显示对象集合，当然returnAll为false时只返回最先加入的子显示对象。
291 | */
292 | DisplayObjectContainer.prototype.getObjectUnderPoint = function(x, y, usePolyCollision, returnAll)
293 | {
294 | if(returnAll) var result = [];
295 |
296 | for(var i = this.children.length - 1; i >= 0; i--)
297 | {
298 | var child = this.children[i];
299 | if(child == null || (!child.eventEnabled && child.children == undefined) || !child.visible || child.alpha <= 0) continue;
300 |
301 | if(child.children != undefined && child.eventChildren && child.getNumChildren() > 0)
302 | {
303 | var obj = child.getObjectUnderPoint(x, y, usePolyCollision, returnAll);
304 | if(obj)
305 | {
306 | if(returnAll) {if(obj.length > 0) result = result.concat(obj);}
307 | else return obj;
308 | }else if(child.hitTestPoint(x, y, usePolyCollision) >= 0)
309 | {
310 | if(returnAll) result.push(child);
311 | else return child;
312 | }
313 | }else
314 | {
315 | if(child.hitTestPoint(x, y, usePolyCollision) >= 0)
316 | {
317 | if(returnAll) result.push(child);
318 | else return child;
319 | }
320 | }
321 | }
322 | if(returnAll) return result;
323 | return null;
324 | };
325 |
326 | })();
327 |
--------------------------------------------------------------------------------
/docs/css/bootstrap-responsive.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Responsive v2.0.4
3 | *
4 | * Copyright 2012 Twitter, Inc
5 | * Licensed under the Apache License v2.0
6 | * http://www.apache.org/licenses/LICENSE-2.0
7 | *
8 | * Designed and built with all the love in the world @twitter by @mdo and @fat.
9 | */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}@media(max-width:767px){.visible-phone{display:inherit!important}.hidden-phone{display:none!important}.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}}@media(min-width:768px) and (max-width:979px){.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:18px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.modal{position:absolute;top:10px;right:10px;left:10px;width:auto;margin:0}.modal.fade.in{top:auto}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:auto;margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:20px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:28px;margin-left:2.762430939%;*margin-left:2.709239449638298%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:99.999999993%;*width:99.9468085036383%}.row-fluid .span11{width:91.436464082%;*width:91.38327259263829%}.row-fluid .span10{width:82.87292817100001%;*width:82.8197366816383%}.row-fluid .span9{width:74.30939226%;*width:74.25620077063829%}.row-fluid .span8{width:65.74585634900001%;*width:65.6926648596383%}.row-fluid .span7{width:57.182320438000005%;*width:57.129128948638304%}.row-fluid .span6{width:48.618784527%;*width:48.5655930376383%}.row-fluid .span5{width:40.055248616%;*width:40.0020571266383%}.row-fluid .span4{width:31.491712705%;*width:31.4385212156383%}.row-fluid .span3{width:22.928176794%;*width:22.874985304638297%}.row-fluid .span2{width:14.364640883%;*width:14.311449393638298%}.row-fluid .span1{width:5.801104972%;*width:5.747913482638298%}input,textarea,.uneditable-input{margin-left:0}input.span12,textarea.span12,.uneditable-input.span12{width:714px}input.span11,textarea.span11,.uneditable-input.span11{width:652px}input.span10,textarea.span10,.uneditable-input.span10{width:590px}input.span9,textarea.span9,.uneditable-input.span9{width:528px}input.span8,textarea.span8,.uneditable-input.span8{width:466px}input.span7,textarea.span7,.uneditable-input.span7{width:404px}input.span6,textarea.span6,.uneditable-input.span6{width:342px}input.span5,textarea.span5,.uneditable-input.span5{width:280px}input.span4,textarea.span4,.uneditable-input.span4{width:218px}input.span3,textarea.span3,.uneditable-input.span3{width:156px}input.span2,textarea.span2,.uneditable-input.span2{width:94px}input.span1,textarea.span1,.uneditable-input.span1{width:32px}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:30px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:28px;margin-left:2.564102564%;*margin-left:2.510911074638298%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145300001%;*width:91.3997999636383%}.row-fluid .span10{width:82.905982906%;*width:82.8527914166383%}.row-fluid .span9{width:74.358974359%;*width:74.30578286963829%}.row-fluid .span8{width:65.81196581200001%;*width:65.7587743226383%}.row-fluid .span7{width:57.264957265%;*width:57.2117657756383%}.row-fluid .span6{width:48.717948718%;*width:48.6647572286383%}.row-fluid .span5{width:40.170940171000005%;*width:40.117748681638304%}.row-fluid .span4{width:31.623931624%;*width:31.5707401346383%}.row-fluid .span3{width:23.076923077%;*width:23.0237315876383%}.row-fluid .span2{width:14.529914530000001%;*width:14.4767230406383%}.row-fluid .span1{width:5.982905983%;*width:5.929714493638298%}input,textarea,.uneditable-input{margin-left:0}input.span12,textarea.span12,.uneditable-input.span12{width:1160px}input.span11,textarea.span11,.uneditable-input.span11{width:1060px}input.span10,textarea.span10,.uneditable-input.span10{width:960px}input.span9,textarea.span9,.uneditable-input.span9{width:860px}input.span8,textarea.span8,.uneditable-input.span8{width:760px}input.span7,textarea.span7,.uneditable-input.span7{width:660px}input.span6,textarea.span6,.uneditable-input.span6{width:560px}input.span5,textarea.span5,.uneditable-input.span5{width:460px}input.span4,textarea.span4,.uneditable-input.span4{width:360px}input.span3,textarea.span3,.uneditable-input.span3{width:260px}input.span2,textarea.span2,.uneditable-input.span2{width:160px}input.span1,textarea.span1,.uneditable-input.span1{width:60px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:18px}.navbar-fixed-bottom{margin-top:18px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 9px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#999;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:6px 15px;font-weight:bold;color:#999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#222}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:block;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:9px 15px;margin:9px 0;border-top:1px solid #222;border-bottom:1px solid #222;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
10 |
--------------------------------------------------------------------------------
/docs/api/symbols/Drawable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | QuarkJS API Reference - Drawable
8 |
9 |
60 |
61 |
62 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | Class Drawable
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 | Drawable是可绘制图像或DOM的包装。当封装的是HTMLImageElement、HTMLCanvasElement或HTMLVideoElement对象时，可同时支持canvas和dom两种渲染方式，而如果封装的是dom时，则不支持canvas方式。
123 |
124 |
125 |
126 |
127 |
128 |
构造函数概览
129 |
130 |
131 |
132 | 说明
134 |
135 |
136 |
137 |
138 |
139 |
140 |
143 | 构造函数.
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
方法概览
158 |
159 |
160 |
161 | 说明
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
172 | 根据context上下文获取不同的Drawable包装的对象。
173 |
174 |
175 |
176 |
177 |
178 |
179 | set (drawable, isDOM)
180 |
设置Drawable对象。
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
构造函数详细信息
198 |
199 |
200 | Drawable (drawable, isDOM)
201 |
202 |
203 |
204 | 构造函数.
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 | 参数:
214 |
215 |
216 | drawable
217 |
218 |
219 | 一个可绘制对象。
220 |
221 |
222 | {Boolean} isDOM
223 |
224 |
225 | 指定参数drawable是否为一个DOM对象。默认为false。
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
方法详细信息
246 |
247 |
248 |
249 |
250 |
251 |
252 | get (obj, context)
253 |
254 |
255 |
256 | 根据context上下文获取不同的Drawable包装的对象。
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 | 参数:
266 |
267 |
268 | {DisplayObject } obj
269 |
270 |
271 | 指定的显示对象。
272 |
273 |
274 | {Context } context
275 |
276 |
277 | 指定的渲染上下文。
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 | 返回值:
287 |
288 | 返回包装的可绘制对象。
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 | set (drawable, isDOM)
302 |
303 |
304 |
305 | 设置Drawable对象。
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 | 参数:
315 |
316 |
317 | drawable
318 |
319 |
320 | 一个可绘制对象。
321 |
322 |
323 | {Boolean} isDOM
324 |
325 |
326 | 指定参数drawable是否为一个DOM对象。默认为false。
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 | © QuarkJS Dev-Team 2012
351 |
352 |
353 |
21 | 
22 |
23 |
24 |
25 |
26 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | QuarkJS - A HTML5 Game Framework
2 | ================================
3 |
4 | QuarkJS is a HTML5 game framework. The aim is to provide a easy way to create game with HTML5.
5 |
6 | It includes two parts:
7 |
8 | * Quark-Base: A rendering framework which supports both Canvas and DOM rendering approaches.
9 | * Quark-Game: A game framework based on Quark-Base. (in development progress)
10 |
11 | Features
12 | -----------------
13 | * Object-Oriented programing style.
14 | * A full display object list implementation, simple to use and extend.
15 | * Gain more performace by using difference contexts in difference scenarios.
16 | * Good compatibility and performance in desktop and mobile browsers.
17 |
18 | Wiki
19 | -----------------
20 | * [Quark Base Infrastructure](http://github.com/quark-dev-team/quarkjs/wiki/Quark-Base-Infrastructure)
21 | * [Context](http://github.com/quark-dev-team/quarkjs/wiki/Context)
22 | * [DisplayObject](http://github.com/quark-dev-team/quarkjs/wiki/DisplayObject)
23 | * [Handle Events](http://github.com/quark-dev-team/quarkjs/wiki/Handle-Events)
24 | * [Performance](http://github.com/quark-dev-team/quarkjs/wiki/Performance)
25 |
26 | Tutorials
27 | -----------------
28 | * [Get Started](http://github.com/quark-dev-team/quarkjs/wiki/Get-Started)
29 |
30 | API Docs
31 | -----------------
32 | * [Online API Docs](http://quark-dev-team.github.com/quarkjs/docs/)
33 |
34 | Examples
35 | -----------------
36 | * [Simple](http://quark-dev-team.github.com/quarkjs/examples/simple1.html)
37 | * [Button](http://quark-dev-team.github.com/quarkjs/examples/button.html)
38 | * [HitTest](http://quark-dev-team.github.com/quarkjs/examples/hittest.html)
39 | * [Graphics](http://quark-dev-team.github.com/quarkjs/examples/graphics.html)
40 | * [Text](http://quark-dev-team.github.com/quarkjs/examples/text.html)
41 | * [Mask](http://quark-dev-team.github.com/quarkjs/examples/mask.html)
42 | * [Tween1](http://quark-dev-team.github.com/quarkjs/examples/tween1.html)
43 | * [Tween2](http://quark-dev-team.github.com/quarkjs/examples/tween2.html)
44 | * [Squirrel](http://quark-dev-team.github.com/quarkjs/examples/squirrel/squirrel.html)
45 |
46 | Showcase
47 | -----------------
48 | * [Fish Joy](http://www.riaidea.com/html5/fishjoy/)
49 | * [Happy Dolphin](http://www.riaidea.com/html5/dolphin/)
50 | * [Runner](http://www.riaidea.com/html5/runner/)
51 | * [Mine Sweeper](http://www.riaidea.com/html5/minesweeper/)
52 | * [AngryBirds Demo](http://www.riaidea.com/html5/angrybirds/)
53 |
54 | (*Note: Developed by old framework CasualJS)
--------------------------------------------------------------------------------
/examples/tween2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
23 |
24 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/examples/button.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
21 |
22 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/src/base/event/EventDispatcher.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数.
6 | * @name EventDispatcher
7 | * @class EventDispatcher类是可调度事件的类的基类，它允许显示列表上的任何对象都是一个事件目标。
8 | */
9 | var EventDispatcher = Quark.EventDispatcher = function()
10 | {
11 | //事件映射表，格式为：{type1:[listener1, listener2], type2:[listener3, listener4]}
12 | this._eventMap = {};
13 | };
14 |
15 | /**
16 | * 注册事件侦听器对象，以使侦听器能够接收事件通知。
17 | */
18 | EventDispatcher.prototype.addEventListener = function(type, listener)
19 | {
20 | var map = this._eventMap[type];
21 | if(map == null) map = this._eventMap[type] = [];
22 |
23 | if(map.indexOf(listener) == -1)
24 | {
25 | map.push(listener);
26 | return true;
27 | }
28 | return false;
29 | };
30 |
31 | /**
32 | * 删除事件侦听器。
33 | */
34 | EventDispatcher.prototype.removeEventListener = function(type, listener)
35 | {
36 | if(arguments.length == 1) return this.removeEventListenerByType(type);
37 |
38 | var map = this._eventMap[type];
39 | if(map == null) return false;
40 |
41 | for(var i = 0; i < map.length; i++)
42 | {
43 | var li = map[i];
44 | if(li === listener)
45 | {
46 | map.splice(i, 1);
47 | if(map.length == 0) delete this._eventMap[type];
48 | return true;
49 | }
50 | }
51 | return false;
52 | };
53 |
54 | /**
55 | * 删除指定类型的所有事件侦听器。
56 | */
57 | EventDispatcher.prototype.removeEventListenerByType = function(type)
58 | {
59 | var map = this._eventMap[type];
60 | if(map != null)
61 | {
62 | delete this._eventMap[type];
63 | return true;
64 | }
65 | return false;
66 | };
67 |
68 | /**
69 | * 删除所有事件侦听器。
70 | */
71 | EventDispatcher.prototype.removeAllEventListeners = function()
72 | {
73 | this._eventMap = {};
74 | };
75 |
76 | /**
77 | * 派发事件，调用事件侦听器。
78 | */
79 | EventDispatcher.prototype.dispatchEvent = function(event)
80 | {
81 | var map = this._eventMap[event.type];
82 | if(map == null) return false;
83 | if(!event.target) event.target = this;
84 | map = map.slice();
85 |
86 | for(var i = 0; i < map.length; i++)
87 | {
88 | var listener = map[i];
89 | if(typeof(listener) == "function")
90 | {
91 | listener.call(this, event);
92 | }
93 | }
94 | return true;
95 | };
96 |
97 | /**
98 | * 检查是否为指定事件类型注册了任何侦听器。
99 | */
100 | EventDispatcher.prototype.hasEventListener = function(type)
101 | {
102 | var map = this._eventMap[type];
103 | return map != null && map.length > 0;
104 | };
105 |
106 | //添加若干的常用的快捷缩写方法
107 | EventDispatcher.prototype.on = EventDispatcher.prototype.addEventListener;
108 | EventDispatcher.prototype.un = EventDispatcher.prototype.removeEventListener;
109 | EventDispatcher.prototype.fire = EventDispatcher.prototype.dispatchEvent;
110 |
111 | })();
--------------------------------------------------------------------------------
/src/base/geom/Matrix.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | var Matrix = Quark.Matrix = function(a, b, c, d, tx, ty)
5 | {
6 | this.a = a;
7 | this.b = b;
8 | this.c = c;
9 | this.d = d;
10 | this.tx = tx;
11 | this.ty = ty;
12 | };
13 |
14 | Matrix.prototype.concat = function(mtx)
15 | {
16 | var a = this.a;
17 | var c = this.c;
18 | var tx = this.tx;
19 |
20 | this.a = a * mtx.a + this.b * mtx.c;
21 | this.b = a * mtx.b + this.b * mtx.d;
22 | this.c = c * mtx.a + this.d * mtx.c;
23 | this.d = c * mtx.b + this.d * mtx.d;
24 | this.tx = tx * mtx.a + this.ty * mtx.c + mtx.tx;
25 | this.ty = tx * mtx.b + this.ty * mtx.d + mtx.ty;
26 | return this;
27 | };
28 |
29 | Matrix.prototype.rotate = function(angle)
30 | {
31 | var cos = Math.cos(angle);
32 | var sin = Math.sin(angle);
33 |
34 | var a = this.a;
35 | var c = this.c;
36 | var tx = this.tx;
37 |
38 | this.a = a * cos - this.b * sin;
39 | this.b = a * sin + this.b * cos;
40 | this.c = c * cos - this.d * sin;
41 | this.d = c * sin + this.d * cos;
42 | this.tx = tx * cos - this.ty * sin;
43 | this.ty = tx * sin + this.ty * cos;
44 | return this;
45 | };
46 |
47 | Matrix.prototype.scale = function(sx, sy)
48 | {
49 | this.a *= sx;
50 | this.d *= sy;
51 | this.tx *= sx;
52 | this.ty *= sy;
53 | return this;
54 | };
55 |
56 | Matrix.prototype.translate = function(dx, dy)
57 | {
58 | this.tx += dx;
59 | this.ty += dy;
60 | return this;
61 | };
62 |
63 | Matrix.prototype.identity = function()
64 | {
65 | this.a = this.d = 1;
66 | this.b = this.c = this.tx = this.ty = 0;
67 | return this;
68 | };
69 |
70 | Matrix.prototype.invert = function()
71 | {
72 | var a = this.a;
73 | var b = this.b;
74 | var c = this.c;
75 | var d = this.d;
76 | var tx = this.tx;
77 | var i = a * d - b * c;
78 |
79 | this.a = d / i;
80 | this.b = -b / i;
81 | this.c = -c / i;
82 | this.d = a / i;
83 | this.tx = (c * this.ty - d * tx) / i;
84 | this.ty = -(a * this.ty - b * tx) / i;
85 | return this;
86 | };
87 |
88 | Matrix.prototype.transformPoint = function(point, round, returnNew)
89 | {
90 | var x = point.x * this.a + point.y * this.c + this.tx;
91 | var y = point.x * this.b + point.y * this.d + this.ty;
92 | if(round)
93 | {
94 | x = x + 0.5 >> 0;
95 | y = y + 0.5 >> 0;
96 | }
97 | if(returnNew) return {x:x, y:y};
98 | point.x = x;
99 | point.y = y;
100 | return point;
101 | };
102 |
103 | Matrix.prototype.clone = function()
104 | {
105 | return new Matrix(this.a, this.b, this.c, this.d, this.tx, this.ty);
106 | };
107 |
108 | Matrix.prototype.toString = function()
109 | {
110 | return "(a="+this.a+", b="+this.b+", c="+this.c+", d="+this.d+", tx="+this.tx+", ty="+this.ty+")";
111 | };
112 |
113 | })();
--------------------------------------------------------------------------------
/src/base/utils/Audio.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数.
6 | * @name Audio
7 | * @class Audio类是原生Audio的封装。
8 | * @param src 要加载的声音的地址。
9 | * @param preload 指示是否自动加载，在某些浏览器下无效，如IOS上的Safari。
10 | * @param autoPlay 指示是否自动播放，在某些浏览器下无效，如IOS上的Safari。
11 | * @param loop 指示是否循环播放。
12 | */
13 | var Audio = Quark.Audio = function(src, preload, autoPlay, loop)
14 | {
15 | Audio.superClass.constructor.call(this);
16 |
17 | this.src = src;
18 | this.autoPlay = preload && autoPlay;
19 | this.loop = loop;
20 |
21 | this._loaded = false;
22 | this._playing = false;
23 | this._evtHandler = Quark.delegate(this._evtHandler, this);
24 |
25 | this._element = document.createElement('audio');
26 | this._element.preload = preload;
27 | this._element.src = src;
28 | if(preload) this.load();
29 | };
30 | Quark.inherit(Audio, Quark.EventDispatcher);
31 |
32 | /**
33 | * 开始加载声音文件。
34 | */
35 | Audio.prototype.load = function()
36 | {
37 | this._element.addEventListener("canplay", this._evtHandler, false);
38 | this._element.addEventListener("ended", this._evtHandler, false);
39 | this._element.addEventListener("error", this._evtHandler, false);
40 | try{
41 | this._element.load();
42 | }catch(e){trace(e);};
43 |
44 | };
45 |
46 | /**
47 | * 内部的声音事件处理。
48 | * @private
49 | */
50 | Audio.prototype._evtHandler = function(e)
51 | {
52 | if(e.type == "canplay")
53 | {
54 | this._element.removeEventListener("canplay", this._evtHandler);
55 | this._element.removeEventListener("error", this._evtHandler);
56 | this._loaded = true;
57 | this.dispatchEvent({type:"loaded", target:this});
58 | if(this.autoPlay) this.play();
59 | }else if(e.type == "ended")
60 | {
61 | this.dispatchEvent({type:"ended", target:this});
62 | if(this.loop) this.play();
63 | else this._playing = false;
64 | }else if(e.type == "error")
65 | {
66 | trace("Quark.Audio Error: " + e.target.src);
67 | }
68 | };
69 |
70 | /**
71 | * 开始播放。
72 | */
73 | Audio.prototype.play = function()
74 | {
75 | if (this._loaded)
76 | {
77 | this._element.play();
78 | this._playing = true;
79 | }else
80 | {
81 | this.autoPlay = true;
82 | this.load();
83 | }
84 | };
85 |
86 | /**
87 | * 停止播放。
88 | */
89 | Audio.prototype.stop = function()
90 | {
91 | if(this._playing)
92 | {
93 | this._element.pause();
94 | this._playing = false;
95 | }
96 | };
97 |
98 | /**
99 | * 指示声音文件是否已被加载。
100 | */
101 | Audio.prototype.loaded = function()
102 | {
103 | return this._loaded;
104 | };
105 |
106 | /**
107 | * 指示声音是正在播放。
108 | */
109 | Audio.prototype.playing = function()
110 | {
111 | return this._playing;
112 | };
113 |
114 | })();
--------------------------------------------------------------------------------
/src/base/utils/Timer.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数.
6 | * @name Timer
7 | * @class Timer是一个计时器。它能按指定的时间序列运行代码。
8 | * @param interval 计时器的时间间隔。以毫秒为单位。
9 | */
10 | var Timer = Quark.Timer = function(interval)
11 | {
12 | this.interval = interval || 50;
13 | this.paused = false;
14 | this.info = {lastTime:0, currentTime:0, deltaTime:0, realDeltaTime:0};
15 |
16 | this._startTime = 0;
17 | this._intervalID = null;
18 | this._listeners = [];
19 | };
20 |
21 | /**
22 | * 启动计时器。
23 | */
24 | Timer.prototype.start = function()
25 | {
26 | if(this._intervalID != null) return;
27 | this._startTime = this.info.lastTime = this.info.currentTime = Date.now();
28 | var me = this;
29 | var run = function(){me._intervalID = setTimeout(run, me.interval);me._run();};
30 | run();
31 | };
32 |
33 | /**
34 | * 停止计时器。
35 | */
36 | Timer.prototype.stop = function()
37 | {
38 | clearTimeout(this._intervalID);
39 | this._intervalID = null;
40 | this._startTime = 0;
41 | };
42 |
43 | /**
44 | * 暂停计时器。
45 | */
46 | Timer.prototype.pause = function()
47 | {
48 | this.paused = true;
49 | };
50 |
51 | /**
52 | * 恢复计时器。
53 | */
54 | Timer.prototype.resume = function()
55 | {
56 | this.paused = false;
57 | };
58 |
59 | /**
60 | * 计时器的运行回调。当达到执行条件时，调用所有侦听器的step方法。
61 | * @private
62 | */
63 | Timer.prototype._run = function()
64 | {
65 | if(this.paused) return;
66 |
67 | var info = this.info;
68 | var time = info.currentTime = Date.now();
69 | info.deltaTime = info.realDeltaTime = time - info.lastTime;
70 |
71 | for(var i = 0, len = this._listeners.length, obj, runTime; i < len; i++)
72 | {
73 | obj = this._listeners[i];
74 | runTime = obj.__runTime || 0;
75 | if(runTime == 0)
76 | {
77 | obj.step(this.info);
78 | }else if(time > runTime)
79 | {
80 | obj.step(this.info);
81 | this._listeners.splice(i, 1);
82 | i--;
83 | len--;
84 | }
85 | }
86 |
87 | info.lastTime = time;
88 | };
89 |
90 | /**
91 | * 延迟一定时间time调用callback方法。
92 | * @param callback 调用的方法。
93 | * @param time 延迟的时间，以毫秒为单位。
94 | */
95 | Timer.prototype.delay = function(callback, time)
96 | {
97 | var obj = {step:callback, __runTime:Date.now() + time};
98 | this.addListener(obj);
99 | };
100 |
101 | /**
102 | * 添加侦听器对象，计时器会按照指定的时间间隔来调用侦听器的step方法。即listner必需有step方法。
103 | * @param obj 侦听器对象。
104 | **/
105 | Timer.prototype.addListener = function(obj)
106 | {
107 | if(obj == null || typeof(obj.step) != "function") throw "Timer Error: The listener object must implement a step() method!";
108 | this._listeners.push(obj);
109 | };
110 |
111 | /**
112 | * 删除侦听器。
113 | */
114 | Timer.prototype.removeListener = function(obj)
115 | {
116 | var index = this._listeners.indexOf(obj);
117 | if(index > -1)
118 | {
119 | this._listeners.splice(index, 1);
120 | }
121 | };
122 |
123 | })();
--------------------------------------------------------------------------------
/examples/text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
21 |
22 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/src/base/utils/ImageLoader.js:
--------------------------------------------------------------------------------
1 |
2 | (function(){
3 |
4 | /**
5 | * 构造函数.
6 | * @name ImageLoader
7 | * @augments EventDispatcher
8 | * @class ImageLoader类是一个图片加载器，用于动态加载图片资源。
9 | * @param source 要加载的图片资源，可以是一个单独资源或多个资源的数组。图片资源格式为：{src:$url, id:$id, size:$size}。
10 | */
11 | var ImageLoader = Quark.ImageLoader = function(source)
12 | {
13 | ImageLoader.superClass.constructor.call(this);
14 |
15 | this.loading = false; //ready-only
16 |
17 | this._index = -1;
18 | this._loaded = 0;
19 | this._images = {};
20 | this._totalSize = 0;
21 | this._loadHandler = Quark.delegate(this._loadHandler, this);
22 |
23 | this._addSource(source);
24 | };
25 | Quark.inherit(ImageLoader, Quark.EventDispatcher);
26 |
27 | /**
28 | * 开始顺序加载图片资源。
29 | * @param source 要加载的图片资源，可以是一个单独资源或多个资源的数组。
30 | */
31 | ImageLoader.prototype.load = function(source)
32 | {
33 | this._addSource(source);
34 | if(!this.loading) this._loadNext();
35 | };
36 |
37 | /**
38 | * 添加图片资源。
39 | * @private
40 | */
41 | ImageLoader.prototype._addSource = function(source)
42 | {
43 | if(!source) return;
44 | source = (source instanceof Array) ? source : [source];
45 | for(var i = 0; i < source.length; i++)
46 | {
47 | this._totalSize+= source[i].size || 0;
48 | }
49 | if(!this._source) this._source = source;
50 | else this._source = this._source.concat(source);
51 | };
52 |
53 | /**
54 | * 加载下一个图片资源。
55 | * @private
56 | */
57 | ImageLoader.prototype._loadNext = function()
58 | {
59 | this._index++;
60 | if(this._index >= this._source.length)
61 | {
62 | this.dispatchEvent({type:"complete", target:this, images:this._images});
63 | this._source = [];
64 | this.loading = false;
65 | this._index = -1;
66 | return;
67 | }
68 |
69 | var img = new Image();
70 | img.onload = this._loadHandler;
71 | img.src = this._source[this._index].src;
72 | this.loading = true;
73 | };
74 |
75 | /**
76 | * 图片加载处理器。
77 | * @private
78 | */
79 | ImageLoader.prototype._loadHandler = function(e)
80 | {
81 | this._loaded++;
82 | var image = this._source[this._index];
83 | image.image = e.target;
84 | var id = image.id || image.src;
85 | this._images[id] = image;
86 | this.dispatchEvent({type:"loaded", target:this, image:image});
87 | this._loadNext();
88 | };
89 |
90 | /**
91 | * 返回已加载图片资源的数目。
92 | */
93 | ImageLoader.prototype.getLoaded = function()
94 | {
95 | return this._loaded;
96 | };
97 |
98 | /**
99 | * 返回所有图片资源的总数。
100 | */
101 | ImageLoader.prototype.getTotal = function()
102 | {
103 | return this._source.length;
104 | };
105 |
106 | /**
107 | * 返回已加载的图片资源的大小之和（在图片资源的大小size已指定的情况下）。
108 | */
109 | ImageLoader.prototype.getLoadedSize = function()
110 | {
111 | var size = 0;
112 | for(var id in this._images)
113 | {
114 | var item = this._images[id];
115 | size += item.size || 0;
116 | }
117 | return size;
118 | };
119 |
120 | /**
121 | * 返回所有图片资源的大小之和（在图片资源的大小size已指定的情况下）。
122 | */
123 | ImageLoader.prototype.getTotalSize = function()
124 | {
125 | return this._totalSize;
126 | };
127 |
128 | })();
--------------------------------------------------------------------------------
/examples/squirrel/squirrel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
22 | 
23 |
24 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/examples/mask.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
62 | 
69 | 
76 | 
83 | 
