從貪吃蛇小遊戲初步學習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等