喜欢玩游戏，更喜欢研究游戏，用自己的双手编写自己的游戏世界
用HTML5来开发一款android本地化App游戏-宝石碰碰
本次来说一说如何利用lufylegend.js引擎制作一款HTML5游戏后，将其转换为android本地化的App应用，转换过程其实很简单，下面一步步来做说明。首先来开发一个类似于对对碰的游戏，不过此游戏玩法为在下原创，如有雷同，纯属巧合，游戏界面如下。游戏操作：上下左右划动屏幕，来操作宝石向不同的方向移动。游戏规则：当有三个一样的宝石相邻则消除，被消除过一次的宝石会变成半透明，当所有宝石都被消除一次后，则进入下一关。游戏测试连接：制作开始一，准备首先，需要下载lufylegend.js引擎，下面是我在博客的lufylegend-1.7.0发布帖二，游戏开发引擎lufylegend1.7.0中扩展了LLoadManage静态类，可以读取图片，js文件以及文本文件，本次游戏开发就来体验一下这个新功能，首先看下面数组代码清单1var loadData = [
{path:"../jquery.js",type:"js"},
{path:"./js/share.js",type:"js"},
{path:"./js/Social.js",type:"js"},
{path:"./js/GameRanking.js",type:"js"},
{path:"./js/GameLogo.js",type:"js"},
{path:"./js/GameClear.js",type:"js"},
{path:"./js/Gem.js",type:"js"},
{path:"./js/Stage.js",type:"js"},
{path:"./js/Clock.js",type:"js"},
{path:"./js/Point.js",type:"js"},
{path:"./js/GetPoint.js",type:"js"},
{path:"./js/Bullet.js",type:"js"},
{path:"./js/Event.js",type:"js"},
{path:"./js/function.js",type:"js"},
{path:"./js/GameBody.js",type:"js"},
{name:"num.+",path:"./images/plus.png"},
{name:"num.0",path:"./images/0.png"},
{name:"num.1",path:"./images/1.png"},
{name:"num.2",path:"./images/2.png"},
{name:"num.3",path:"./images/3.png"},
{name:"num.4",path:"./images/4.png"},
{name:"num.5",path:"./images/5.png"},
{name:"num.6",path:"./images/6.png"},
{name:"num.7",path:"./images/7.png"},
{name:"num.8",path:"./images/8.png"},
{name:"num.9",path:"./images/9.png"},
{name:"back",path:"./images/back.png"},
{name:"line",path:"./images/line.png"},
{name:"clear",path:"./images/clear.png"},
{name:"gem01",path:"./images/gem01.png"},
{name:"gem02",path:"./images/gem02.png"},
{name:"gem03",path:"./images/gem03.png"},
{name:"gem04",path:"./images/gem04.png"},
{name:"gem05",path:"./images/gem05.png"},
{name:"gem06",path:"./images/gem06.png"},
{name:"gem07",path:"./images/gem07.png"},
{name:"gem08",path:"./images/gem08.png"},
{name:"gem09",path:"./images/gem09.png"},
{name:"ico_sina",path:"./images/ico_sina.gif"},
{name:"ico_qq",path:"./images/ico_qq.gif"},
{name:"ico_facebook",path:"./images/ico_facebook.png"},
{name:"ico_twitter",path:"./images/ico_twitter.png"}
];将需要的js文件和图片文件都加到数组内，如果需要加载文件为js文件时，需要指定type为js，如果加载的文件为图片，则type可以不设定。读取过程与之前用法完全一样代码清单2function main(){
loadingLayer = new LoadingSample3();
addChild(loadingLayer);
LLoadManage.load(
function(progress){
loadingLayer.setProgress(progress);
function(result){
LGlobal.setDebug(true);
datalist =
removeChild(loadingLayer);
loadingLayer =
gameInit();
}下面来向游戏中添加8行8列64块宝石，具体做法如下代码清单3function addGem(){
stage.setStage(stage.num + 1);
gemLayer.removeAllChild();
list = [];
//添加宝石
for(i=0;i&8;i++){
list.push([]);
for(var j=0;j&8;j++){
num = (Math.random()*9 &&& 0)+1;
g = new Gem(num);
g.x = j*60;
g.y = i*60+120;
gemLayer.addChild(g);
list[i].push(g);
//检验可消除宝石
clearList = checkClear();
if(clearList.length & 0){
for(i=0;i&clearList.i++){
g = clearList[i];
num = (Math.random()*9 &&& 0)+1;
g.change(num);
}while(clearList.length & 0);
}上面代码中的Gem对象是一个宝石类，完整代码如下代码清单4function Gem(num){
var self =
base(self,LSprite,[]);
self.num =
self.bitmap = new LBitmap(new LBitmapData(datalist["gem0"+num]));
self.bitmap.x=self.bitmap.y=10;
self.addChild(self.bitmap);
Gem.prototype.change = function (num){
var self =
self.num =
self.bitmap.bitmapData = new LBitmapData(datalist["gem0"+num]);
}Gem类继承自LSprite，内部包含一个LBitmap对象来显示宝石图片。代码清单3中调用了checkClear函数，来检验是否有可消除宝石，检测方法为先进行横向检索，然后进行纵向检索。代码清单5clearList = [];
//横向检索
for(i=0;i&8;i++){
checkList = [list[i][0]];
for(j=1;j&8;j++){
if(checkList[checkList.length - 1].num == list[i][j].num){
checkList.push(list[i][j]);
clearList = addClearList(clearList,checkList);
checkList = [list[i][j]];
clearList = addClearList(clearList,checkList);
//纵向检索
for(i=0;i&8;i++){
checkList = [list[0][i]];
for(j=1;j&8;j++){
if(checkList[checkList.length - 1].num == list[j][i].num){
checkList.push(list[j][i]);
clearList = addClearList(clearList,checkList);
checkList = [list[j][i]];
clearList = addClearList(clearList,checkList);
}addClearList函数作用是将可消除宝石压入clearList数组，做法如下代码清单6function addClearList(clearList,checkList){
if(checkList.length &= 3){
clearList = clearList.concat(checkList)
return clearL
}游戏操作需要划动屏幕，但是在lufylegend.js引擎中，是没有划动屏幕的事件的，所以我通过下面MOUSE_DOWN,MOUSE_UP获取点击时和点击后的位置，来模拟一下划动事件。代码清单7 backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown);
backLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp);再来看看具体做法，先是onDown函数。代码清单8function onDown(e){
if(mouse_down_obj.isMouseDown)
continuous = 0;
mouse_down_obj.x = e.offsetX;
mouse_down_obj.y = e.offsetY;
mouse_down_obj.time = new Date().getTime();
mouse_down_obj.cx = e.offsetX/60 &&& 0;
mouse_down_obj.cy = (e.offsetY - 120)/60 &&& 0;
mouse_down_obj.isMouseDown =
list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.drawRect(1,"black",[0, 0, 60, 60],true,"#000000");
}通过e.offsetX和e.offsetY来获取点击位置，通过getTime()来获取点击时刻的时间。在来看看onUp函数。代码清单9function onUp(e){
list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.clear();
if(new Date().getTime() - mouse_down_obj.time & 500){
mouse_down_obj.isMouseDown =
var mx = e.offsetX - mouse_down_obj.x;
var my = e.offsetY - mouse_down_obj.y;
if(Math.abs(mx) & Math.abs(my)){
if(mx & 50){
move("right");
}else if(mx & -50){
move("left");
if(my & 50){
move("down");
}else if(my & -50){
move("up");
mouse_down_obj.isMouseDown =
}函数中通过同样的方法得到点击结束时的位置和时间，然后与点击时刻做比较，最后计算划动的方向，然后根据划动的方向来调用move函数，让宝石移动。move函数如下：代码清单10function move(dir){
direction =
var m = moveGem(dir,8);
var mx = m[0],my = m[1];
for(var i=0;i&8;i++){
if(mx == 0){
obj = list[i][mouse_down_obj.cx];
obj = list[mouse_down_obj.cy][i];
if(i & 7){
fun = function(){
hiddenObj.visible =
checkClear();
LTweenLite.to(obj,0.3,
x:obj.x+mx,
y:obj.y+my,
onComplete:fun,
ease:Strong.easeOut
}下面以向右移动为例来说明一下move函数的处理过程，如下先将最左边的一个宝石H移到最左边，然后再利用LTweenLite缓动类将整个一行8个宝石，向右缓动一个单位。向左的话正好相反，向上向下也是同样的原理。每次缓动结束，要调用一次checkClear函数，来判断一下是否有可消除的宝石，如果有则开始消除宝石，如何来消除宝石呢？我依然以向右划动来举例说明，看下面图片，假设D1,D2,D3可消除，E4,F4,G4可消除那么首先将D1,D2,D3移到左边边界外，E4,F4,G4也移到边界外，表示被消除，之后对每一行的宝石进行位置判定，如每行的第一个宝石的x坐标应该是60，第二个为120，以此类推。如果他们不在自己的相应位置上，那么将其向左移动到规定位置就可以了，写成代码的话，如下。代码清单11function moveList(){
var gem,time,maxTime,mx,my,
maxTime = 0;
switch(direction){
case "left":
for(i=0;i&8;i++){
for(j=0;j&8;j++){
gem = list[i][j];
mx = 60*j;
if(gem.x & mx){
time = 0.3*((gem.x-mx) / 60 &&& 0);
if(maxTime & time)maxTime =
if(gem.x & 420){
fun = function(gem){
if(gem.x &= 420)gem.visible =
LTweenLite.to(gem,time,
onUpdate:fun,
onComplete:fun,
ease:Strong.easeOut
case "right":
for(i=0;i&8;i++){
for(j=0;j&8;j++){
gem = list[i][j];
mx = 60*j;
if(gem.x & mx){
time = 0.3*((mx-gem.x) / 60 &&& 0);
if(maxTime & time)maxTime =
if(gem.x & 0){
fun = function(gem){
if(gem.x &= 0)gem.visible =
LTweenLite.to(gem,time,
onUpdate:fun,
onComplete:fun,
ease:Strong.easeOut
case "up":
for(i=0;i&8;i++){
for(j=0;j&8;j++){
gem = list[j][i];
my = 120+60*j;
if(gem.y & my){
time = 0.3*((gem.y-my) / 60 &&& 0);
if(maxTime & time)maxTime =
if(gem.y & 560){
fun = function(gem){
if(gem.y &= 560)gem.visible =
LTweenLite.to(gem,time,
onUpdate:fun,
onComplete:fun,
ease:Strong.easeOut
case "down":
for(i=0;i&8;i++){
for(j=0;j&8;j++){
gem = list[j][i];
my = 120+60*j;
if(gem.y & my){
time = 0.3*((my-gem.y) / 60 &&& 0);
if(maxTime & time)maxTime =
if(gem.y & 120){
fun = function(gem){
if(gem.y &= 120)gem.visible =
LTweenLite.to(gem,time,
onUpdate:fun,
onComplete:fun,
ease:Strong.easeOut
LTweenLite.to({},maxTime*1.5,
onComplete:checkStageClear,
ease:Strong.easeOut
}当然，游戏是有时间限制的，看下面的Clock类。代码清单12function Clock(){
var self =
base(self,LSprite,[]);
self.timer = 0;
self.addTimer = 0.05;
self.graphics.drawArc(5,"#333333",[0,0,70,0,2*Math.PI]);
Clock.prototype.onframe = function (){
var self =
self.timer += self.addT
self.graphics.clear();
self.graphics.drawArc(10,"#333333",[0,0,70,0,2*Math.PI]);
self.graphics.drawArc(5,"#ffffff",[0,0,70,-Math.PI*0.5,Math.PI*self.timer/180-Math.PI*0.5]);
}首先将Clock加载到游戏中，然后再利用ENTER_FRAME时间轴事件，来不断调用Clock的onframe不断的绘制圆弧，当timer的数值大于等于360的时候代表画完了整个圆弧，那么游戏结束。以上，游戏的主要原理都介绍完了，下面看看如何来把游戏转化为本地App三，发布本地化App首先，用Eclipse新建一个Android Project注：如何搭建Android环境，我就不说了，网上教程多得是，随便百度一下吧。然后，填写项目名称，并选择相应的sdk版本，这里我选了2.2接着是填写相应数据，这个随自己心情就可以了。接着，重点来了，在工程下的assets文件夹下，简历一个www文件夹(名字自己随意)，然后把刚才开发好的游戏复制到这个文件夹下，当然，lufylegend引擎也必须复制过来。接着修改res/layout/main.xml文件，添加webView，如下&?xml version="1.0" encoding="utf-8"?&
&LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" &
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
&/LinearLayout&最后，修改Main.java文件，利用webView来显示html网页,如下public class Main extends Activity {
/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webview = (WebView )findViewById(R.id.webView1);
webview.getSettings().setJavaScriptEnabled(true);
webview.setVerticalScrollbarOverlay(true);
webview.loadUrl("file:///android_asset/www/index.html");
}好了，运行程序吧。画面如下：最后，想要发布游戏为.apk文件的话，build一下就好了。发布后的apk文件。结束了，简单吧？四，源码最后给出本次游戏的源代码注：只含游戏源码，lufylegend.js引擎请自己到官网下载
哪些App适合用HTML5开发？
浅谈App原生开发、混合开发及HTML5开发的优劣
HTML5 APP开发与原生态APP比较有什么好处？
安卓APP加载HTML5页面解决方案总结
用HTML5来开发一款Android本地游戏---宝石碰碰
宝石碰碰：HTML5开发Android本地化App游戏案例
Android开发&HTML5+App
从Android原生角度看移动html5开发APP（一）原生与html对比
如何利用HTML5快速开发一款小游戏
没有更多推荐了，简单的安卓app订餐系统怎么做？求大神指导_百度知道
简单的安卓app订餐系统怎么做？求大神指导
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
知道合伙人
采纳数：34
获赞数：274
如果是一个人的话算了吧，一个团队的话你还得申请和支付宝或者微信支付合作，建议你还是去做一个网站，实现订餐功能比较好
遗忘苍天知道合伙人
采纳数：14
获赞数：41
有没有后台，单机版的还是全功能的
单机版的吧
只是一个简单的毕业设计，不是特别复杂的那种
单机版的就是假的，死页面
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。想要编写一个手机app需要掌握那些软件和知识_百度知道
想要编写一个手机app需要掌握那些软件和知识
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
敬文均知道合伙人
来自知道合伙人认证行家
知道合伙人
互联网类行家
采纳数：218
获赞数：3757
本人能熟练操作各种电脑office等基本软件，并掌握其各种电脑操作。懂英语，爱生活。
问题有些笼统，一个完整的app有简单有复杂，不同的app应用功能的差异也导致不同的技术实现或者算法模型。大体来说，一个app从设计到最终实现需要懂得以下几个必要方面：1、前期需求规划与信息、交互设计——你需要制定出一个完整的需求文档，功能文档，流程图，时序图。2、交互设计、UI设计——设计出基本且完善的原型图和app基础的交互设计效果，之后再根据这些设计出完整的UI界面并学会切图，一些需要做自适应的素材图片需要做点9patch。 这里还需要你懂得px，pt和dp之间的换算，屏幕密度的换算和相互之间的系数，以便你的app能完美适应不同分辨率设备。其中交互设计需要你懂得很多人机操作的技巧经验，掌握Axure等交互工具的使用，UI设计需要你掌握Photoshop和Illustrator等操作。3、使用ADT之类的开发环境进行app开发，你最基本的也得掌握java语言，熟悉android环境和机制，这里面涉及面广，请根据项目自行学习相关知识。4、如果不是单机版的app，需要用到服务器，那你还得掌握WebService相关知识和开发语言，常用的有ASP.Net，PHP，JSP等。5、熟悉并能开发数据库。6、某些功能需要做算法，这还需要一定得专业知识，尤其是数学基础。7、熟悉API接口开发，这里包括你自行开发API的能力以及调用第三方API的经验。8、熟悉TCP/IP，socket等网络协议和相关知识。9、熟练掌握App发布的流程，真机调试技巧，证书，打包，上架。App开发其实不一定适合一个人搞，太费劲，除非是一个单机版的小应用，或者利用现成的api开发简单的第三方应用，否则还是让一个团队来完成各自擅长的领域。
shenmea9知道合伙人
采纳数：320
获赞数：1004
java，安卓
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。2K223 条评论分享收藏感谢收起赞同 1.4K128 条评论分享收藏感谢收起豆丁微信公众号
君，已阅读到文档的结尾了呢~~
App Inventor 安卓手机应用开发简易入门 第一章
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
App Inventor 安卓手机应用开发简易入门 第一章
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口