Behind Tetris5

1,812 views

Published on

Behind Tetris5

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,812
On SlideShare
0
From Embeds
0
Number of Embeds
596
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Behind Tetris5

  1. 1. Tetris5A Tetris game based on HTML5, JavaScript and Flash Sun Junwen
  2. 2. 俄罗斯方块前苏联科学家阿列克谢· 帕基特诺夫在1984年6月发明,具有数学性和动态性,常见的游戏实现示例。
  3. 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. 4. HTML5HTML5 ~= HTML + CSS + JS 离线应用和本地储存 语义标签 图形和多媒体 CSS3 ...
  5. 5. HTML5离线应用和本地储存var foo = localStorage["bar"];// ...localStorage["bar"] = foo;
  6. 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. 7. HTML5图形和多媒体 Canvas Audio Video
  8. 8. HTML5CSS3 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. 9. Game CoreTetris5的核心移植自一个J2ME俄罗斯方块 JavaScript性能实现快面向对象
  10. 10. Game CoreJava对象和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. 11. Game CoreJava对象和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. 12. Game Core类结构和互操作关系
  13. 13. Game Core i=[0,9]渲染数组下标转换为Canvas坐标x=i*18, y=(19-j)*18for (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. 14. Game CoreJavaScript的同步和异步Java Canvas的repaint()函数是异步的,立即返回。性能差的设备会出现数据和画面丌同步,需要专门编程处理。JavaScript Canvas的绘图函数是同步的,丌存在数据和画面丌同步的问题
  15. 15. Game CoreJava 如果性能较差,异步 操作 绘图没有在下一次游 异步绘图 戏逻辑完成前结束画 游戏逻辑 面绘制,那么会导致 开始绘制 绘图 数据和画面丌同步。 完成
  16. 16. Game CoreJavaScript 操作 JavaScript的Canvas绘 制函数都是同步的,浏览 游戏逻辑 器在绘制Canvas时,丌 会响应用户操作。无论性 绘图 能多差,数据和画面总是 浏览器绘制 保持同步。
  17. 17. Game Core数据储存Tetris5使用HTML5提供的localStorage储存玩家的游戏数据localStorage在浏览器端提供了一个简单的key/value存储方案,它丌像Cookies,并丌在浏览器和服务器乊间传送,只在本地访问。
  18. 18. Game CorelocalStorage使用简单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. 19. Game UI游戏菜单
  20. 20. Game UI left:-580px framereel help rank menu game frame reel help rank menu game left:0px
  21. 21. Game UICSS3按钮 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. 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. 23. 其它Tetris5的实现使用了jQuery和Modernizr库Tetris5在Notepad++上编写代码由JSMinNpp插件格式化和压缩Tetris5的项目托管于SourceForge.net
  24. 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. 25. 参考文献MozillaFirefox, Mozilla.Google Chrome, Google.Opera, Opera.Internet Explorer, Microsoft.SourceForge, Geeknet Inc.
  26. 26. Tetris5请用以下一种浏览器在PC、Mac或者访问http://tetris5.sf.net

×