您的位置：首页 > 移动开发

Tizen web app开发示例（将2048移植到Tizen平台上）

2015-12-01 12:51 309 查看

一. Tizen简介

Tizen是由英特尔和三星合作创建的基于Linux的一款新开源操作系统，是一个开源的、标准化的基于Linux的操作系统。该操作系统支持 HTML5 与基于 WAC 的应用程序，还可广泛应用于各种不同的装置，其中包含智能型手机、平板计算机、智能电视、笔记本电脑与行车娱乐系统。

二. 安装Tizen SDK

前往开发者平台下载Installer 和SDK Image
运行Installer，载入SDK Image
安装完毕后，运行Tizen SDK
Tips：真机测试时，确保电脑上已经安装了三星手机的驱动。

三.Tizen web app开发示例

创建Web App Project

File->New->Tizen Web Project，选择Basic Application



输入Project name后点击Finish。

查看Web project 目录结构



其中css、images和js文件夹分别用于存放web项目的样式表，图片和js脚本代码。

在config.xml文件中可以修改项目的一系列属性，包括API版本，图标等等。index.html为项目web的入口。

下面以将小游戏2048移植到Tizen系统上作为开发示例
index.html
<span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="description" content="2048" />

<title>2048</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/2048.js"></script>
</head>

<body>
<header>
<h1>2048</h1>
<h2>Score: <span id="score">0</span></h2>
<h6>Tips: Tiles with same value can be merged into one, try to move up/down/left/right to get 2048!</h6>
</header>
<div class="wraper"><a id="startBtn" onclick="gameStart()">Restart</a></div>
<div id="div2048"></div>
<footer>
<p>© 2015 NJU. All rights reserved.</p>
</footer>
</body>
</html></span>

2048.js
<span style="font-family:Microsoft YaHei;">function game2048(container) {
this.container = container;
this.tiles = new Array(16);
this.score = 0;
}

game2048.prototype = {
init : function() {
this.score = 0;

for (var i = 0, len = this.tiles.length; i < len; i++) {
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] = tile;
}
this.randomTile();
this.randomTile();
},

newTile : function(val) {
var tile = document.createElement('div');
this.setTileVal(tile, val);
return tile;
},

setTileVal : function(tile, val) {
tile.className = 'tile tile' + val;
tile.setAttribute('val', val);
tile.innerHTML = val > 0 ? val : '';
},

randomTile : function() {
var zeroTiles = [];
for (var i = 0, len = this.tiles.length; i < len; i++) {
if (this.tiles[i].getAttribute('val') == 0) {
zeroTiles.push(this.tiles[i]);
}
}
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() < 0.8 ? 2 : 4);
},

move : function(direction) {
var j;
switch (direction) {
// 向上滑动
case 'UP':
for (var i = 4, len = this.tiles.length; i < len; i++) {
j = i;
while (j >= 4) {
this.merge(this.tiles[j - 4], this.tiles[j]);
j -= 4;
}
}

break;
// 向下滑动
case 'DOWN':
for (var i = 11; i >= 0; i--) {
j = i;
while (j <= 11) {
this.merge(this.tiles[j + 4], this.tiles[j]);
j += 4;
}
}
break;
// 向左滑动
case 'LEFT':
for (var i = 1, len = this.tiles.length; i < len; i++) {
j = i;
while (j % 4 != 0) {
this.merge(this.tiles[j - 1], this.tiles[j]);
j -= 1;
}
}
break;
// 向右滑动
case 'RIGHT':
for (var i = 14; i >= 0; i--) {
j = i;
while (j % 4 != 3) {
this.merge(this.tiles[j + 1], this.tiles[j]);
j += 1;
}
}
break;
default:
return;
}
document.getElementById("score").innerHTML = ""+this.score+"";
this.randomTile();
},

merge : function(prevTile, currTile) {
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if (currVal != 0) {
if (prevVal == 0) {
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
} else if (prevVal == currVal) {
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
this.score += prevVal * 2;
}
}
},
equal : function(tile1, tile2) {
return tile1.getAttribute('val') == tile2.getAttribute('val');
},
max : function() {
for (var i = 0, len = this.tiles.length; i < len; i++) {
if (this.tiles[i].getAttribute('val') == 2048) {
return true;
}
}
},
over : function() {
for (var i = 0, len = this.tiles.length; i < len; i++) {
if (this.tiles[i].getAttribute('val') == 0) {
return false;
}
if (i % 4 != 3) {
if (this.equal(this.tiles[i], this.tiles[i + 1])) {
return false;
}
}
if (i < 12) {
if (this.equal(this.tiles[i], this.tiles[i + 4])) {
return false;
}
}
}
return true;
},
clean : function() {
for (var i = 0, len = this.tiles.length; i < len; i++) {
this.container.removeChild(this.tiles[i]);
}
this.tiles = new Array(16);
this.score = 0;
}
}
var game, startBtn, score;

window.onload = gameStart;

<span style="color:#ff0000;">//为后退键添加退出游戏事件的绑定</span>
<strong>window.addEventListener('tizenhwkey', function(e) {
if(e.keyName == "back") {
try {
tizen.application.getCurrentApplication().exit();
} catch (error) {
console.error("getCurrentApplication(): " + error.message);
}
}
},false);</strong>

function gameStart(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('startBtn');
score = document.getElementById("score").innerHTML="0";
game = game || new game2048(container);
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}

game.init();

}

var startPos, endPos, direction, isScrolling;
window.addEventListener("touchstart", function(event) {
event.preventDefault();
var touch = event.targetTouches[0];
startPos = {
x : touch.screenX,
y : touch.screenY
};
}, false);

window.addEventListener("touchmove", function(event) {
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1)
return;
var touch = event.targetTouches[0];
endPos = {
x : touch.screenX - startPos.x,
y : touch.screenY - startPos.y
};
if(Math.pow(endPos.x,2) + Math.pow(endPos.y,2) < 1){
return;
}
// isScrolling为1时，表示纵向滑动，0为横向滑动
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;
if (isScrolling === 0) {
event.preventDefault(); // 阻止触摸事件的默认行为，即阻止滚屏
direction = endPos.x > 0 ? "RIGHT" : "LEFT";
} else {
direction = endPos.y > 0 ? "DOWN" : "UP";
}
}, false);

window.addEventListener("touchend", function(event) {
if (game.over()) {
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
return;
}
game.move(direction);
score.innerHTML = game.score;
direction = null;
}, false);<strong>
</strong></span>

style.css
<span style="font-family:Microsoft YaHei;">* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
margin: 0px auto;
}

header h1 {
font-size: 36px;
margin: 0px;
color:#f2b179;
}

header h2 {
font-size: 24px;
text-align:center;
margin: 0px;
color: #888;
font-style: italic;
}

header h6{
color: #888;
margin: 0px;
}

.wraper{
background-color:grey;
margin-top:10px;
margin-bottom:10px;
width:50%;
height:20px;
line-height:20px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

a#startBtn{
color:white;
text-align:center;
display:block;
}

.wraper:hover{
background-color:#f2b179;
}

#div2048{
width: 297px;
height: 297px;
margin-left:auto;
margin-right:auto;
background-color: #b8af9e;
}

#div2048 div.tile
{
margin: 5px 0px 0px 5px;
width: 68px;
height: 68px;
font-size: 24px;
line-height: 68px;
text-align: center;
float: left;
}

#div2048 div.tile0{
background: #ccc0b2;
}

#div2048 div.tile2
{
color: #7c736a;
background: #eee4da;
}

#div2048 div.tile4
{
color: #7c736a;
background: #ece0c8;
}

#div2048 div.tile8
{
color: #fff7eb;
background: #f2b179;
}

#div2048 div.tile16
{
color:#fff7eb;
background:#f59563;
}

#div2048 div.tile32
{
color:#fff7eb;
background:#f57c5f;
}

#div2048 div.tile64
{
color:#fff7eb;
background:#f65d3b;
}

#div2048 div.tile128
{
color:#fff7eb;
background:#edce71;
}

#div2048 div.tile256
{
color:#fff7eb;
background:#edcc61;
}

#div2048 div.tile512
{
color:#fff7eb;
background:#ecc850;
}

#div2048 div.tile1024
{
color:#fff7eb;
background:#edc53f;
}

#div2048 div.tile2048
{
color:#fff7eb;
background:#eec22e;
}

footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}<span style="font-weight: bold;">
</span></span>
以上便很轻松的完成了2048在tizen平台上的移植。

注意事项主要有：分辨率适配（css文件中尽可能采用相对布局，尽可能少的使用绝对大小。或者在JS中先获得屏幕的宽和高），事件监听（手机和电脑浏览器略有不同，例如电脑的click事件在手机上应为pop）

在模拟器上测试

首先点击红色框内的图标开启模拟器。



创建一个新的mobile。



创建成功后可以看到：



右击index.html文件，选择run as-> Tizen Web Application,稍作等待后可以在simulator中看到程序运行结果。



Tizen web app开发流程与web开发大致相同，我们很容易的就将一个web游戏移植到了tizen平台上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航