지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5를 사용하여 안드로이드 현지화 앱 게임 개발-GemPengpeng

HTML5를 사용하여 안드로이드 현지화 앱 게임 개발-GemPengpeng

黄舟
풀어 주다： 2017-03-01 16:05:09
원래의
1958명이 탐색했습니다.

이번에는 lufylegend.js 엔진을 사용하여 HTML5 게임을 만든 다음 이를 Android 현지화 앱 애플리케이션으로 변환하는 방법에 대해 설명하겠습니다. 변환 과정은 실제로 매우 간단합니다. 단계별로 설명합니다.

우선 게임과 유사한 게임을 개발해 보겠습니다. 하지만 이 게임의 게임 플레이는 어떤 유사점도 있는 것은 아닙니다. 게임 인터페이스는 과 같습니다.


게임 조작: 화면을 위, 아래, 왼쪽, 오른쪽으로 스와이프하여 보석을 다양한 방향으로 이동하세요.

게임 규칙: 세 개의 동일한 보석이 서로 인접해 있으면 한 번 제거된 보석은 모두 투명해집니다. , 다음 단계로 들어갑니다.

게임 테스트 연결 :

http://lufylegend.com/demo/GemGem

제작 시작

1. 준비

먼저 lufylegend.js 엔진을 다운로드해야 합니다. 다음은 제가 블로그에 게시한 lufylegend-1.7.0입니다. 🎜>

http://blog.csdn.net/lufy_legend/article/details/8719768

2. 게임 개발

LLoadManage 정적이 확장되었습니다. 엔진 lufylegend1.7.0 클래스에서는 이미지, js 파일 및 텍스트 파일을 읽을 수 있습니다. 이번 게임 개발에서 이 새로운 기능을 먼저 경험해 보겠습니다. 먼저 다음 배열

코드 목록 1

var 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 파일인 경우 파일 유형을 js로 지정해야 합니다. 로드할 이미지가 이미지이므로 유형을 생략할 수 있습니다.


읽는 과정은 이전과 완전히 동일합니다

코드 목록 2

function main(){
	loadingLayer = new LoadingSample3();
	addChild(loadingLayer);	
	LLoadManage.load(
		loadData,
		function(progress){
			loadingLayer.setProgress(progress);
		},
		function(result){
			LGlobal.setDebug(true);
			datalist = result;
			removeChild(loadingLayer);
			loadingLayer = null;
			gameInit();
		}
	);
}
로그인 후 복사

게임에 8행 8열 64개의 보석을 추가해 보겠습니다. 구체적인 방법은 다음과 같습니다

코드 목록 3

function 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);
		}
	}
	//检验可消除宝石
	do{
		clearList = checkClear();
		if(clearList.length > 0){
			for(i=0;i<clearList.length;i++){
				g = clearList[i];
				num = (Math.random()*9 >>> 0)+1;
				g.change(num);
			}
		}
	}while(clearList.length > 0);
}
로그인 후 복사

위의 Gem 개체. code는 gem 클래스이고 전체 코드는 다음과 같습니다.

코드 목록 4

function Gem(num){
	var self = this;
	base(self,LSprite,[]);
	self.num = 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 = this;
	self.num = num;
	self.bitmap.bitmapData = new LBitmapData(datalist["gem0"+num]);
}
로그인 후 복사

Gem 클래스는 LSprite에서 상속되며 gem 그림을 표시하기 위해 내부적으로 LBitmap 객체를 포함합니다. .

제거할 수 있는 gem이 있는지 확인하기 위해 코드 목록 3에서 checkClear 함수가 호출됩니다. 탐지 방법은 먼저 수평 검색을 수행한 다음 수직 검색을 수행하는 것입니다. <… 🎜>

코드리스트 6

clearList = [];
	//横向检索
	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]);
			}else{
				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]);
			}else{
				clearList = addClearList(clearList,checkList);
				checkList = [list[j][i]];
			}
		}
		clearList = addClearList(clearList,checkList);
	}
로그인 후 복사

게임 조작은 화면을 스와이프해야 하는데 lufylegend.js 엔진에는 화면을 스와이프하는 이벤트가 없어서 얻어옵니다. 다음과 같이 MOUSE_DOWN, MOUSE_UP을 통해 클릭 시와 이후의 위치를 ​​스와이프 이벤트로 시뮬레이션하는데 사용됩니다.

코드 목록 7

function addClearList(clearList,checkList){
	if(checkList.length >= 3){
		clearList = clearList.concat(checkList)
	}
	return clearList;
}
로그인 후 복사

구체적인 메소드, 먼저 onDown 함수를 살펴보겠습니다.

코드 목록 8

	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown);
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp);
로그인 후 복사
e.offsetX 및 e.offsetY를 통해 클릭 위치를 가져오고, getTime()을 통해 클릭 순간의 시간을 가져옵니다.


onUp 기능을 살펴보겠습니다.

코드 목록 9

function onDown(e){
	if(mouse_down_obj.isMouseDown)return;
	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 = true;
	list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.drawRect(1,"black",[0, 0, 60, 60],true,"#000000");
}
로그인 후 복사

함수는 동일한 방법을 사용하여 클릭이 끝나는 위치와 시간을 구한 후 클릭 시간과 비교하여 최종적으로 계산합니다. 스와이프 방향을 지정한 다음 스트로크 방향에 따라 이동 함수를 호출하여 보석을 움직이게 합니다. 이동 기능은 다음과 같습니다.

Code List 10

function 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 = false;
		return;
	}
	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");
			return;
		}else if(mx < -50){
			move("left");
			return;
		}
	}else{
		if(my > 50){
			move("down");	
			return;
		}else if(my < -50){
			move("up");
			return;
		}
	}
	mouse_down_obj.isMouseDown = false;
}
로그인 후 복사

다음은 오른쪽으로 이동하는 것을 다음과 같이 사용합니다. 이동 기능을 설명하는 예는 다음과 같습니다.



먼저 가장 왼쪽의 보석 H를 가장 왼쪽으로 이동한 다음 LTweenLite 완화 클래스는 8개 보석의 전체 행을 이동하여 한 단위를 오른쪽으로 완화합니다. 왼쪽으로 가면 그 반대이고, 올라가고 내려갈 때도 같은 원리가 적용됩니다.

이징이 끝날 때마다 checkClear 함수를 호출하여 제거할 수 있는 보석이 있는지 확인해야 합니다. 보석을 제거하는 방법은 무엇인가요? <… 🎜>

那么首先将D1,D2,D3移到左边边界外，E4,F4,G4也移到边界外，表示被消除，之后对每一行的宝石进行位置判定，如每行的第一个宝石的x坐标应该是60，第二个为120，以此类推。如果他们不在自己的相应位置上，那么将其向左移动到规定位置就可以了，写成代码的话，如下。

代码清单11

function moveList(){
	var gem,time,maxTime,mx,my,fun;
	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 = time;
						fun = null;
						if(gem.x > 420){
							fun = function(gem){
								if(gem.x <= 420)gem.visible = true;
							}
						}
						LTweenLite.to(gem,time,
						{ 
							x:mx,
							onUpdate:fun,
							onComplete:fun,
							ease:Strong.easeOut
						});
					}
				}
			}
			break;
		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 = time;
						fun = null;
						if(gem.x < 0){
							fun = function(gem){
								if(gem.x >= 0)gem.visible = true;
							}
						}
						LTweenLite.to(gem,time,
						{ 
							x:mx,
							onUpdate:fun,
							onComplete:fun,
							ease:Strong.easeOut
						});
					}
				}
			}
			break;
		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 = time;
						fun = null;
						if(gem.y > 560){
							fun = function(gem){
								if(gem.y <= 560)gem.visible = true;
							}
						}
						LTweenLite.to(gem,time,
						{ 
							y:my,
							onUpdate:fun,
							onComplete:fun,
							ease:Strong.easeOut
						});
					}
				}
			}
			break;
		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 = time;
						fun = null;
						if(gem.y < 120){
							fun = function(gem){
								if(gem.y >= 120)gem.visible = true;
							}
						}
						LTweenLite.to(gem,time,
						{ 
							y:my,
							onUpdate:fun,
							onComplete:fun,
							ease:Strong.easeOut
						});
					}
				}
			}
			break;
	}
	LTweenLite.to({},maxTime*1.5,
	{ 
		onComplete:checkStageClear,
		ease:Strong.easeOut
	});
}
로그인 후 복사


当然，游戏是有时间限制的，看下面的Clock类。

代码清单12

function Clock(){
	var self = this;
	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 = this;
	self.timer += self.addTimer;
	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" >
    <WebView
        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. */
    @Override
    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文件。

结束了，简单吧？

四，源码

最后给出本次游戏的源代码

http://lufylegend.com/lufylegend_download/GemGem.rar

注：只含游戏源码，lufylegend.js引擎请自己到官网下载  

 以上就是用HTML5来开发一款android本地化App游戏-宝石碰碰的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！


관련 라벨：
HTML5，App游戏，宝石碰碰
원천：php.cn
이전 기사：간단한 물리 게임을 만드는 데 1시간이 소요됩니다(로프 원리). 다음 기사：[html5 게임개발] 스도쿠 게임 - 완성 알고리즘 - 오픈소스 강의
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2052
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2209
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1864
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1750
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1772
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿