從貪喫蛇小遊戲初步學習Tizen Web App開發
本文會通過一個貪喫蛇小遊戲來初步介紹下Tizen Web App的開發，用開發Web的方式來開發Tizen App應用。
項目代碼：https://github.com/yyfer/GluttonousSnake
開發環境
在開始寫貪喫蛇之前，我們要準備好需要的開發環境，如下：
- Tizen IDE，這裏下載，Tizen項目的開發環境
- Tizen Z3手機，用於測試（也可以用IDE自帶的Emulator、Simulator做測試）
- Chrome瀏覽器，用於測試（在編寫代碼的時候，直接用瀏覽器測試）
過程
Tizen Web App，顧名思義，是用開發Web的方式開發App應用。首先我們新建一個Web Project，我們選擇Template、MOBILE-2.4-Basic，這裏根據手機系統版本選擇：
完成之後，獲得一個項目結構：
從結構中可以看出，完全是一個web項目的結構：
- css，樣式文件，用於裝飾頁面
- images，圖片集
- js，javascript文件，存儲應用邏輯
- index.html，頁面文件
開發完成之後的項目結構：
對於頁面文件以及樣式，這裏就不多做介紹了，我們主要介紹下Javascript應用邏輯，從上圖可以看出，根據不同功能將整個應用邏輯分爲不同的模塊：
- canvas.js，繪製圖像模塊
- data.js，數據計算模塊
- game.js，遊戲模塊
- main.js，主程序入口
- require.js，模塊加載器，這裏可以瞭解詳情
canvas.js提供繪畫功能，這裏paint方法就是將game所持有的狀態繪製出來。
define("canvas",[],function(){
var paint =function(game){
...
}
return {
paint : paint
};
});data.js提供了數據計算，生成一條蛇、一個目標點，判斷是否發生碰撞，改變蛇的狀態。
define("data",[],function(){
...
return {
genSnake : genSnake,
genTarget : genTarget,
isCrash : isCrash,
isEat : isEat,
changeSnake : changeSnake
};
});game.js定義了一個遊戲類，引用了canvas、data模塊。
define("game",["canvas","data"],function(canvas,data){
var Game = function(width,height,context,scoreContainer,alert){
this.width = width;
this.height = height;
this.context = context;
this.scoreContainer = scoreContainer;
this.alert = alert;
this.bgColor = "#BFEFFF";
this.skColor = "#008B00";
this.tgColor = "#CD0000";
this.snake = [];
this.target = {};
this.rectR = 10;
this.initS = 5;
this.score = 0;
this.runSpeed = 100;
this.fps = 17;
this.isRunning = 1;
//setInterval
this.paintTask = null;
this.runTask = null;
}
...
return Game;
}); main.js是整個應用的入口
require.config({
paths:{
canvas:"canvas",
game:"game",
data:"data"
}
});
var id = "gs";
require(["game"],function(Game){
//get canvas object
var canvas = document.getElementById("gs");
//initsize
...
//canvas
var context = context || canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var scoreContainer = document.getElementsByClassName("score");
var alert = document.getElementById("alert");
//game start
var game = game || new Game(width,height,context,scoreContainer,alert);
game.start();
//events
...
});到這裏，大致介紹完了整個應用的結構，主要是由javascript完成的，這也是Web App開發的主要方式。
安裝Tizen App
一般在開發web app應用的時候，首先是會通過瀏覽器去測試應用的基本邏輯，待項目開發基本完成之後再安裝的到相應的手機上。對於Tizen App的安裝，可以藉助Tizen IDE來進行。（不用瀏覽器直接用手機測試也OK，但是沒瀏覽器方便，不過瀏覽器也會沒考慮到手機的一些具體狀況）。
在應用打包部署之前，首先需要創建一份屬於你個人以及設備的簽名文件（爲了應用的安全性），IDE->Register Certificate：
- 選擇Mobile/Wearable，應用類型
- 新建一個Security Profile，輸入一個名字即可
- 創建一份作者認證證書，輸入必填項，並且需要一個三星的賬戶認證（畢竟三星的應用）
創建一份設備認證證書，這裏將你的Tizen手機連上電腦，即可查找到你的手機（需要打開手機的開發者選項）
簽名認證完成之後，就可以打包你的Tizen Web項目，項目右鍵->Build Package，這時候項目根目錄出現一個項目同名的.wgt文件（和Android下的.apk文件類似），你可以把該文件copy至創建過設備認證證書的手機上，安裝即可；也可以通過項目右鍵->run as->Tizen Web Application，這時候即會打包項目部署到連接的手機上並打開應用。
其他
Tizen項目開發過程可能會遇到一些問題，可以通過以下方式查找解決辦法：
- Tizen官方社區，https://developer.tizen.org/community/tip-tech
- 谷歌，https://www.google.com
- StackOverflow等