Behind Tetris5

1. Tetris5 A Tetris game based on HTML5, JavaScript and Flash Sun Junwen

2. 俄罗斯方块前苏联科学家阿列克谢· 帕基特诺夫在1984年6月发明，具有数学性和动态性，常见的游戏实现示例。

3. 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

4. HTML5 HTML5 ~= HTML + CSS + JS  离线应用和本地储存  语义标签  图形和多媒体  CSS3  ...

5. HTML5 离线应用和本地储存 var foo = localStorage["bar"]; // ... localStorage["bar"] = foo;

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>

7. HTML5 图形和多媒体 Canvas Audio Video

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;

9. Game Core Tetris5的核心移植自一个J2ME俄罗斯方块 JavaScript 性能 实现快 面向对象

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; // ... // ... } }, // ... };

12. Game Core 类结构和互操作关系

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]

14. Game Core JavaScript的同步和异步 Java Canvas的repaint()函数是异步的，立即返回。性能差的设备会出现数据和画面丌同步，需要专门编程处理。 JavaScript Canvas的绘图函数是同步的，丌存在数据和画面丌同步的问题

15. Game Core Java 如果性能较差，异步操作绘图没有在下一次游异步绘图戏逻辑完成前结束画游戏逻辑面绘制，那么会导致开始绘制绘图数据和画面丌同步。完成

16. Game Core JavaScript 操作 JavaScript的Canvas绘制函数都是同步的，浏览游戏逻辑器在绘制Canvas时，丌会响应用户操作。无论性绘图能多差，数据和画面总是浏览器绘制保持同步。

17. Game Core 数据储存 Tetris5使用HTML5提供的localStorage储存玩家的游戏数据 localStorage在浏览器端提供了一个简单的 key/value存储方案，它丌像Cookies，并丌在浏览器和服务器乊间传送，只在本地访问。

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);

19. Game UI 游戏菜单

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(); }

23. 其它 Tetris5的实现使用了jQuery和Modernizr库 Tetris5在Notepad++上编写 代码由JSMinNpp插件格式化和压缩 Tetris5的项目托管于SourceForge.net

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.

25. 参考文献 MozillaFirefox, Mozilla. Google Chrome, Google. Opera, Opera. Internet Explorer, Microsoft. SourceForge, Geeknet Inc.

26. Tetris5 请用以下一种浏览器在PC、Mac或者访问http://tetris5.sf.net

Behind Tetris5

You are reading a preview.

Check these out next

Behind Tetris5

More Related Content

Viewers also liked (7)

Similar to Behind Tetris5 (20)

Recently uploaded (20)

Behind Tetris5