HTML5 게임 개발-연발 + 모방 번개 게임 데모
- 黄舟원래의
- 2017-03-13 13:51:263568검색
이 게임은 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으로 문의하세요.