Behind Tetris5 – Game UI

介绍完了游戏部分,再来看看整个游戏界面部分的实现。整个游戏界面全部实现于一个页面之中,通过画面切换显示不同的功能。界面示意图如下:

ui

界面切换时,通过调整div#cubeReel的left值,显示出不同的功能页。滚动动画效果通过jQuery的animate函数实现。
界面上的所有按钮样式均是通过CSS3实现,部分样式如下:

button {
/* ... */
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:hover, button.hover {
/* ... */
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:active {
box-shadow: 1px 1px 1px #ccc inset;
}

border-radius属性实现了按钮的圆角。box-shadow属性实现了阴影,按钮在一般状态下使用的外阴影,在按下状态时使用了内阴影(inset)。transition的应用使按钮在鼠标移入(hover)和移出时有渐变效果,示例代码只展示了Gecko所使用的-moz前缀的transition属性,不同的浏览器对transition的实现程度不同,-webkit、-o和-ms前缀的transition属性分别是WebKit、Opera和Internet Explorer的实现。

背景音乐则使用了HTML5中新的JavaScript对象Audio,它可以播放浏览器支持的音乐文件。使用方法类似于原来的Image对象:

GameUI.m_audio = new Audio();
// ...
GameUI.m_audio.addEventListener('ended', function () {
GameUI.m_audio.currentTime = 0;
GameUI.m_audio.play();
}, false);
if (!$.browser.opera) {
GameUI.m_audio.src =
Modernizr.audio.ogg ?
GameUI.BKGAUDIO_OGG_SRC :
GameUI.BKGAUDIO_MP3_SRC;
GameUI.m_audio.play();
}

由于不同浏览器的实现不同,目前Audio对象的使用还有一些技巧。循环播放的loop标签并非所有浏览器都能够支持,通过addEventListener(‘ended’, callbackFunction)实现是通用的方法。不同的浏览器对音频格式的支持也有所不同,所以Tetris5准备了两种主要的格式ogg和mp3,根据浏览器的支持程度,优先选择ogg格式。Opera目前对Audio对象的支持不足以满足Tetris5的要求,所以暂时在Opera上关闭背景音乐。

Tetris5使用JavaScript编程,并且充分利用HTML5的新特性,包括Canvas、Audio、localStorage和CSS3。Tetris5的实现离不开jQueryModernizr库,jQuery库为JavaScript编程提供了大量方便的函数,尤其是它的选择器和HTML元素对象,新兴的Modernizr库则为HTML5编程带来了方便,这两个库的使用使得编程的重点位于游戏和菜单逻辑的实现,而不是去考虑浏览器对JavaScript和HTML5实现的不同。Tetris5的JavaScript编写完全在Notepad++上进行,使用了JSMinNpp辅助格式化代码以及在发布时压缩代码。Tetris5的排名系统部分使用PHP和MySQL实现,与游戏界面之间通过Ajax通信。Tetris5的项目代码托管于SourceForge.net

References
[1]. 俄罗斯方块, Wikipedia, http://zh.wikipedia.org/wiki/俄罗斯方块.
[2]. HTML5, Wikipedia, http://en.wikipedia.org/wiki/HTML5.
[3]. HTML5, Mozilla Developer Network, https://developer.mozilla.org/en/html/html5.
[4]. Dive Into HTML5, Mark Pilgrim, http://diveintohtml5.org/.
[5]. CSS3, Wikipedia, http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3.
[6]. JavaScript, Wikipedia, http://en.wikipedia.org/wiki/JavaScript.
[7]. JavaScript, Mozilla Developer Network, https://developer.mozilla.org/en/JavaScript.
[8]. Ajax, Wikipedia, http://en.wikipedia.org/wiki/Ajax_(programming).
[9]. localStorage, Mozilla Developer Network, https://developer.mozilla.org/en/dom/storage.
[10]. Mozilla Firefox, Mozilla, http://www.mozilla.com.
[11]. Google Chrome, Google, http://www.google.com/chrome.
[12]. Opera, Opera, http://www.opera.com.
[13]. Internet Explorer, Microsoft, http://www.beautyoftheweb.com.
[14]. SourceForge, Geeknet Inc, http://www.sourceforge.net.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>