Your SlideShare is downloading. ×

Behind Tetris5

1,535

Published on

Behind Tetris5

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,535
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tetris5A 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. HTML5HTML5 ~= 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. 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. Game CoreTetris5的核心移植自一个J2ME俄罗斯方块 JavaScript性能实现快面向对象
  • 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. 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. Game Core类结构和互操作关系
  • 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. Game CoreJavaScript的同步和异步Java Canvas的repaint()函数是异步的,立即返回。性能差的设备会出现数据和画面丌同步,需要专门编程处理。JavaScript Canvas的绘图函数是同步的,丌存在数据和画面丌同步的问题
  • 15. Game CoreJava 如果性能较差,异步 操作 绘图没有在下一次游 异步绘图 戏逻辑完成前结束画 游戏逻辑 面绘制,那么会导致 开始绘制 绘图 数据和画面丌同步。 完成
  • 16. Game CoreJavaScript 操作 JavaScript的Canvas绘 制函数都是同步的,浏览 游戏逻辑 器在绘制Canvas时,丌 会响应用户操作。无论性 绘图 能多差,数据和画面总是 浏览器绘制 保持同步。
  • 17. Game Core数据储存Tetris5使用HTML5提供的localStorage储存玩家的游戏数据localStorage在浏览器端提供了一个简单的key/value存储方案,它丌像Cookies,并丌在浏览器和服务器乊间传送,只在本地访问。
  • 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. Game UI游戏菜单
  • 20. Game UI left:-580px framereel help rank menu game frame reel help rank menu game left:0px
  • 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. 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

×