Behind Tetris5

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

语义标签 <section>
<article>
<body> <header>
<header> <h1>Title</h1>
<hgroup> </header>
<h1>Page title</h1> <section>
<h2>Page subtitle</h2> Content...
</hgroup> </section>
</header> </article>
</section>
<nav>
<ul> <aside>
Navigation... Top links...
</ul> </aside>
</nav>
<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 { var Block = function (type,
private int blockType; initPos) {
private Pos pos = new Pos(); this.blockType = type;
private int style; this.pos = new Pos();
private int color; this.pos.x = initPos.x;
this.pos.y = initPos.y;
public Block(int type) { this.style = 0;
blockType = type; // ...
pos.x = 0; this.Down = function () {
pos.y = 0; this.pos.y--;
style = 0; return this.pos;
} };
// ... // ...
public Pos Down() { };
pos.y--;
return pos;
}
// ...
}

Game Core
Java对象和JavaScript对象（2）
public class Game { var Game = {
// ... // ...
protected boolean running; m_running : false,
protected int iScore; m_iScore : 0,
// ... m_nLevel : 0,
public Game(GameUI gameUI) { // ...
running = false; init : function (gameUI) {
iScore = 0; Game.m_running = false;
// ... Game.m_iScore = 0;
} Game.m_nLevel = 0;
// ... // ...
} },
// ...
};

Game Core

类结构和互操作关系

Game Core
i=[0,9]

渲染
数组下标转换为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);
}
}

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
left:-580px frame

reel help rank menu game

frame

reel help rank menu game
left:0px

Game UI

CSS3按钮
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;

hover in and out

-moz-transition-property:
border-color,color;
-moz-transition-duration:
0.3s;

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.

参考文献

MozillaFirefox, Mozilla.
Google Chrome, Google.
Opera, Opera.
Internet Explorer, Microsoft.
SourceForge, Geeknet Inc.

Tetris5
请用以下一种浏览器

在PC、Mac或者

访问http://tetris5.sf.net

Behind Tetris5

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Behind Tetris5

Similar to Behind Tetris5 (20)

Behind Tetris5