-
Notifications
You must be signed in to change notification settings - Fork 127
/
Copy pathtutorial_squirrel.html
228 lines (197 loc) · 9.1 KB
/
tutorial_squirrel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QuarkJS - An HTML5 Game Framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="quarkjs, a html5 game framework.">
<meta name="author" content="flashlizi">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body onload="prettyPrint();">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">QuarkJS - An HTML5 Game Framework</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="http://github.com/quark-dev-team/quarkjs" target="_blank">源码下载</a></li>
<li><a href="api/index.html">API文档</a></li>
<li class="active"><a href="#">使用指南</a></li>
<li><a href="demo.html">作品演示</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">使用指南</li>
<li><a href="tutorial.html">快速开始 - Getting Started</a></li>
<li><a href="tutorial_infrastructure.html">基础架构 - Infrastructure</a></li>
<li><a href="tutorial_context.html">上下文 - Context</a></li>
<li><a href="tutorial_displayobject.html">显示对象 - DisplayObject</a></li>
<li><a href="tutorial_event.html">事件处理 - Handling Events</a></li>
<li class="nav-header">实例分析</li>
<li class="active"><a href="#">跳跃的小松鼠</a></li>
</ul>
</div>
</div>
<div class="span9">
<div class="page-header">
<h1>跳跃的小松鼠</h1>
</div>
<div>
<div>
<p>地址：<a href="http://quark-dev-team.github.com/quarkjs/examples/squirrel/squirrel.html" target="_blank">http://quark-dev-team.github.com/quarkjs/examples/squirrel/squirrel.html</a></p>
<p>此demo演示了如何使用quark创建一个基本的交互动画。下面将一步一步介绍是如何实现的。</p>
</div>
<div>
<h3>1. 准备游戏舞台容器</h3><br/>
<pre class="prettyprint linenums lang-html"><div id="container" style="position:absolute;left:0;top:0;width:480px;height:320px;background:#eee;"></div>
<img id="bodyWalk" src="images/body_walk.png" style="display:none;" />
<img id="headIdle" src="images/head_idle.png" style="display:none;" /></pre>
<p>这里的容器就是一个普通的div，并设定好其宽高。另外为了演示方便，我们把项目所需的2个图片素材使用img标签做了预加载。</p>
</div>
<div>
<h3>2. 设置游戏的背景</h3><br/>
<pre class="prettyprint linenums lang-js">container = Q.getDOM("container");
container.style.background = "-ms-linear-gradient(top, #00889d, #94d7e1, #58B000)";
container.style.background = "-moz-linear-gradient(top, #00889d, #94d7e1, #58B000)";
container.style.background = "-webkit-gradient(linear, 0 0, 0 bottom, from(#00889d), to(#58B000), color-stop(0.5,#94d7e1))";
container.style.background = "-o-linear-gradient(top, #00889d, #94d7e1, #58B000)";
container.style.filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00889d, endColorstr=#94d7e1)";</pre>
<p>这里使用了css的线性渐变背景。</p>
</div>
<div>
<h3>3. 初始化上下文</h3><br/>
<pre class="prettyprint linenums lang-js">params = Q.getUrlParams();
if(params.canvas)
{
var canvas = Quark.createDOM("canvas", {width:480, height:320, style:{position:"absolute",backgroundColor:"#eee"}});
container.appendChild(canvas);
context = new Quark.CanvasContext({canvas:canvas});
}else{
context = new Quark.DOMContext({canvas:container});
}</pre>
<p>上下文在quark中负责渲染工作。这里可以根据URL参数canvas来选择使用CanvasContext还是DOMContext。</p>
</div>
<div>
<h3>4. 初始化舞台</h3><br/>
<pre class="prettyprint linenums lang-js">stage = new Q.Stage({context:context, width:480, height:320,
update:function()
{
frames++;
}});
timer = new Q.Timer(1000/30);
timer.addListener(stage);
timer.start();
em = new Q.EventManager();
var events = Q.supportTouch ? ["touchend"] : ["mouseup"];
em.registerStage(stage, events, true, true);</pre>
<p>在这一步，我们初始化了一个舞台，并把刚才创建的上下文context传给舞台。这样quark就知道如何把舞台上面的元素渲染出来了。但是舞台默认是静止的，不会主动刷新，因此我们需要一个计时器timer来定时更新舞台，从而驱动整个游戏运行。然后注册舞台事件，使舞台上的元素能接收交互事件，这里只接收touchend和mouseup事件。</p>
</div>
<div>
<h3>5. 把小松鼠添加到舞台</h3><br/>
<pre class="prettyprint linenums lang-js">squirrel = new Squirrel({id:"squirrel", x:200, y:160, autoSize:true});
stage.addChild(squirrel);
squirrel.addEventListener(events[0], squirrel.jump);</pre>
<p>创建一只小松鼠，并使用stage.addChild()方法添加到舞台。这里的松鼠类Squirrel是我们预先创建好的，待会再讲解如何创建这个类。通过addEventListener()方法为松鼠添加touchend或mouseup事件侦听，这样玩家就可以控制其跳跃。</p>
</div>
<div>
<h3>6. 创建松鼠类Squirrel</h3><br/>
<pre class="prettyprint linenums lang-js">var Squirrel = function(props)
{
Squirrel.superClass.constructor.call(this, props);
this.init();
};
Q.inherit(Squirrel, Q.DisplayObjectContainer);</pre>
<p>Squirrel类是在Squirrel.js文件中实现的。在这里松鼠是由头部和身体两部分组成，因此Squirrel类继承自DisplayObjectContainer容器类。</p>
</div>
<div>
<h3>7. 构建松鼠的形象</h3><br/>
<pre class="prettyprint linenums lang-js">this.head = new Q.MovieClip({id:"head", image:Q.getDOM("headIdle"), useFrames:true, interval:2, x:5, y:0});
this.head.addFrame([
{rect:[0,0,66,56]},
{rect:[69,0,66,56]},
{rect:[138,0,66,56]},
{rect:[207,0,66,56]}]);
this.body = new Q.MovieClip({id:"body", image:Q.getDOM('bodyWalk'), useFrames:true, interval:2, x:0, y:25});
this.body.addFrame([
{rect:[0,0,108,66]},
{rect:[109,0,108,66]},
{rect:[218,0,108,66]},
{rect:[327,0,108,66]},
{rect:[436,0,108,66]},
{rect:[545,0,108,66]},
{rect:[0,70,108,66]},
{rect:[109,70,108,66]},
{rect:[218,70,108,66]},
{rect:[327,70,108,66]},
{rect:[436,70,108,66]}]);
this.addChild(this.body, this.head);</pre>
<p>松鼠的头部和身体都有各自的动作，因此head和body都采用MovieClip类来实现。再用addChild()方法添加到Squirrel容器类里，这样一只松鼠的形象就组成了。</p>
</div>
<div>
<h3>8. 实现松鼠的跳跃逻辑</h3><br/>
<pre class="prettyprint linenums lang-js">Squirrel.prototype.jump = function(e)
{
if(!this.jumping)
{
this.jumping = true;
this.currentSpeedY = this.speedY;
}
};
Squirrel.prototype.update = function()
{
if(this.jumping)
{
this.currentSpeedY -= 0.3;
this.y -= this.currentSpeedY;
if(this.originY <= this.y)
{
this.y = this.originY;
this.jumping = false;
}
}
};</pre>
<p>为了实现松鼠的跳跃，我们首先创建jump方法，在第5步中可以看到我们把touchend或mouseup事件绑定到了jump方法。然后我们在Squirrel的update方法里实现具体的跳跃逻辑。</p>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p style="text-align:center;">© QuarkJS Dev-Team 2012</p>
</footer>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/prettify.js"></script>
</body>
</html>