从贪吃蛇小游戏初步学习Tizen Web App

从贪吃蛇小游戏初步学习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：

1. 选择Mobile/Wearable，应用类型
2. 新建一个Security Profile，输入一个名字即可
3. 创建一份作者认证证书，输入必填项，并且需要一个三星的账户认证（毕竟三星的应用）

4. 创建一份设备认证证书，这里将你的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等