【翻译】Tizen Sample Web App官方文档说明

Tizen的三个官方游戏示例，参见：

https://developer.tizen.org/resources/sample-web-applications

 

 

--------------------------------------------------

 

see:https://developer.tizen.org/resources/sample-web-applications/hang-man

原文见：https://developer.tizen.org/resources/sample-web-applications/hang-man

 

Sample Web App: Hang On Man

 

示例Web应用：Hang On Man

 

This is an implementation of the classic word guessing game. Features of this game, that may be of interest to web application developers, are:

 

这是一个经典猜单词游戏的实现。这个游戏可能让web应用开发者感兴趣的特性有：

 

Internationalization using either the chromium API (if present) or a JavaScript implementation

 

使用chromium API（如果存在）或一个JavaScript实现的国际化

 

Determining the computed style property value of an object, as opposed to the CSS value

 

确定一个对象的计算样式属性值，与CSS值相反

 

Using document fragments for DOM manipulation, without costly re-rendering

 

把文档片段用于DOM操纵，不需要昂贵的重新渲染

 

Using local storage to save state

 

使用本地存储来保存状态

 

Reading data from local JSON files

 

从本地JSON文件中读取数据

 

CSS transforms, transitions, and animations

 

CSS变换、过渡和动画。

 

Serializing animation with the "transitionEnd" event

 

用“transitionEnd”事件序列化动画

 

Using a body class to change the appearance of the entire app at once (see the "Night colors" image below)

 

使用一个body类马上改变整个应用的外观（见下面的“夜晚颜色”图片）

 

Tricks with images: image masks, border images, linear and radial gradients, SVGs

 

对图片的技巧：图片遮罩，边线图片，线性和径向渐变，SVG

 

Screen Shots

 

截屏

 

Title screen

 

标题屏

 

Game screen

 

游戏屏

 

Night colors

 

夜晚颜色

 

I18n

 

国际化

 

In js/getMessages.js, there is code that provides a function window.getMessage(), with the same API as the window.chrome.i18n.getMessage() function. If the chromium function exists (such as running as an extension within chromium or Google Chrome), the implementation simply uses that function. If not, there is a simple implementation that provides most of the chromium functionality (but with some simplifications on message argument handling).

 

在js/getMessages.js中，有一段代码提供一个函数window.getMessage()，使用和window.chrome.i18n.getMessage()函数相同的API。如果chromium函数存在（诸如运行作为chromium或Google Chrome内的一个扩展），那么实现简单地使用那个函数。如果不是，则有一个简单实现，它提供大部分chromium的功能（但在消息参数处理上有一些简化）

 

Computed Style

 

计算样式

 

For each style property, there is a CSS value explicitly provided in a .css document. This is the value you will get if you check a HTMLElement's style object. In many cases, the value will be en empty string (""), if there is no explicit mention of the property in any CSS file.

 

对于每个样式属性，存在一个CSS值显示地被提供在.css文档中。这是你将获得的值如果你检查一个HTMLElement的style对象。在许多情况下，该值将是一个空字符串，如果在任意CSS文件中没有显式地提及该属性。

 

In some cases, you need to know the "computed value", which is the value computed by the rendering engine based on current window size, etc. In js/hangonman.js, we calculate the computed value with the following code (this does not work on all browsers in exactly the same way):

 

在一些情况下，你需要知道“被计算的值”，它是渲染引擎基于当前窗口大小等等计算出来的值。在js/hangonman.js，我们用以下代码计算被计算值（它不全在所有浏览器上以完全相同的方式工作）：

 

document.defaultView.getComputedStyle(element).getPropertyValue(property);

 

Document fragments

 

文档片段

 

Whenever you change the DOM (add an element, change a class, etc), some or all of the view is re-rendered. In Hang On Man, we create divs dynamically for each alphabet letter, to support languages with a different number of letters. One approach is to wait until the DOM content is ready, then append a series of letter divs to the document, each with its own collection of classes and style values. This is works, but would require many rendering passes, delaying the final appearance of the application.

 

每当你改变DOM（添加一个元素，改变一个类，等等），一些或所有视图被重新渲染。在Hang On Man中。我们为每个字母表字符动态地创建div，以支持使用不同数量字符的语言。一种方法是等待直至DOM内容准备好，然后尾加一系列字符div到文档中，每个带有它自己的class集合和style值。这是可行的，但将需要许多渲染传递，拖延应用程序的最终出现。

 

In Hang on Man, we use the concept of document fragments to create a DOM subtree outside of the document and add the whole thing at one time, incurring only one render pass. The fragment can be constructed even before the DOM is ready, allowing computation to start once the script is loaded.

 

在Hang on Man中，我们使用文档片段的概念在文档的外面创建一个DOM子树，并一次性地添加全部东西，仅导致一次渲染传递。片段甚至可以在DOM准备好之前被构造，允许一旦脚本被加载时就马上开始计算。

 

var fragment = document.createDocumentFragment();

for (i = 0; i < num; ++i) {

    var child = document.createElement("div");

    addStylesAndClasses(child);

    fragment.appendChild(child);

}

 

Once the DOM is loaded:

 

一旦DOM被加载：

 

var parent = document.getElementById("parent");

parent.appendChild(fragment);

 

With this, all the children of the fragment are now direct children of the parent (the fragment is never actually part of the DOM).

 

这样，fragment的所有儿子现在是parent的直接儿子（实际上fragment从不是DOM的一部分）

 

Local Storage

 

本地存储

 

We save game state persistently with the localStorage object. In js/hangonman.js, there are functions, initGameState(), restoreGameState(), and saveGameState(), that write to and read from this object. Since localStorage information is not sandboxed per application, we preface each datum with "com.intel.hom." (hom == Hang On Man) to avoid clashes.

 

我们用localStorage对象持久地保存游戏状态。在js/hangonman.js中，有一些函数initGameState()，restoreGameState()，和saveGameState()，它们写入和读取这个对象。因为在每个应用程序中localStorage的信息不被沙箱，所以我们对每个基准前面加上“com.intel.hom.”（hom是Hang On Man的缩写）以避免冲突。

 

Note that arrays and other complex data structures can be stored in local storage by marshalling to and from strings, using JSON.stringify() and JSON.parse(). See restoreSettings() for an example usage.

 

注意数组和其它复杂数据结构可以通过使用JSON.stringify()和JSON.parse()编集到字符串和从字符串中编集以被保存在本地存储中。参见restoreSettings()以获得一个示例用法。

 

JSON files

 

JSON文件

 

Hang On Man contains several word lists. Players can select for different kinds of words (animals, nations, win terms, common phrases, etc). Each word list is stored in a separate JSON file. We read these files using XmlHttpRequest(). In the current code, we read all lists synchronously and in series. See initWordLists(). An obvious next step in speeding the initial app load time would be to load these lists on demand and in the background, using asynchronous requests or even a webworker.

 

Hang On Man包含几个单词列表。玩家可以选择不同类型的单词（动物、国家、酒术语（注：应为wine terms），一般短语，等等）。每个单词列表被存储在一个单独的JSON文件中。我们使用XmlHttpRequest()读取这些文件。在当前代码中。我们同步地和依次地读取所有列表。参见initWordLists()。在加速最初应用加载时间的明显下一步将是根据需要加载这些列表并且在后台中，使用异步请求或者甚至使用一个webworker。

 

One point to consider, when developing applications with XHRs, is that pages loaded with the file:// uri scheme are not allowed to request files from different domains, even from localhost (local files). Ways to work around this security check are:

 

当使用XHR开发应用时，一个要考虑的点是使用file://的uri模式加载的页面不被允许从不同的域中请求文件，甚至是从本地（局部文件）。绕过这个安全检查的方法有：

 

Start a local web server and access your app with a http:// uri rather than a file:// uri

 

启动一个web服务器并用一个http://的uri访问你的应用，而非一个file://的uri

 

Load your app as an extension [chromium only]

 

加载你的应用作为一个扩展【只适用于chromium】

 

Use the --disable-web-security switch went running chromium-browser. [chromium only].

 

使用--disable-web-security开关去运行chromium浏览器。【只适用于chromium】。

 

Transforms, Transitions, and Animations

 

变换、过渡和动画

 

A transition steps between two values of a property over time. In this case, we go from invisible (opacity is zero) to shown (opacity is one). As the div fades in, it goes from large (3x) to normal size. The transition is triggered by adding the "shown" class to the element. Note, also, that z-index changes from 0 to 20, so that when it is invisible, it is also stacked behind other divs, so it does not capture mouse events.

 

随时间逝去一个过渡在一个属性的两个值之间步进。在这种情况下，我们从不可见（透明度为0）变成显示（透明度为1）。当div淡入时，它从大（3x）转为普通大小。通过添加“shown”类到该元素来触发过渡。注意，同样，z索引从0改变至20，致使当它不可见时，它也被堆叠在其它div后面，所以它不捕捉鼠标事件。

 

#letters {

    z-index: 0;

    opacity: 0;

    -webkit-transform: scale(3, 3);

    -webkit-transition: opacity 2s ease-in, -webkit-transform 2s ease-in;

}

 

letters.shown {

    z-index: 20;

    opacity: 1;

    -webkit-transform: scale(1, 1);

}

 

An example of two animations at the same time with different durations. The effect here is for the birds in the game to hover with small, apparently random movements.

 

同一时间不同持续时间的两个动画的示例。这里的效果是让游戏中的小鸟们以小的、明显随机的动作盘旋。

 

@-webkit-keyframes move-horiz {

  0% {left: 0px;

      -webkit-transform: skewX(0deg);}

  50% {-webkit-transform: skewX(1deg);

       left: 5px; }

  75% {-webkit-transform: skewX(.5deg);

       left: 2px;}

  100% {-webkit-transform: skewX(-.75deg);

        left: -3px;}

}

 

@-webkit-keyframes move-vert {

  0% {top: 0px;}

  50% {top: 5px;}

  100% {top: -5px;}

}

 

.dialog.shown .inner {

  -webkit-animation: move-horiz 2.5s infinite alternate ease-in-out,

                     move-vert 1.6s infinite alternate ease-in-out;

}

 

In some cases, we need to know when a transition is complete. For the clouds scudding across the sky, once each cloud has reached the side and its movement has ended, they are destroyed with a call to destroyCloud(). Note, also, the use of the classList property to manipulate classes in a standard HTML5 way.

 

在一些情况下，我们需要知道过渡在什么时候完成。对于在天空中平稳移动的云，一旦每团云已经到达边沿而它的动作已经结束，它们就会被destroyCloud()的调用销毁。还有注意，使用classList以通过一种标准的HTML5方式来操纵类。

 

var cloudElem = document.createElement("div");

var classList = cloudElem.classList;

classList.add("cloud");

cloudElem.addEventListener('webkitTransitionEnd', destroyCloud, false);

 

Body classes

 

body类

 

The term "body classes" refers to the use of a class on the body element or some outer element to control the appearance of many child elements. In Hang on Man, we can apply a nocturnal theme just by adding the "night" class to <body>. See css/hangonman.css. A simplified example:

 

术语“body类”是指在body元素或一些外部元素上使用一个class来控制许多子元素的外观。在Hang on Man中，我们可以只通过添加"night"类到<body>来应用一个夜晚主题。参见css/hangonman.css。一个简化示例：

 

<body>

  <div id="sky">

    <div class="cloud"></div>

    <div class="cloud"></div>

    ...

  </div>

</body>

#sky {

  background-image: url("daysky.png");

}

 

.cloud {

  background-color: white;

}

 

.night #sky {

  background-image: url("nightsky.png");

}

 

.night .cloud {

  background-color: gray;

}

 

Tricks with images

 

使用图片的技巧

 

Gradients:

 

渐变

 

background-image: -webkit-gradient(radial,

                                   center bottom, 1,

                                   center bottom, 600,

                                   from(#bce9fd),

                                   color-stop(0.60, #43c0fa),

                                   to(#3384c0));

 

background-image: -webkit-gradient(linear, left top, left bottom,

                                   from(rgb(254, 220, 112)), to(rgb(217,86,78)));

 

Image masks:

 

图片蒙版：

 

#skyline {

    background-color: #333;

    -webkit-mask-image: url("../images/skyline.png");

}

 

Border images. These are used in several places to enable graphics to stretch to accommodate translation strings of different lengths. For example, the "New Game" dialog, which looks like a bed sheet held by two birds, is stretched to the width of the longest category. The "New Game" and "Quit" buildings, on either side of the screen, are also stretched, but use the "round" method to show an integral number of building windows across the width of the building.

 

边框图片。这些被用在几个地方以使图形能伸缩以适应不同长度的翻译字符串。例如，“新游戏”对话框，它看起来像一个由两只鸟拉着的床单，被拉伸至最长分类的宽度。“新游戏”和“退出”建筑物，在屏幕的两侧，也是被拉伸的，但使用“round”方法来显示横跨建筑物宽度的建筑物窗口的整数数量。

 

#newGame.control {

    border-width: 94px 20px 5px 20px;

    -webkit-border-image: url("../images/building1.svg") 94 20 5 20 round round;

}

 

.dialog .inner {

    border-width: 145px 95px 35px 75px;

    -webkit-border-image: url("../images/sheet2.png") 145 95 35 75 stretch stretch;

}

 

Using Scalable Vector Graphics (SVG)

 

使用可缩放矢量图形（SVG）

 

#myElement {

  background-image: url("../images/cloud.svg");

}

 

 

--------------------------------------------------------------

 

 

 

Sample Web App: Annex

 

示例Web应用：Annex

 

The Annex application is a good example of how to design a person-against-person or person-against-machine web application. The UI was created using HTML and CSS and the AI engine is implemented completely in JavaScript.

 

Annex应用程序是一个如何设计一个人对人或人对机的web应用程序的好示例。使用HTML和CSS创建用户界面，而AI是完全通过JavaScript来实现。

 

The Annex application doesn't use any Tizen specific API calls, so it can be run in many popular browsers which support HTML5. The application consists of a view layer, written by HTML5, and a control layer, which contains the AI engine and the game process control module, written in JavaScript. It also uses the JQuery, a fast and concise JavaScript Library for rapid web development.

 

Annex应用程序不使用任何Tizen特定API调用，所以它可以运行在许多支持HTML5的流行浏览器上。应用程序由一个视图层，用HTML5编写，以及一个控制层，它包含AI引擎和游戏处理控制模块，在JavaScript中编写，组成。它还使用JQuery，一个用于快速web开发的快速和简洁的JavaScript库。

 

The Annex game demonstrates some interesting features:

 

Annex游戏演示一些有趣的特性：

 

Javascript implementation of a game AI engine

 

一个游戏AI引擎的Javascript实现

 

Control DOM object dynamically with Javascript & CSS

 

用Javascript和CSS动态地控制DOM对象

 

Screen Shots

 

截屏

 

Welcome Screen

 

欢迎屏幕

 

Settings

 

设置

 

Playing

 

游戏中

 

End

 

结束

 

AI engine

 

AI引擎

 

The AI engine is based on the Minimax Game(Adversarial) Tree algorithm. In game tree theory, searching depth and accuracy of the chessboard evaluation method are the most important aspects related to game AI ability. In Annex, the default searching depth is 3, implying the difficulty level of game, and can be increased to a higher value, like 4 or 5. The higher searching depth means higher difficulty, more CPU time and memory consumption, and slower computer player response. In the js/annex.js file, this is mapped to the "level" property:

 

AI引擎基于极大极小游戏（对抗）树算法。在游戏树理论中，棋盘计算方法的搜索深度和精确度是与游戏AI能力相关的最重要切面。在Annex中，默认搜索深度是3，暗示游戏的难度级别，并且可以被增加至更高的值，像4或5。较高的搜索深度意味着更高的难度，更多的CPU时间和内存消耗，以及更慢的计算机玩家响应。在js/annex.js文件中，它被映射至"level"属性：

 

level: 3,

 

For the evaluation method, Annex integrates three aspects: mobility, number of pieces, and position value.

 

对于计算方法，Annex整合三个切面：流动性、棋子数，以及位置值。

 

Mobility is how many places the current player could possibly set a stone.

 

流动性是当前玩家可能放置棋子在多少位置。

 

Number of pieces is how many of each player's markers are on the board.

 

棋子数是每个玩家在棋盘上的标记有多少。

 

Position value means how favorable each position is on the reversi board.

 

位置值意思是在黑白棋盘上每个位置有多有利。

 

In a reversi game, occupying gainful places is very important. In the js/annex.js file, the evaluation function is:

 

在黑白棋游戏中，占据有利位置是非常重要的。在js/annex.js文件中，计算函数是：

 

evaluate: function(place, _color, _board, _level, _heap)

 

The parameters:

 

参数：

 

"place" means where to set the stone

 

"place"意思是在哪里设置棋子

 

"_color" is the stone color

 

"_color"是棋子的颜色

 

"_board" is the chessboard before setting the stone

 

"_board"是在设置棋子之前的棋盘

 

"_heap" is the game tree data structures

 

"_heap"是游戏树数据结构

 

"_level" is a flag pointing out whether to stop searching the game tree.

 

"_level"是一个标志指出是否停止搜索游戏树。

 

At first, the function will set the stone on the board to get a new chessboard, and then, evaluate the new board by mobility and pieces value. The pieces value is made up of the value of the place where the pieces are set, as well as the number of pieces.

 

最初，函数将设置棋子在盘上以获得一个新的棋盘，然后，通过流动性和棋子的值计算新的棋盘。棋子值组成棋子被放置位置的值，以及棋子数量。

 

Then, the AI engine can evaluate each move and choose the best one. In js/annex.js, the function bestPlace(possible) does this:

 

然后，AI引擎可以计算每种移动并选择最佳的。在js/annex.js中，函数bestPlace(possible)做这件事：

 

ret = possible[0];

var value = this.evaluate(ret);

for (var p=1; p<possible.length; p++) {

    var v = this.evaluate(possible[p]);

    if (v > value){

        value = v;

        ret = possible[p];

    }

}

 

Here, the variable "possible" means a collection of possible setting places for a player, according to the Reversi rules.

 

这里，变量"possible"意思是一个玩家的一组可能放置位置。根据黑白棋的规则。

 

Control DOM object dynamically

 

动态控制DOM对象

 

In some cases, we need to make some DOM objects visible/invisible. For Annex, it used a css swither named "display_none":

 

.display_none {

   display:none;

   z-index:-1;

}

 

We can use this to control whether DOM objects display on screen (with the Jquery Javascript library) like this:

 

我们可以使用它来控制DOM对象是否显示在屏幕上（使用Jquery Javascript库），像这样：

 

$('#go_visible').removeClass('display_none');

$('#go_invisible').addClass('display_none');

 

In Annex, this is used in many places, for example, in js/annex.js, when controlling the help panel:

 

在Annex中，它被用在许多地方，例如，在js/annex.js中，当控制帮助面板时：

 

showHelp: function() {

    this.playSound('snd_navclick');

    this.endConfigure();

    $('#help').removeClass('display_none');

},

exitHelp: function() {

    this.playSound('snd_navclick');

    $('#help').addClass('display_none');

},

 

When you need to show the help panel, the showHelp() function makes the DOM object with the id attribute value "help" visible on screen. The exitHelp() function is called to disable it.

 

当你需要显示帮助面板时，showHelp()函数使id属性值为“help”的DOM对象在屏幕上可见。调用exitHelp()函数以屏蔽它。

 

 

-------------------------------------------------

 

 

Sample Web App: Counting Beads

 

示例Web应用：数珠子

 

Counting Beads is a simple web application built using HTML5, JavaScript, CSS3, and JQuery. It targets young kids, teaching them counting up to 50.

 

数珠子是一个简单的web应用程序，使用HTML5、JavaScript、CSS3、和JQuery构建。它目标为年轻儿童，教他们数数至50。

 

The game starts off showing the home screen, where you can either start the game directly or learn how to play. The game screen has 5 bars with 10 fruity beads each. 3 questions are randomly generated and the user needs to move the many corresponding fruit beads. On a correct answer, the game reinforces the child's confidence with positive phrases. If all 3 answers are correct, the game transitions to the "good job" screen, after a 7s delay, to allow the user to look through their answer or start over.

 

这个游戏从显示主屏幕开始，那里你可以直接地开始游戏或学习游戏规则。游戏屏幕右5个横杆各带10个水果珠子。随机地生成3个问题，而用户需要移动许多对应的水果珠子。在一个正确的答案上，游戏用正面的短语加强孩子的信心。如果所有三个答案是正确的，游戏过渡至“做得好”屏幕，在7秒延迟后，以允许用户仔细查看他们的答案或者重新开始。

 

Counting Beads showcases:

 

数珠子亮点：

 

the dynamic creation of the DOM elements: document.createElement()

 

DOM元素的动态创建document.createElement()

 

CSS3: -webkit-transition; and -webkit-animation;

 

CSS3：-webkit-transition;和-webkit-animation;

 

JQuery Animations: .animate(), .delay(), .fadeIn(), fadeOut() and .queue()/.dequeue()

 

JQuery动画：.animate()，.delay()，.fadeIn()，fadeOut()和.queue()/.dequeue()

 

The app also demonstrsate manipulation of CSS3 properties from javascript, such as manipulation of backgroundImage, element's height, width, positions, just to name a few. The app is internationalized according to Chrome i18n guidelines (usage of chrome.i18n.getMessage("messagename") ). For more details, refer to: http://code.google.com/chrome/extensions/i18n.html

 

该应用还演示从javascript中操纵CSS3属性，诸如操纵backgroundImage、元素的高度，宽度，位置，只是命名了一些。应用根据Chrome的i18n指引来国际化（chrome.i18n.getMessage("messagename")的用法）。想获得更多细节，请参考：http://code.google.com/chrome/extensions/i18n.html

 

Screen Shots

 

截屏 

 

Home Screen

 

主屏幕

 

How To Play

 

游戏规则 

 

Playing

 

游戏中

 

Appreciation screen

 

评分屏幕

 

Good job screen

 

做得好屏幕