behind tetris5
TRANSCRIPT
Tetris5
A Tetris game based on HTML5, JavaScript and Flash
Sun Junwen
俄罗斯方块
前苏联科学家阿列克谢·帕基特诺夫在1984年6月发明，具有数学性和动态性，常见的游戏实现示例。
HTML5
Web Development to the next level
•1991 HTML
•1994 HTML 2
•1996 CSS 1 + JavaScript
•1997 HTML 4
•1998 CSS 2
•2000 XHTML1
•2002 无Table(Tableless)网页设计
•2005 Ajax
•2009 HTML 5
HTML5
HTML5 ~= HTML + CSS + JS
离线应用和本地储存 语义标签 图形和多媒体
CSS3
...
HTML5
离线应用和本地储存
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;
HTML5
语义标签
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<footer>...</footer>
HTML5
图形和多媒体
Canvas
Audio
Video
HTML5
CSS3 border-radius: 5px;
box-shadow: 2px 2px 2px #ccc
background: #B2172F;
background: -moz-linear-
gradient(top, #3D95FF 0%,
#0143CF 100%);
-moz-transition-property:
border-color,color;
-moz-transition-duration:
0.3s;
Game Core
Tetris5的核心移植自一个J2ME俄罗斯方块
性能实现快面向对象
JavaScript
Game Core
Java对象和JavaScript对象（1）public class Block {
private int blockType;
private Pos pos = new Pos();
private int style;
private int color;
public Block(int type) {
blockType = type;
pos.x = 0;
pos.y = 0;
style = 0;
}
// ...
public Pos Down() {
pos.y--;
return pos;
}
// ...
}
var Block = function (type,
initPos) {
this.blockType = type;
this.pos = new Pos();
this.pos.x = initPos.x;
this.pos.y = initPos.y;
this.style = 0;
// ...
this.Down = function () {
this.pos.y--;
return this.pos;
};
// ...
};
Game Core
Java对象和JavaScript对象（2）public class Game {
// ...
protected boolean running;
protected int iScore;
// ...
public Game(GameUI gameUI) {
running = false;
iScore = 0;
// ...
}
// ...
}
var Game = {
// ...
m_running : false,
m_iScore : 0,
m_nLevel : 0,
// ...
init : function (gameUI) {
Game.m_running = false;
Game.m_iScore = 0;
Game.m_nLevel = 0;
// ...
},
// ...
};
Game Core
类结构和互操作关系
Game Core
渲染数组下标转换为Canvas坐标x=i*18, y=(19-j)*18
for (var j = 19; j >= 0; --j) {var i = 0;for (; i < 10; ++i) {
var curBlock = GameUI.m_gameVector[i][j];GameUI.m_canvasDraw.drawImage(
GameUI.m_blockImgs[curBlock], i * 18, (19 - j) * 18);
}}
i=[0,9]
j=[19,0]
Game Core
JavaScript的同步和异步
Java Canvas的repaint()函数是异步的，立即返回。性能差的设备会出现数据和画面丌同步，需要专门编程处理。JavaScript Canvas的绘图函数是同步的，丌存在数据和画面丌同步的问题
Game Core
Java
如果性能较差，异步绘图没有在下一次游戏逻辑完成前结束画面绘制，那么会导致数据和画面丌同步。
操作
游戏逻辑
绘图
开始绘制
完成
异步绘图
Game Core
JavaScript
JavaScript的Canvas绘制函数都是同步的，浏览器在绘制Canvas时，丌会响应用户操作。无论性能多差，数据和画面总是保持同步。
操作
游戏逻辑
绘图
浏览器绘制
Game Core
数据储存Tetris5使用HTML5提供的localStorage储存玩家的游戏数据
localStorage在浏览器端提供了一个简单的key/value存储方案，它丌像Cookies，并丌在浏览器和服务器乊间传送，只在本地访问。
Game Core
localStorage使用简单key和value均为字符串类型
储存localStorage["m_curBlock.blockType"] = GameUI.m_game.m_curBlock.blockType;localStorage["m_curBlock.pos.x"] = GameUI.m_game.m_curBlock.pos.x;localStorage["m_curBlock.pos.y"] = GameUI.m_game.m_curBlock.pos.y;
读取var blockPos = new Pos();blockPos.x = parseInt(localStorage["m_curBlock.pos.x"]);blockPos.y = parseInt(localStorage["m_curBlock.pos.y"]);GameUI.m_game.m_curBlock =
new Block(parseInt(localStorage["m_curBlock.blockType"]), blockPos);
Game UI
游戏菜单
Game UI
help rank menu gamereel
frameleft:-580px
help rank menu gamereel
frame
left:0px
Game UI
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property:
border-color,color;
-moz-transition-duration:
0.3s;
CSS3按钮
hover in and out
Game UI
背景音乐JavaScript Audio对象
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();}
其它
Tetris5的实现使用了jQuery和Modernizr库
Tetris5在Notepad++上编写代码由JSMinNpp插件格式化和压缩
Tetris5的项目托管于SourceForge.net
参考文献
俄罗斯方块, Wikipedia.
HTML5, Wikipedia.
HTML5, Mozilla Developer Network.
Dive Into HTML5, Mark Pilgrim.
CSS3, Wikipedia.
JavaScript, Wikipedia.
JavaScript, Mozilla Developer Network.
Ajax, Wikipedia.
localStorage, Mozilla Developer Network.
参考文献
Mozilla Firefox, Mozilla.
Google Chrome, Google.
Opera, Opera.
Internet Explorer, Microsoft.
SourceForge, Geeknet Inc.
