介绍完了游戏部分，再来看看整个游戏界面部分的实现。整个游戏界面全部实现于一个页面之中，通过画面切换显示不同的功能。界面示意图如下：
界面切换时，通过调整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的实现离不开jQuery和Modernizr库，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.