Behind Tetris5
-
Upload
junwen-sun -
Category
Business
-
view
1.568 -
download
5
Transcript of Behind Tetris5
![Page 1: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/1.jpg)
Tetris5
A Tetris game based on HTML5, JavaScript and Flash
Sun Junwen
![Page 2: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/2.jpg)
俄罗斯方块
前苏联科学家阿列克谢·帕基特诺夫在1984年6月发明,具有数学性和动态性,常见的游戏实现示例。
![Page 3: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/3.jpg)
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
![Page 4: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/4.jpg)
HTML5
HTML5 ~= HTML + CSS + JS
离线应用和本地储存 语义标签 图形和多媒体
CSS3
...
![Page 5: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/5.jpg)
HTML5
离线应用和本地储存
var foo = localStorage["bar"];
// ...
localStorage["bar"] = foo;
![Page 6: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/6.jpg)
HTML5
语义标签
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<footer>...</footer>
![Page 7: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/7.jpg)
HTML5
图形和多媒体
Canvas
Audio
Video
![Page 8: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/8.jpg)
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;
![Page 9: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/9.jpg)
Game Core
Tetris5的核心移植自一个J2ME俄罗斯方块
性能实现快面向对象
JavaScript
![Page 10: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/10.jpg)
Game Core
Java对象和JavaScript对象(1)public class Block {
private int blockType;
private Pos pos = new Pos();
private int style;
private int color;
public Block(int type) {
blockType = type;
pos.x = 0;
pos.y = 0;
style = 0;
}
// ...
public Pos Down() {
pos.y--;
return pos;
}
// ...
}
var Block = function (type,
initPos) {
this.blockType = type;
this.pos = new Pos();
this.pos.x = initPos.x;
this.pos.y = initPos.y;
this.style = 0;
// ...
this.Down = function () {
this.pos.y--;
return this.pos;
};
// ...
};
![Page 11: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/11.jpg)
Game Core
Java对象和JavaScript对象(2)public class Game {
// ...
protected boolean running;
protected int iScore;
// ...
public Game(GameUI gameUI) {
running = false;
iScore = 0;
// ...
}
// ...
}
var Game = {
// ...
m_running : false,
m_iScore : 0,
m_nLevel : 0,
// ...
init : function (gameUI) {
Game.m_running = false;
Game.m_iScore = 0;
Game.m_nLevel = 0;
// ...
},
// ...
};
![Page 12: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/12.jpg)
Game Core
类结构和互操作关系
![Page 13: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/13.jpg)
Game Core
渲染数组下标转换为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);
}}
i=[0,9]
j=[19,0]
![Page 14: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/14.jpg)
Game Core
JavaScript的同步和异步
Java Canvas的repaint()函数是异步的,立即返回。性能差的设备会出现数据和画面丌同步,需要专门编程处理。JavaScript Canvas的绘图函数是同步的,丌存在数据和画面丌同步的问题
![Page 15: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/15.jpg)
Game Core
Java
如果性能较差,异步绘图没有在下一次游戏逻辑完成前结束画面绘制,那么会导致数据和画面丌同步。
操作
游戏逻辑
绘图
开始绘制
完成
异步绘图
![Page 16: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/16.jpg)
Game Core
JavaScript
JavaScript的Canvas绘制函数都是同步的,浏览器在绘制Canvas时,丌会响应用户操作。无论性能多差,数据和画面总是保持同步。
操作
游戏逻辑
绘图
浏览器绘制
![Page 17: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/17.jpg)
Game Core
数据储存Tetris5使用HTML5提供的localStorage储存玩家的游戏数据
localStorage在浏览器端提供了一个简单的key/value存储方案,它丌像Cookies,并丌在浏览器和服务器乊间传送,只在本地访问。
![Page 18: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/18.jpg)
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);
![Page 19: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/19.jpg)
Game UI
游戏菜单
![Page 20: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/20.jpg)
Game UI
help rank menu gamereel
frameleft:-580px
help rank menu gamereel
frame
left:0px
![Page 21: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/21.jpg)
Game UI
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property:
border-color,color;
-moz-transition-duration:
0.3s;
CSS3按钮
hover in and out
![Page 22: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/22.jpg)
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();}
![Page 23: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/23.jpg)
其它
Tetris5的实现使用了jQuery和Modernizr库
Tetris5在Notepad++上编写代码由JSMinNpp插件格式化和压缩
Tetris5的项目托管于SourceForge.net
![Page 24: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/24.jpg)
参考文献
俄罗斯方块, 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.
![Page 25: Behind Tetris5](https://reader033.fdocuments.net/reader033/viewer/2022042716/55ac219f1a28abfe0b8b45ee/html5/thumbnails/25.jpg)
参考文献
Mozilla Firefox, Mozilla.
Google Chrome, Google.
Opera, Opera.
Internet Explorer, Microsoft.
SourceForge, Geeknet Inc.