[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

整体展示:

[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等。并且我们在实现这些功能的时候需要计时器去调用这些方法。setInterval(fun,ms)

在调用setInterval()会返回一个类似id的字段,该字段在clearInterval(id)可以指定相应的计时器并清除

一、开始游戏

/**
* 面板441*632
* 飞机 66*80
*/
/**
* 开始游戏
*/
function startGame() {
var welcome = document.getElementById("welcome"); myPlane = new createPlane("img/own.png", 190, 550, 5, 5);
welcome.style.visibility = "hidden"; //将进入欢迎界面隐藏
// ctrlMove();
/*
* 启动定时器
*/
ctrlmove = setInterval(ctrlMove,20);
ctrlshot = setInterval(ctrlShot,200);
bulletfly = setInterval(bulletFly,20);
createenemy = setInterval(enemy,200);
enemymove = setInterval(enemyMove,20);
hitplane = setInterval(hitPlane,30);
exist = setInterval(isexist,20);
}

二、控制英雄飞机移动

/*
* 键盘监听,用于判断英雄的动作 wasd移动方向,j射击,k必杀
* 放在开始游戏方法中
*/
document.body.onkeydown = function(code){
if(code.keyCode == 65){
leftbtn = true;
}
if(code.keyCode == 68){
rightbtn = true;
}
if(code.keyCode == 87){
topbtn = true;
}
if(code.keyCode == 83){
bottombtn = true;
}
if(code.keyCode == 74){
shot = true;
}
if(code.keyCode == 75){
shotboom = true;
}
}
document.body.onkeyup=function(code){
if(code.keyCode==65){
leftbtn=false;
}
if(code.keyCode == 68){
rightbtn = false;
}
if(code.keyCode == 87){
topbtn = false;
}
if(code.keyCode == 83){
bottombtn = false;
}
if(code.keyCode == 74){
shot = false;
}
if(code.keyCode == 75){
shotboom = false;
}
}
/**
* 控制英雄移动的函数
*/
function ctrlMove(){
if(leftbtn==true){
myPlane.leftMove()
}
if(rightbtn==true){
myPlane.rightMove()
}
if(topbtn==true){
myPlane.topMove()
}
if(bottombtn==true){
myPlane.botoomMove()
}
//获取玩家参数
getInfo();
}

三、子弹击中对象

/**
* 子弹击中对象
*/
function hitPlane(){
/*
* 英雄子弹打中敌机
*/
for(i=0;i<bulletList.length;i++){ //遍历英雄子弹集合
for(j=0;j<enemyList.length;j++){ //遍历敌军集合
//获取子弹坐标和敌军坐标
var btop = parseInt(bulletList[i].bulletNode.style.top);
var bleft = parseInt(bulletList[i].bulletNode.style.left);
var etop = parseInt(enemyList[j].enemyNode.style.top);
var eleft = parseInt(enemyList[j].enemyNode.style.left);
if(!enemyList[j].isdead){
if(bleft>=eleft-5&&bleft<eleft+34&&btop>etop&&btop<etop+34){
bulletList[i].ishit=true; //击中把子弹状态改为true
if(--enemyList[j].blood<=0) //判断敌军是否死亡
enemyList[j].isdead=true;
}
}
}
}
/*
* boos子弹打中英雄
*/
var top = parseInt(myPlane.planeNode.style.top);
var left = parseInt(myPlane.planeNode.style.left);
for(i=0;i<boosBullet.length;i++){
var btop = parseInt(boosBullet[i].bulletNode.style.top);
var bleft = parseInt(boosBullet[i].bulletNode.style.left);
if(myPlane.blood>=0){
if(btop+55>=top&&btop<top+80&&bleft>=left-22&&bleft<left+40){
boosBullet[i].ishit=true;
myPlane.blood--;
}
}
} /**
*子弹打中BOOS
*/
for(i=0;i<bulletList.length;i++){
var btop = parseInt(bulletList[i].bulletNode.style.top);
var bleft = parseInt(bulletList[i].bulletNode.style.left);
for(j=0;j<boosList.length;j++){
var top=parseInt(boosList[j].enemyNode.style.top);
var left=parseInt(boosList[j].enemyNode.style.left);
if(!boosList[j].isdead){
if(bleft-5>=left&&bleft<left+90&&btop>=top&&btop<top+80){
console.log(boosList[j].blood)
bulletList[i].ishit=true;
if(--boosList[j].blood<=0)
boosList[j].isdead=true;
}
}
}
}
}

四、对象间碰撞

/**
* 对象相撞
*/
function strike(){
var mleft = parseInt(myPlane.planeNode.style.left);
var mtop = parseInt(myPlane.planeNode.style.top);
if(myPlane.blood>0){
for(i=0;i<enemyList.length;i++){ //遍历敌机
if(!enemyList[i].isdead){ //敌机是否死亡
var eleft = parseInt(enemyList[i].enemyNode.style.left);
var etop = parseInt(enemyList[i].enemyNode.style.top);
if(eleft>=mleft&&eleft<mleft+68&&etop>=mtop&&etop<mtop+80){ //碰撞判断
enemyList[i].isdead = true; //敌机一碰撞到英雄飞机立即死亡
enemyList[i].enemyNode.src ="img/enemybz.png"; //切换图片,制作爆炸特效
myPlane.blood--; //英雄血量减少
}
}
}
}
/*
* 得到道具
*/
if(myPlane.blood>0){ //判断英雄是否死亡
for(i=0;i<toolList.length;i++){ //遍历道具数组
if(!toolList[i].getme){
var tleft = parseInt(toolList[i].toolNode.style.left);
var ttop = parseInt(toolList[i].toolNode.style.top);
if(tleft>=mleft-15&&tleft<mleft+65&&ttop>=mtop&&ttop<mtop+80){
toolList[i].getme=true;
if(toolList[i].tooltype%2==1){ //tooltype单数为加必杀,双数为加血
if(myPlane.boom<5)
myPlane.boom++;
}else{
myPlane.blood++;
}
}
}
}
}
}

五、判断对象是否死亡

/*
* 判断对象是否存在
*/
function isexist(){
/*
* 判断敌机是否死亡
*/
for(i=0;i<enemyList.length;i++){
if(enemyList[i].isdead){ //敌机死亡
enemyList[i].enemyNode.src ="img/enemybz.png"; //将图片换成爆炸图片
if(enemyList[i].deadtime>=0){ //移除时间,也就是飞机死亡到移除的时间,实现爆炸的特效
enemyList[i].deadtime--;
}else{
score+=myPlane.level;
killNum++;
mainobj.removeChild(enemyList[i].enemyNode); //先移除节点
enemyList.splice(i,1); //再取消绑定
}
}
}
/*
* 判断英雄是否死亡
*/
if(myPlane.blood<=0){
mainobj.removeChild(myPlane.planeNode);
gameOver();
}
/*
* 判断boos是否死亡
*/
for(i=0;i<boosList.length;i++){
if(boosList[i].isdead){
if(boosList[i].deadtime<=0){
mainobj.removeChild(boosList[i].enemyNode)
boosList.splice(i,1);
score+=100*myPlane.level;
pass++;
nextGame();
}else{
boosList[i].deadtime--;
boosList[i].enemyNode.src="img/dfjbz.png";
}
}
}
/*
* 判断道具是否存在
*/ for(i=0;i<toolList.length;i++){
if(toolList[i].getme){
mainobj.removeChild(toolList[i].toolNode);
toolList.splice(i,1);
}
}
}

===============================================================================================================================

第二讲补充:

我在创建对象时候(除英雄飞机对象),都将其放进Arrar中,这是为了绑定该对象,为了方面找到这个对象。方便操作。

以上为今天的内容,如需了解更加深入的知识,请大家进入知了堂社区:http://www.zhiliaotang.com/portal.php;

上一篇:element input-number源码


下一篇:ASP.NET获取路径的方法