太阳日志

标签： tetris

  • Behind Tetris5 – Game UI

    介绍完了游戏部分，再来看看整个游戏界面部分的实现。整个游戏界面全部实现于一个页面之中，通过画面切换显示不同的功能。界面示意图如下：

    ui

    界面切换时，通过调整div#cubeReel的left值，显示出不同的功能页。滚动动画效果通过jQuery的animate函数实现。
    界面上的所有按钮样式均是通过CSS3实现，部分样式如下：

    button {
/* ... */
border-radius: 2px;
box-shadow: 1px 1px 2px #ccc;
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:hover, button.hover {
/* ... */
-moz-transition-property: border-color,color;
-moz-transition-duration: 0.3s;
}
button:active {
box-shadow: 1px 1px 1px #ccc inset;
}

    border-radius属性实现了按钮的圆角。box-shadow属性实现了阴影，按钮在一般状态下使用的外阴影，在按下状态时使用了内阴影（inset）。transition的应用使按钮在鼠标移入（hover）和移出时有渐变效果，示例代码只展示了Gecko所使用的-moz前缀的transition属性，不同的浏览器对transition的实现程度不同，-webkit、-o和-ms前缀的transition属性分别是WebKit、Opera和Internet Explorer的实现。

    背景音乐则使用了HTML5中新的JavaScript对象Audio，它可以播放浏览器支持的音乐文件。使用方法类似于原来的Image对象：

    （更多…）

  • Behind Tetris5 – Game Core

    Tetris5的游戏逻辑核心移植自本科的一个J2ME课程设计，基于性能方面的考虑，使用该核心设计的手机版俄罗斯方块可以在手机上流畅运行，那么移植到JavaScript上的性能将会有保证，并且毕竟JavaScript和Java还是有一些联系，从Java移植的难度也相对较小。JavaScript和Java都是面向对象的编程语言，但是它们在对象的实现方法上还是有一些不同。Tetris5主要使用了两种对象定义方法：函数对象和单次对象。函数对象的定义和使用方法例如下面的例子（Block.js）：

    var Pos = function () {
this.x = 0;
this.y = 0;
};

var Block = function (type, initPos) {
this.blockType = type;
this.pos = new Pos(); // 使用之前定义的Pos对象
this.pos.x = initPos.x;
this.pos.y = initPos.y;
this.style = 0;
// ...
this.Down = function() {
this.pos.y--;
return this.pos;
};
// ...
};

    这种定义可以创建多个函数实例，在不同的场合使用。所以像位置和块对象采用了这种方法，它们在游戏进行的过程中会被多次创建和销毁。

    （更多…）

  • Behind Tetris5 – Basic

    Tetris5是一个使用HTML5和JavaScript技术实现的俄罗斯方块游戏。俄罗斯方块是前苏联科学家阿列克谢·帕基特诺夫（Алексей Леонидович Пажитнов）在1984年6月发明的，具有数学性和动态性，是实现常见的游戏实现示例。HTML5是HTML下一个的主要修订版本，现在仍处于草案阶段。她的目标是取代1999年所定订的HTML 4.01和XHTML 1.0 标准，在互联网应用迅速发展的时候，使HTML的表达能力达到当代的网络需求。Tetris5基于的HTML5技术不只是狭义上的使用HTML5标签（tag），而是广义上使用HTML5提供的各种新特性，结合CSS3和JavaScript编写网络应用的一种新方法。

    HTML5是目前正在开发过程中的新一代HTML标准，虽然没有最终定案，但是像Mozilla Gecko引擎、Webkit、Opera和新版IE都引进部分实现了该标准。HTML5为网络应用开发带来了许多新特性，在HTML的层面上，增加了一些新的标签（tag）：

    （更多…）

  • Tetris5 基于 HTML5 的俄罗斯方块

    http://www.sunjw.us/tetris5

    基于 HTML5 技术，完全使用 Javascript 编写的俄罗斯方块游戏。

    菜单支持快捷键，游戏控制：上下左右、ASDW，X，或者用鼠标点击控制。

    也可以在 iPhone Safari 或者 Android 手机上玩。

    游戏编写内幕稍后奉上。

    tetris5-1

    tetris5-2

    tetris5-3