从贪吃蛇小游戏初步学习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;
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){
var canvas = document.getElementById("gs");
...
var cOntext= context || canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var scoreCOntainer= document.getElementsByClassName("score");
var alert = document.getElementById("alert");
var game = game || new Game(width,height,context,scoreContainer,alert);
game.start();
...
});
到这里,大致介绍完了整个应用的结构,主要是由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等