js原生打飞机游戏
js原生打飞机游戏
分为js，css，img文件夹
img素材
飞机BOSS
打飞机
中飞机
小飞机
子弹
爆炸效果
玩家飞机
游戏截图（部分）
index入口文件
再
战
江
湖
空格发弹
ctrl暂停
enter继续
上下左右
R键大招
ESC退出
雷霆战机——再战江湖
开始游戏
选择关卡
简单模式
一般模式
高级模式
游戏帮助
游戏帮助
游戏操作
移动:可上下左右移动
攻击:a键攻击
大招:回车键
关卡设计
容易 简单 困难
怪物设定
怪物分为四种，怪物1、怪物2、怪物3、boss
怪物1：低分数，低血量，碰撞伤害低 直线移动 移动速度中
怪物2：比怪物1的分数高 血量高 伤害稍高 直线移动 移动速度很慢
怪物3：低血量，高分钟 伤害非常高，移动速度中，曲线移动
boss：高血量，高伤害，会发射子弹，会造成极高的碰撞伤害，不规则运动
宝物设定
击杀普通怪物随机掉落火力增强的道具，或则移动加速的道具
boss：击杀boss后直接升级，火力提升一级，移动速度提升一级，防御提升一级
流程设定
击杀怪物获取分数和经验，当经验到达一定的累积值，玩家升级，分数升级只提升火力
升级后，经验清零，下一级经验增加，玩家可以升级无限级
当击杀到一定分数后，boss出动，击杀boss后怪物重新出动，怪物等级，防御，伤害，移动速度增加一级
游戏设置
该功能暂未开放，敬请期待
//分数框
//结束排行榜
//重新开始
//突出游戏
//血量条
css样式文件
*{
margin: 0;
padding: 0;
}
body{
background: url("img/playbj.jpg") no-repeat;
background-size: 100% 100%;
}
#plane{
width: 700px;
height: 900px;
border:2px solid red;
margin: 30px auto;
background-image: url("img/bj.jpg");
position:relative;
overflow: hidden;
}
#title{
font-size: 28px;
color: whitesmoke;
text-align: center;
position: absolute;
top: 30px;
left: 200px;
border: 1px dotted #fff;
border-radius: 15px;
padding: 10px;
}
#start{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top:0;
cursor: pointer;
}
#start:hover{
background: white;
}
#checkpoint{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
left: 0;
bottom: -120px;
right: 0;
top:0;
cursor: pointer;
}
#checkpoint:hover{
background: white;
}
#help{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
left: 0;
bottom: -240px;
right: 0;
top:0;
cursor: pointer;
}
#help:hover{
background: white;
}
#setting{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
left: 0;
bottom: -360px;
right: 0;
top:0;
cursor: pointer;
}
#setting:hover{
background: white;
}
#score{
height: 25px;
width: 80px;
position: absolute;
border: 1px dashed red;
display: none;
color: white;
text-align: center;
}
#title2{
font-size: 48px;
font-family: 华文行楷;
color: red;
position: absolute;
top: 260px;
left: 200px;
}
#helpplane{
font-size: 25px;
color: red;
position: absolute;
top: 330px;
right: 330px;
}
#gameover{
height: 300px;
width: 300px;
font-size: 38px;
border: 1px dashed red;
border-radius: 20px;
text-align: center;
background-color: lightslategrey;
opacity: 0.6;
position: absolute;
top: 260px;
left: 200px;
display: none;
color: red;
}
#reset{
height: 50px;
width: 150px;
font-size: 26px;
line-height: 50px;
border: 1px dashed red;
border-radius: 20px;
text-align: center;
background-color: lightslategrey;
opacity: 0.6;
position: absolute;
top:570px;
left:200px;
display: none;
color: red;
cursor:pointer;
}
#exit{
height: 50px;
width: 150px;
font-size: 26px;
line-height: 50px;
border: 1px dashed red;
border-radius: 20px;
text-align: center;
background-color: lightslategrey;
opacity: 0.6;
position: absolute;
top:570px;
left:355px;
display: none;
color: red;
cursor:pointer;
}
#bold{
height: 7px;
width: 700px;
border: 1px solid green;
position: absolute;
bottom: 0;
background: green;
}
#easy{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
display: none;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top:0;
cursor: pointer;
}
#easy:hover{
background: white;
}
#middle{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
display: none;
left: 0;
bottom: -120px;
right: 0;
top:0;
cursor: pointer;
}
#middle:hover{
background: white;
}
#difficult{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
display: none;
left: 0;
bottom: -240px;
right: 0;
top:0;
cursor: pointer;
}
#middle:hover{
background: white;
}
#help1{
width: 600px;
height: 800px;
line-height: 50px;
border: 1px dashed pink;
position: absolute;
color: red;
text-align: center;
margin: auto;
display: none;
left: 0;
bottom: 0;
right: 0;
top:80px;
}
#setting1{
width: 500px;
height: 200px;
line-height: 200px;
border: 1px dashed pink;
position: absolute;
color: red;
font-size: 32px;
text-align: center;
margin: auto;
display: none;
left: 0;
bottom: 0;
right: 0;
top:150px;
}
js文件
- 定义全局变量
//定义全局变量获取ID
var Plane = document.getElementById("plane");
//定义敌军小飞机数组
var enemyArr = [];
//定义中飞机数组
var middleArr = [];
//定义打飞机数组
var bigArr = [];
//定义玩家飞机子弹数组
var bulletArr = [];
//定义敌军飞机子弹
var smallArr = [];
//统计分数
var count = 0;
//定义宝物数组
var money = [];
//设置暂停继续
var stop = false;
//设置boss状态，只出一架boss
var bos = true;
//设置B为boss全局变量
var B;
//设置创建小飞机
var play1;
//定义定时器变量
var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,r,s,t,u,v,w,x;
var gameOver = document.getElementById("gameover");
var reset = document.getElementById("reset");
var exit = document.getElementById("exit");
var start = document.getElementById("start");
var check = document.getElementById("checkpoint");
var help = document.getElementById("help");
var set = document.getElementById("setting");
var title = document.getElementById("title");
var score = document.getElementById("score");
//选择关卡
var a1 = document.getElementById("easy");
var b1 = document.getElementById("middle");
var c1 = document.getElementById("difficult");
function checkpoint() {
start.style.display = "none";
check.style.display = "none";
help.style.display = "none";
set.style.display = "none";
title.style.display = "block";
a1.style.display = "block";
b1.style.display = "block";
c1.style.display = "block";
}
//简单模式
function easyPlane() {
a1.style.display = "none";
b1.style.display = "none";
c1.style.display = "none";
title.style.display = "none";
var planeTime = 1200;
startPlane(planeTime);
}
//一般模式
function middlePlane() {
a1.style.display = "none";
b1.style.display = "none";
c1.style.display = "none";
title.style.display = "none";
var planeTime = 800;
startPlane(planeTime);
}
//困难模式
function difficultPlane() {
a1.style.display = "none";
b1.style.display = "none";
c1.style.display = "none";
title.style.display = "none";
var planeTime = 500;
startPlane(planeTime);
}
//游戏帮助
function helpGame() {
var h1 = document.getElementById("help1");
start.style.display = "none";
check.style.display = "none";
help.style.display = "none";
set.style.display = "none";
title.style.display = "block";
h1.style.display = "block"
}
//游戏设置
function settingGame() {
var s1 = document.getElementById("setting1");
start.style.display = "none";
check.style.display = "none";
help.style.display = "none";
set.style.display = "none";
title.style.display = "block";
s1.style.display = "block"
}
//游戏开始
function startGame() {
startPlane(1000);
}
3.启动游戏函数
//启动游戏函数
function startPlane(plane) {
//点击看是游戏进入游戏界面
start.style.display = "none";
check.style.display = "none";
help.style.display = "none";
set.style.display = "none";
title.style.display = "none";
score.style.display ="block";
//玩家飞机
var play1 = new playPlane("img/plane/warcraft.png",300,800,10);
a = setInterval(function () {
createPlane(play1);
},plane);
k = setInterval(function () {
planeBullet(play1)
},50);
e = setInterval(countscore,20);
f = setInterval(function () {
collisonPlane(play1);
},50);
g = setInterval(function () {
gameCount(play1);
},50);
h = setInterval(function () {
playerMove(play1);
},50);
i =setInterval(function () {
changeBold(play1);
},50);
u =setInterval(function () {
change(play1);
},50);
keyPlane(play1);
b = setInterval(smallMove,50)
l = setInterval(middleMove,80);
s = setInterval(bigMove,200);
c = setInterval(bulletMove,50);
j = setInterval(smallBullet,40);
d = setInterval(bulletPlaneSmall,20);
m = setInterval(bulletPlaneMiddle,20);
t = setInterval(bulletPlanBig,30);
r = setInterval(function () {
bossTopMove(B);
},30);
}
4.创建飞机
/**
* 创造飞机
*/
function createPlane(play) {
if(play.state){
play.distime--;
if(play.distime<0){
return;
}
}
if(!(play.distime<=0)){
if (!stop) {
if (count<30){
var plane1 = new plane("img/plane/enemy.png", parseInt(Math.random() * ((700 - 0) - 34)), 0, 8);
enemyArr.push(plane1);
n =setInterval(function () {
smallShoot(plane1);
},700);
}else if (count<200){
var plane2 = new plane("img/plane/middle.png", parseInt(Math.random() * ((700 - 0) - 92)), 0, 8);
middleArr.push(plane2);
plane2.boold=6;
o =setInterval(function () {
middleShoot(plane2);
},700);
}else if(count<400){
var plane3 = new plane("img/plane/bigplan.png", parseInt(Math.random() * ((700 - 0) - 153)), 0, 8);
plane3.imgNode.style.width = 180+"px";
plane3.imgNode.style.height = 160+"px";
bigArr.push(plane3);
plane3.booldbig=9;
v =setInterval(function () {
bigShoot(plane3);
},1500);
} else{
createBoss(play);
w = setInterval(function () {
bossShoot(B);
},300);
x = setInterval(function () {
bulletPlanBoss(B);
},50);
bos = false;
}
}
}
}
5.更换战机
function change(plane) {
if (count>=400){
plane.imgNode.src = "img/plane/player.png";
}
}
6.boss
/**
* BOSS出场
*/
function createBoss(plane) {
if (count>=400&&plane.state==false&&bos){
B = new BOSS("img/plane/big.png",260, 0, 5);
B.bosboold = 500;
}
}
/**
* BOSS移动
*/
function bossTopMove(boss) {
if (B != null&&!stop&&!boss.state){
if (B.bosmove == 1){
B.xdown = 1;
B.leftMove();
B.downMove();
if (parseInt(B.imgNode.style.left)<=0){
B.bosmove=2;
}
}
if(B.bosmove == 2){
B.rightMove();
if (parseInt(B.imgNode.style.left)>=500){
B.bosmove = 3;
}
}
if (B.bosmove == 3){
B.xright = 1;
B.topMove();
B.leftMove();
if(parseInt(B.imgNode.style.top)==0){
B.bosmove = 4;
}
}
if(B.bosmove == 4){
B.downMove();
if(parseInt(B.imgNode.style.top)>=400){
B.bosmove = 5;
}
}
if(B.bosmove == 5){
B.topMove();
if(parseInt(B.imgNode.style.top)==0){
B.bosmove = 1;
}
}
if (boss.state) {
if (boss.outtime == 0) {
count+=100;
} else {
boss.outtime--;
}
}
}
}
7.结算游戏
function gameCount(plane) {
if (plane.state){
gameOver.style.display = "block";
reset.style.display = "block";
exit.style.display = "block";
document.getElementById("reset").innerHTML = "再玩一次";
document.getElementById("exit").innerHTML = "退出游戏";
if((plane.distime%4)==0&&plane.state){
plane.imgNode.style.display = "none";
}else{
plane.imgNode.style.display = "block";
}
if (count<20){
document.getElementById("gameover").innerHTML = "游戏结束
您的分数为：
"+count +"
"+"获得菜鸟称号"
reset.onclick = function () {
restGame(plane);
count = 0;
}
exit.onclick = function () {
menuBack();
}
}else if (count<40){
document.getElementById("gameover").innerHTML = "游戏结束
您的分数为：
"+count+"
" +"获得大师称号"
reset.onclick = function () {
restGame(plane);
count = 0;
}
exit.onclick = function () {
menuBack();
}
}else if (count<80){
document.getElementById("gameover").innerHTML = "游戏结束
您的分数为：
"+count+"
" +"获得大神称号"
reset.onclick = function () {
restGame(plane);
count = 0;
}
exit.onclick = function () {
menuBack();
}
}else {
document.getElementById("gameover").innerHTML = "游戏结束
您的分数为：
"+count +"
"+"获得天帝称号"
reset.onclick = function () {
restGame(plane);
count = 0;
}
exit.onclick = function () {
menuBack();
}
}
}
}
8.玩家子弹移动
/**
* 玩家子弹移动方法
*/
function bulletMove() {
for(var i=0;i=0&&bulletArr[i].state==false){
if (!stop) {
bulletArr[i].move();
}
}else{
Plane.removeChild(bulletArr[i].imgNode);
bulletArr.splice(i,1);
}
}
}
9.敌方飞机子弹移动
/**
* 敌方飞机子弹移动
*/
function smallBullet() {
for(var i=0;i9.敌方飞机移动
/**
* 敌方小飞机移动
*/
function smallMove() {
for (var i = 0; i < enemyArr.length; i++) {
//防止飞机过多，超i出游戏区域飞机消失
if (parseInt(enemyArr[i].imgNode.style.top) >= 900) {
Plane.removeChild(enemyArr[i].imgNode);
enemyArr.splice(i, 1);
} else if (enemyArr[i].state) {
if (enemyArr[i].outtime == 0) {
Plane.removeChild(enemyArr[i].imgNode);
enemyArr.splice(i, 1);
count+=2;
} else {
enemyArr[i].outtime--;
}
} else {
if (!stop){
enemyArr[i].move();
}
}
}
}
/**
* 敌方中飞机移动
*/
function middleMove() {
for (var i = 0; i < middleArr.length; i++) {
//防止飞机过多，超i出游戏区域飞机消失
if (parseInt(middleArr[i].imgNode.style.top) >= 900) {
Plane.removeChild(middleArr[i].imgNode);
middleArr.splice(i, 1);
} else if (middleArr[i].state) {
if (middleArr[i].outtime == 0) {
Plane.removeChild(middleArr[i].imgNode);
middleArr.splice(i, 1);
count+=5;
} else {
middleArr[i].outtime--;
}
} else {
if (!stop){
middleArr[i].move();
}
}
}
}
/**
* 敌方大飞机移动
*/
function bigMove() {
for (var i = 0; i < bigArr.length; i++) {
//防止飞机过多，超i出游戏区域飞机消失
if (parseInt(bigArr[i].imgNode.style.top) >= 900) {
Plane.removeChild(bigArr[i].imgNode);
bigArr.splice(i, 1);
} else if (bigArr[i].state) {
if (bigArr[i].outtime == 0) {
Plane.removeChild(bigArr[i].imgNode);
bigArr.splice(i, 1);
count+=8;
} else {
bigArr[i].outtime--;
}
} else {
if (!stop){
bigArr[i].move();
}
}
}
}
10.玩家飞机移动
/**
* 玩家飞机移动方法
*/
function playerMove(play) {
if (!stop) {
if (!play.state) {
if (play.top) {
play.topMove();
}
if (play.left) {
play.leftMove();
}
if (play.right) {
play.rightMove();
}
if (play.bottom) {
play.bottomMove();
}
}
}
}
/**
* 按键事件
* @param play
*/
function keyPlane(play) {
document.onkeydown = function (event) {
//console.log(event)
if(event.key=="ArrowUp"){
play.top=true;
}
if (event.key=="ArrowDown"){
play.bottom=true;
}
if(event.key=="ArrowLeft"){
play.left=true;
}
if(event.key=="ArrowRight"){
play.right=true;
}
if(event.code=="Space"){
play.shoot();
}
if (event.key=="Control"){
stop = true;
}
if (event.key=="Enter"){
stop = false;
}
if (event.key=="r"){
cleanPlane();
}
if (event.key=="Escape"){
exitPlane(play);
}
}
document.onkeyup = function (event) {
if(event.key=="ArrowUp"){
play.top=false;
}else if (event.key=="ArrowDown"){
play.bottom=false;
}else if(event.key=="ArrowLeft"){
play.left=false;
}else if(event.key=="ArrowRight"){
play.right=false;
}
}
}
11.返回菜单
/**
* 返回菜单函数
*/
function menuBack() {
location.reload();
}
/**
* 分数计数器
*/
function countscore() {
document.getElementById("score").innerHTML = count
}
/**
* 血条
*/
function changeBold(plane) {
var b = document.getElementById("bold");
b.style.left = (700-plane.boold)+"px";
}
/**
* 结束游戏
*/
function exitPlane(plane) {
plane.state = true;
}
12.子弹碰撞飞机
/**
*子弹碰撞小飞机
*/
function bulletPlaneSmall() {
for(var i=0;i=(plane_left-6)&&bullet_left<=(plane_left+23)){
if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+30)){
// Plane.removeChild(bulletArr[i].imgNode);
// bulletArr.splice(i,1);
// Plane.removeChild(enemyArr[j].imgNode);
// enemyArr.splice(j,1);
enemyArr[j].imgNode.src = "img/plane/boom.png";
enemyArr[j].state = true;
bulletArr[i].state = true;
}
}
}
}
}
}
/**
* 子弹碰撞中飞机
*/
function bulletPlaneMiddle() {
for(var i=0;i=(plane_left-6)&&bullet_left<=(plane_left+80)){
if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+92)){
bulletArr[i].state = true;
middleArr[j].boold--;
if (middleArr[j].boold==0){
middleArr[j].imgNode.src = "img/plane/boom.png";
middleArr[j].state = true;
}
}
}
}
}
}
}
/**
* 子弹碰撞大飞机
*/
function bulletPlanBig() {
for(var i=0;i=(plane_left-6)&&bullet_left<=(plane_left+170)){
if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+153)){
bulletArr[i].state = true;
bigArr[j].booldbig--;
if (bigArr[j].booldbig<=0){
bigArr[j].imgNode.src = "img/plane/boom.png";
bigArr[j].state = true;
}
}
}
}
}
}
}
/**
* 子弹碰撞boss
*/
function bulletPlanBoss(plane) {
for(var i=0;i=(plane_left-6)&&bullet_left<=(plane_left+200)){
if (bullet_top>=(plane_top-22)&&bullet_top<=(plane_top+121)){
bulletArr[i].state = true;
plane.bosboold-=10;
if (plane.bosboold==0){
plane.imgNode.src = "img/plane/boss.png";
plane.state = true;
console.log(111)
}
console.log(222)
}
}
}
}
}
13.玩家飞机死亡
/**
* 子弹击中玩家飞机
*/
function planeBullet(plane) {
for(var i=0;i=(plane_left-6)&&bullet_left<=(plane_left+60)){
if (bullet_top>=(plane_top-14)&&bullet_top<=(plane_top+36)){
smallArr[i].imgNode.src = "img/plane/boom.png";
smallArr[i].state = true;
plane.boold-=100;
if (plane.boold<0){
plane.state = true;
}
}
}
}
}
}
/**
* 飞机和飞机碰撞
*/
function collisonPlane(plane) {
for(var i=0;i=(plane_left-60)&&bullet_left<=(plane_left+34)){
if (bullet_top>=(plane_top-36)&&bullet_top<=(plane_top+24)){
plane.imgNode.src = "img/plane/boom2.png";
enemyArr[i].state=true;
plane.boold-=100;
if (plane.boold<0){
plane.state = true;
}
}
}
}
}
}
14.大招
/**
* 大招：清除所有飞机
*/
function cleanPlane() {
for (var i = 0; i < enemyArr.length; i++) {
enemyArr[i].imgNode.src = "img/plane/boom3.png";
enemyArr[i].state = true;
}
for (var k = 0; k < smallArr.length; k++) {
smallArr[k].imgNode.src = "img/plane/boom3.png";
smallArr[k].state = true;
}
for (var j = 0; j < middleArr.length; j++) {
middleArr[j].imgNode.src = "img/plane/boom3.png";
middleArr[j].state = true;
}
for (var l = 0; l < bigArr.length; l++) {
bigArr[l].imgNode.src = "img/plane/boom3.png";
bigArr[l].state = true;
}
}
15.重新开始
/**
* 重新开始
*/
function restGame(plane) {
cleanSet(plane);
cleanPlane();
gameOver.style.display = "none";
reset.style.display = "none";
exit.style.display = "none";
start.style.display = "block";
title.style.display = "block";
score.style.display ="none";
Plane.removeChild(plane.imgNode);
}
function cleanSet(plane) {
clearInterval(a);
clearInterval(b);
clearInterval(c);
clearInterval(d);
clearInterval(e);
clearInterval(f);
clearInterval(g);
clearInterval(h);
clearInterval(i);
clearInterval(j);
clearInterval(k);
clearInterval(l);
clearInterval(m);
clearInterval(n);
clearInterval(o);
clearInterval(p);
clearInterval(r);
clearInterval(s);
clearInterval(t);
clearInterval(u);
clearInterval(v);
clearInterval(w);
clearInterval(x);
plane.boold = 700;
plane.state =false;
}
16.玩家飞机模板
/**
* 玩家飞机属性
* imgSrc图片路径
* imgNode图片节点
* x，y初识位置
* 方法
* 初始化
*/
function playPlane(imgSrc,x,y,speed) {
this.imgNode = document.createElement("img");
this.imgSrc = imgSrc;
this.x = x;
this.y = y;
this.speed = speed;
this.state = false;
this.outtime = 10;
this.distime = 2;
this.boold = 700;
this.init = function () {
this.imgNode.src= this.imgSrc;
this.imgNode.style.position = "absolute";
this.imgNode.style.left = this.x + "px";
this.imgNode.style.top = this.y + "px";
Plane.appendChild(this.imgNode);
}
this.leftMove = function () {
//判断飞机是否在游戏区域
if(parseInt(this.imgNode.style.left)>0){
this.imgNode.style.left = parseInt(this.imgNode.style.left)-this.speed+"px"
}
}
this.rightMove = function () {
if(parseInt(this.imgNode.style.left)<=634) {
this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed + "px"
}
}
this.topMove = function () {
if(parseInt(this.imgNode.style.top)>0){
this.imgNode.style.top = parseInt(this.imgNode.style.top)-this.speed+"px"
}
}
this.bottomMove = function () {
if(parseInt(this.imgNode.style.top)<=820){
this.imgNode.style.top = parseInt(this.imgNode.style.top)+this.speed+"px"
}
}
//创建子弹
this.shoot = function () {
//获取飞机当前位置
var x = parseInt(this.imgNode.style.left);
var y = parseInt(this.imgNode.style.top);
// console.log(this.imgNode.style.left)
// console.log(this.imgNode.style.top)
if (!stop){
if(!this.state) {
if(count<50){
var bullet = new Bullet("img/plane/bullet.png", x + 28, y - 18, 8);
bulletArr.push(bullet);
}else if (count < 200) {
var bullet1 = new Bullet("img/plane/bullet.png", x + 40, y - 18, 10);
var bullet2= new Bullet("img/plane/bullet.png", x + 15, y - 18, 10);
bulletArr.push(bullet1);
bulletArr.push(bullet2);
}else if(count <400){
var bullet3 = new Bullet("img/plane/bullet.png", x + 10, y - 18, 12);
var bullet4= new Bullet("img/plane/bullet.png", x + 30, y - 18, 12);
var bullet5 = new Bullet("img/plane/bullet.png", x + 50, y - 18, 12);
bulletArr.push(bullet3);
bulletArr.push(bullet4);
bulletArr.push(bullet5);
}else {
var bullet6 = new Bullet("img/plane/bullet.png", x + 30, y - 18, 12);
var bullet7= new Bullet("img/plane/bullet.png", x + 50, y - 18, 12);
var bullet8 = new Bullet("img/plane/bullet.png", x + 70, y - 18, 12);
var bullet9 = new Bullet("img/plane/bullet.png", x + 90, y - 18, 12);
bulletArr.push(bullet6);
bulletArr.push(bullet7);
bulletArr.push(bullet8);
bulletArr.push(bullet9);
}
}
}
}
this.init();
}
17.作战飞机模板
/**
* 作战飞机属性
* imgSrc图片路径
* imgNode图片节点
* x，y初识位置
* 方法
* 初始化
*/
function plane(imgSrc,x,y,speed) {
this.imgNode = document.createElement("img");
this.imgSrc = imgSrc;
this.x = x;
this.y = y;
this.speed = speed;
this.outtime = 10;
this.state = false;
this.boold = 0;
this.booldbig = 0;
this.init = function () {
this.imgNode.src= this.imgSrc;
this.imgNode.style.position = "absolute";
this.imgNode.style.left = this.x+"px"
this.imgNode.style.top = this.y+"px"
Plane.appendChild(this.imgNode);
}
this.move= function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px"
}
this.init();
}
18.boss模板
/**
* Boss飞机属性
*/
function BOSS(imgSrc,x,y,speed) {
this.imgNode = document.createElement("img");
this.imgSrc = imgSrc;
this.x = x;
this.y = y;
this.speed = speed;
this.bosmove = 1;
this.outtime = 10;
this.state = false;
this.bosboold = 0;
this.xdown = 0.5;
this.xright =0.5;
this.init = function () {
this.imgNode.src= this.imgSrc;
this.imgNode.style.position = "absolute";
this.imgNode.style.left = this.x+"px"
this.imgNode.style.top = this.y+"px"
Plane.appendChild(this.imgNode);
}
this.topMove= function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px"
}
this.downMove= function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed * this.xdown+ "px"
}
this.leftMove = function () {
this.imgNode.style.left = parseInt(this.imgNode.style.left) - this.speed + "px"
}
this.rightMove = function () {
this.imgNode.style.left = parseInt(this.imgNode.style.left) + this.speed *this.xright + "px" ;
}
this.init();
}
19.敌方大中小boss飞机子弹创建
/**
* 敌方飞机子弹创建
*/
function smallShoot(plane) {
//创建敌方飞机子弹
//获取飞机当前位置
var x = parseInt(plane.imgNode.style.left);
var y = parseInt(plane.imgNode.style.top);
if (!stop){
if(!plane.state) {
var small1 = new Bullet("img/plane/bullet1.png", x+10, y + 30, 8);
smallArr.push(small1);
}
}
}
function middleShoot(plane) {
//获取飞机当前位置
var x = parseInt(plane.imgNode.style.left);
var y = parseInt(plane.imgNode.style.top);
if (!stop){
if(!plane.state) {
var small1 = new Bullet("img/plane/small.png", x+10, y + 90, 7);
var small2 = new Bullet("img/plane/small.png", x+30, y + 90, 7);
smallArr.push(small1);
smallArr.push(small2);
}
}
}
function bigShoot(plane) {
//获取飞机当前位置
var x = parseInt(plane.imgNode.style.left);
var y = parseInt(plane.imgNode.style.top);
if (!stop){
if(!plane.state) {
var small1 = new Bullet("img/plane/smallshoot.png", x+50, y + 90, 6);
var small2 = new Bullet("img/plane/smallshoot.png", x+70, y + 90, 6);
smallArr.push(small1);
smallArr.push(small2);
}
}
}
function bossShoot(plane) {
//获取飞机当前位置
var x = parseInt(plane.imgNode.style.left);
var y = parseInt(plane.imgNode.style.top);
if (!stop){
if(!plane.state) {
var small1 = new Bullet("img/plane/smallshoot.png", x+60, y + 90, 6);
var small2 = new Bullet("img/plane/smallshoot.png", x+80, y + 90, 6);
smallArr.push(small1);
smallArr.push(small2);
}
}
}
20.子弹模板
/**
*
* @param 子弹模板属性
* @param imgsrc路径
* @param x,y子弹位置
* @param speed飞行速度
* @constructor
*/
function Bullet(imgSrc,x,y,speed) {
this.imgNode = document.createElement("img");
this.imgSrc = imgSrc;
this.x = x;
this.y = y;
this.speed = speed;
this.state = false;
this.move = function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) - this.speed + "px";
}
this.moveSmall = function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
}
this.moveMiddle = function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
}
this.moveBig = function () {
this.imgNode.style.top = parseInt(this.imgNode.style.top) + this.speed + "px";
}
this.init = function () {
this.imgNode.src= this.imgSrc;
this.imgNode.style.position = "absolute";
this.imgNode.style.left = this.x+"px"
this.imgNode.style.top = this.y+"px"
Plane.appendChild(this.imgNode);
}
this.init();
}