• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Behind Tetris5
 

Behind Tetris5

on

  • 1,645 views

Behind Tetris5

Behind Tetris5

Statistics

Views

Total Views
1,645
Views on SlideShare
1,075
Embed Views
570

Actions

Likes
0
Downloads
9
Comments
0

5 Embeds 570

http://sunblog.72pines.com 464
http://72pines.com 93
http://www.sunjw.us 9
http://www.linkedin.com 3
http://www.sunblog.72pines.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Behind Tetris5 Behind Tetris5 Presentation Transcript

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