HTML5 게임 개발-연발 + 모방 번개 게임 데모-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 게임 개발-연발 + 모방 번개 게임 데모

黄舟

Mar 13, 2017 pm 01:51 PM

이 게임은 HTML5 캔버스를 사용하며, 게임을 실행하려면 브라우저가 HTML5를 지원해야 합니다.

이 글에서는 html5를 사용하여 슈팅 게임을 개발하는 방법을 자세히 설명합니다. Thunderbolt는 슈팅 게임 중 고전이라고 할 수 있습니다. .아래를 따라해 봅시다.

먼저 게임 스크린샷부터 보시죠

게임 개발에는 오픈 소스 엔진이 필요합니다: lufylegend.js

게임은 다음과 같은 여러 파일을 사용할 것으로 예상됩니다

index.html

js 폴더 ｜---메인 .js

　　　｜---Plain.js//Airplane
　　｜---Bullet.js//Bullet
　　｜---글로벌 .js//Common

images 폴더｜--pictures

제작과정에 대해 간략히 말씀드리겠습니다. 소스코드는 하단에 있습니다

먼저 index.html 파일을 생성하고

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹幕</title>
<!-- 
<meta name="viewport" content="width=480,initial-scale=0.5, minimum-scale=0.5, maximum-scale=1.0,user-scalable=no" />
 -->
<meta name="viewport" content="width=480,initial-scale=0.6" />
<script type="text/javascript" src="../legend/legend.js"></script> 
<script type="text/javascript" src="./js/Global.js"></script> 
<script type="text/javascript" src="./js/Bullet.js"></script> 
<script type="text/javascript" src="./js/Plain.js"></script> 
<script type="text/javascript" src="./js/Main.js"></script> 
</head>
<body>
<p id="mylegend">loading……</p>

</body>
</html>

Main.js를 엽니다

코드를 추가하고 먼저 모든 그림을 읽고 진행률 표시줄을 표시합니다

그리고 추가 사용될 수 있는 몇 가지 변수 들어가세요

/**
 * Main
 * */
//设定游戏速度，屏幕大小，回调函数
init(50,"mylegend",480,800,main);

/**层变量*/
//显示进度条所用层
var loadingLayer;
//游戏最底层
var backLayer;
//控制层
var ctrlLayer;

/**int变量*/
//读取图片位置
var loadIndex = 0;
//贞数
var frames = 0;
//BOOS START
var boosstart = false;
//GAME OVER
var gameover = false;
//GAME CLEAR 
var gameclear = false;
//得分
var point = 0;
/**对象变量*/
//玩家
var player;
//得分
var pointText;

/**数组变量*/
//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};
//子弹数组
var barrage = new Array();
//子弹速度数组
var barrageSpeed = [5,10];
//储存所有敌人飞机的数组
var enemys = new Array();

function main(){
	//准备读取图片
	imgData.push({name:"back",path:"./images/back.jpg"});
	imgData.push({name:"enemy",path:"./images/e.png"});
	imgData.push({name:"player",path:"./images/player.png"});
	imgData.push({name:"boss",path:"./images/boss.png"});
	imgData.push({name:"ctrl",path:"./images/ctrl.png"});
	imgData.push({name:"item1",path:"./images/1.png"});
	//实例化进度条层
	loadingLayer = new LSprite();
	loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
	addChild(loadingLayer);
	//开始读取图片
	loadImage();
}
function loadImage(){
	//图片全部读取完成，开始初始化游戏
	if(loadIndex >= imgData.length){
		removeChild(loadingLayer);
		legendLoadOver();
		gameInit();
		return;
	}
	//开始读取图片
	loader = new LLoader();
	loader.addEventListener(LEvent.COMPLETE,loadComplete);
	loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){
	//进度条显示
	loadingLayer.graphics.clear();
	loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
	loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");
	//储存图片数据
	imglist[imgData[loadIndex].name] = loader.content;
	//读取下一张图片
	loadIndex++;
	loadImage();
}

이제 사용된 모든 사진이 로드되었습니다. 먼저 배경을 추가하고 사진을 표시합니다

범례를 사용하는 것은 매우 간단합니다. 사진을 표시하는 라이브러리

function gameInit(event){
	//游戏底层实例化
	backLayer = new LSprite();
	addChild(backLayer);
	//添加游戏背景
	bitmapdata = new LBitmapData(imglist["back"]);
	bitmap = new LBitmap(bitmapdata);
	backLayer.addChild(bitmap);}

효과는 다음과 같습니다

촬영 게임은 총알이 하이라이트, 다양한 총알을 추가하는 방법이 게임의 핵심입니다

총알을 바꾸려면 해당 각도, 가속도, 기타 변수를 설정해야 합니다

이러한 변화를 구현하기 위해 Bullet 클래스를 생성해 보겠습니다

/**
 * 子弹类 
 * */
function Bullet(belong,x,y,angle,xspeed,yspeed,aspeed,speed){
	base(this,LSprite,[]);
	var self = this;
	//子弹所属
	self.belong = belong;
	//出现位置
	self.x = x;
	self.y = y;
	//角度
	self.angle = angle;
	//移动速度
	self.speed = speed;
	//xy轴速度
	self.xspeed = xspeed;
	self.yspeed = yspeed;
	//旋转角度加成
	self.aspeed = aspeed;
	//子弹图片
	var bitmapdata,bitmap;
	bitmapdata = new LBitmapData(imglist["item1"]);
	bitmap = new LBitmap(bitmapdata);
	self.bitmap = bitmap;
	//显示
	self.addChild(bitmap);
}

그리고 총알이 이동하는 동안 이러한 변수를 기반으로 다양한 변형이 구현됩니다

공통 클래스에 총알 배열을 추가해 다양한 총알을 구별

rreee

게임에서 가장 기본적인 총알은 물론 한 발씩 발사하는 것입니다

공통 클래스의 총알 발사

/**
 * 子弹类型数组
 * 【开始角度，增加角度，子弹速度，角度加速度，子弹总数，发动频率，枪口旋转】
 * */
Global.bulletList = new Array(
		{startAngle:0,angle:20,speed:5,aspeed:0,count:1,shootspeed:10,sspeed:0},//1发
);

여기서 궁극적으로 발사해야 하는 것은 항공기가 다르기 때문에 매개변수 항공기를 추가했습니다

이제 다음과 같이 항공기 클래스를 생성합니다

/**
 * 发射子弹
 * @param 飞机
 * */
Global.setBullet = function(plainObject){
	var i,j,obj,xspeed,yspeed,kaku;
	//获取子弹属性
	var bullet = Global.bulletList[0];
	//开始发射
	for(i=0;i<bullet.count;i++){
		//发射角度
		kaku = i*bullet.angle + bullet.startAngle;
		//子弹xy轴速度
		xspeed = bullet.speed*Math.sin(kaku * Math.PI / 180);
		yspeed = barrageSpeed[0]*Math.cos(kaku * Math.PI / 180);
		//子弹实例化
		obj = new Bullet(0,210,300,kaku,xspeed,yspeed,bullet.aspeed,bullet.speed);
		//显示
		backLayer.addChild(obj);
		barrage.push(obj);
	}
};

코드는 자세한 설명과 함께 추가되어 이해하기 어렵지 않습니다

Bullet 클래스를 다음과 같이 개선

/**
 * 飞机类
 * */
function Plain(name,belong,x,y,bullets){
	base(this,LSprite,[]);
	var self = this;
	//飞机名称
	self.name = name;
	//飞机位置
	self.x = x;
	self.y = y;
	//飞机所属
	self.belong = belong;
	//子弹数组
	self.bullets = bullets;
	//初始子弹
	self.bullet = self.bullets[Math.floor(Math.random()*self.bullets.length)];
	self.shootspeed = Global.bulletList[self.bullet].shootspeed;
	//枪口旋转角度
	self.sspeed = 0;
	//射击频率控制
	self.shootctrl = 0;
	//获取飞机属性
	self.list = Global.getPlainStatus(self);
	//飞机图片
	self.bitmap = self.list[0];
	//显示
	self.addChild(self.bitmap);
	//枪口位置
	self.shootx = self.list[1];
	self.shooty = self.list[2];
	//移动速度
	self.speed = self.list[3];
	//飞机hp
	self.hp = self.list[4];
	//移动方向
	self.move = [0,0];
	//发射子弹数
	self.shootcount = 0;
	//是否发射子弹
	self.canshoot = true;
	if(name=="player")self.canshoot = false;
}

/**
 * 循环
 * */
Plain.prototype.onframe = function (){
	var self = this;
	//移动
	self.x += self.move[0]*self.speed;
	self.y += self.move[1]*self.speed;
	
	switch (self.name){
		case "player":
			//自机移动位置限制
			if(self.x < 0)self.x = 0;
			else if(self.x + self.bitmap.getWidth() > LGlobal.width)self.x = LGlobal.width-self.bitmap.getWidth();
			if(self.y < 0)self.y = 0;
			else if(self.y + self.bitmap.getHeight() > LGlobal.height)self.y = LGlobal.height-self.bitmap.getHeight();
			break;
		case "boss":
			//敌机BOSS移动
			if(self.y < 0){
				self.y = 0;
				self.move[1] = 1;
			}else if(self.y + self.bitmap.getHeight() > LGlobal.height){
				self.y = LGlobal.height-self.bitmap.getHeight();
				self.move[1] = -1;
			}
			//碰撞检测
			self.hitTest();
			break;
		case "enemy":
		default:
			//碰撞检测
			self.hitTest();
	}
	//射击
	if(self.canshoot)self.shoot();
};

/**
 * 碰撞检测
 * */
Plain.prototype.hitTest = function (){
	var self = this;
	var disx,disy,sw,ew;
	sw = (self.bitmap.getWidth() + self.bitmap.getHeight())/4;
	ew = (player.bitmap.getWidth() + player.bitmap.getHeight())/4;
	disx = self.x+sw - (player.x + ew);
	disy = self.y+self.bitmap.getHeight()/2 - (player.y + player.bitmap.getHeight()/2);
	if(disx*disx + disy*disy < (sw+ew)*(sw+ew)){
		player.visible = false;
		gameover = true;
	}
};
/**
 * 射击
 * */
Plain.prototype.shoot = function (){
	var self = this;
	if(self.shootctrl++ < self.shootspeed)return;
	self.shootctrl = 0;
	if(self.name == "boss"){
		if(self.shootcount++ % 20 > 5)return;
	}else{
		if(self.shootcount++ % 10 > 5)return;
	}
	Global.setBullet(self);
	if(self.name == "boss"){
		if(self.shootcount % 20 < 5)return;
	}else{
		if(self.shootcount % 10 < 5)return;
	}
	if(self.bullets.length <= 1)return;
	self.bullet = self.bullets[Math.floor(Math.random()*self.bullets.length)];
	self.shootspeed = Global.bulletList[self.bullet].shootspeed;
};

총알 발사 기능이 다음과 같이 수정됩니다

/**
 * 子弹类 
 * */
function Bullet(belong,x,y,angle,xspeed,yspeed,aspeed,speed){
	base(this,LSprite,[]);
	var self = this;
	//子弹所属
	self.belong = belong;
	//出现位置
	self.x = x;
	self.y = y;
	//角度
	self.angle = angle;
	//移动速度
	self.speed = speed;
	//xy轴速度
	self.xspeed = xspeed;
	self.yspeed = yspeed;
	//旋转角度加成
	self.aspeed = aspeed;
	//子弹图片
	var bitmapdata,bitmap;
	bitmapdata = new LBitmapData(imglist["item1"]);
	bitmap = new LBitmap(bitmapdata);
	self.bitmap = bitmap;
	//显示
	self.addChild(bitmap);
}

/**
 * 循环
 * @param 子弹序号
 * */
Bullet.prototype.onframe = function (index){
	var self = this;

	//子弹移动
	self.x += self.xspeed;
	self.y += self.yspeed;
	
	//子弹角度变更
	if(self.aspeed != 0){
		self.angle += self.aspeed;
		//子弹角度变更后，重新计算xy轴速度
		self.xspeed = self.speed*Math.sin(self.angle * Math.PI / 180);
		self.yspeed = self.speed*Math.cos(self.angle * Math.PI / 180);
	}
	//子弹位置检测
	if(self.x < 0 || self.x > LGlobal.width || self.y < 0 || self.y > LGlobal.height){
		//从屏幕移除
		backLayer.removeChild(self);
		//从子弹数组移除
		barrage.splice(index,1);
	}else{
		self.hitTest(index);
	}
	
};
/**
 * 子弹碰撞检测
 * @param 子弹序号
 * */
Bullet.prototype.hitTest = function (index){
	var self = this;
	var disx,disy,sw,ew,obj,i;
	if(self.belong == player.belong){
		//自机子弹
		for(i=0;i메인 파일에 루프 추가
/**
 * 发射子弹
 * @param 飞机
 * */
Global.setBullet = function(plainObject){
	var i,j,obj,xspeed,yspeed,kaku;
	//获取子弹属性
	var bullet = Global.bulletList[plainObject.bullet];
	//设定枪口旋转
	plainObject.sspeed += bullet.sspeed;
	//开始发射
	for(i=0;i<bullet.count;i++){
		//发射角度
		kaku = i*bullet.angle + bullet.startAngle + plainObject.sspeed;
		//子弹xy轴速度
		xspeed = bullet.speed*Math.sin(kaku * Math.PI / 180);
		yspeed = barrageSpeed[0]*Math.cos(kaku * Math.PI / 180);
		//子弹实例化
		obj = new Bullet(plainObject.belong,plainObject.x+plainObject.shootx,plainObject.y+plainObject.
		shooty,kaku,xspeed,yspeed,bullet.aspeed,bullet.speed);
		//显示
		backLayer.addChild(obj);
		barrage.push(obj);
	}
};
이제 항공기만 추가하면 됩니다.
/**
 * 循环
 * */
function onframe(){
	
	var i;
	//循环子弹
	for(i=0;i<barrage.length;i++){
		barrage[i].onframe(i);
	}
	//循环敌机
	for(i=0;i<enemys.length;i++){
		enemys[i].onframe();
	}
}
효과 보기


총알의 해당 매개변수를 다음과 같이 수정합니다

 plain = new Plain("enemy",1,200,300,[0]);		
의 효과는 
 







lufylegend.js 엔진 패키지에는 이 데모가 포함되어 있습니다. lufylegend.js 엔진을 직접 다운로드하고 엔진 패키지의 소스 코드를 확인하세요
 위 내용은 HTML5 게임 개발-연발 + 번개같은 게임 데모 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.