More Related Content Similar to Behind Tetris5 Similar to Behind Tetris5 (20) Behind Tetris53. 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
6. 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>
8. 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;
10. 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;
}
// ...
}
11. 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;
// ... // ...
} },
// ...
};
13. 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]
15. Game Core
Java
如果性能较差,异步
操作
绘图没有在下一次游
异步绘图 戏逻辑完成前结束画
游戏逻辑
面绘制,那么会导致
开始绘制
绘图
数据和画面丌同步。
完成
16. Game Core
JavaScript
操作 JavaScript的Canvas绘
制函数都是同步的,浏览
游戏逻辑
器在绘制Canvas时,丌
会响应用户操作。无论性
绘图
能多差,数据和画面总是
浏览器绘制
保持同步。
18. 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);
20. Game UI
left:-580px frame
reel help rank menu game
frame
reel help rank menu game
left:0px
21. 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;
22. 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();
}
24. 参考文献
俄罗斯方块, 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.