[知了堂学习笔记]_纯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;

时间: 2024-10-24 12:11:35

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

[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能进行基本操作了. 敌机对象的实现,并且初步完成了boos出现(30s自动出现).然后又引出了许多方法的处理,如英雄子弹击中敌机和boos,英雄与敌机相撞等等.并一一解决. 随后又设置了一些游戏的参数,如血量,关卡数,等级,积分,必杀,道具对象等等. 最后又完成了一些辅助功能,暂停游戏,继续游戏,退出

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3.点击暂停,弹出具有透明度的暂停界面 4.点击暂停界面的开始按钮,隐藏暂停界面,调用开始方法(点击登录跳转的方法): 5.点击暂停界面的退出游戏,只显示登录界面,隐藏其他界面: 6.游戏结束界面,该界面的跳转目前还不能通过游戏实现,可以先建设(根据上一讲的游戏界面图片制作). 7.点击游戏结束界面的开

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)

一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面的宽度和高度要一致): HTML代码: <!--main div是游戏界面的大DIV --> <div id="main" style="height: 643px;"> <!--玩家头像DIV--> <div id="

[知了堂学习笔记]_初始化顺序

在我们每次new一个对象的时候,对象都会被初始化,但是他们初始化的顺序又是怎样呢?现在我以存在继承与不存在继承的代码给大家演示. 一.对于没有继承的初始化的顺序(静态变量,静态块.构造函数.变量) package test; //没有继承情况下的代码 public class test5 { //静态变量 private static String st="静态变量"; //静态块 static{ System.out.println(st); System.out.println(&

[知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&amp;&amp;添加Tomcat到Eclipse

来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 左侧:选择的是Tomcat的版本,这里以Tomcat 7为例. 右边可以选择不同的安装版本,红框部分是windows的zip安装版本, 选择和自己jdk位数一样的位数,进行下载就行了. 安装Tomcat 那就很简单了解压就行了,解压后如下图: 解压后选择 bin目录下面的->startup.

[知了堂学习笔记]_集合接口list与集合接口set的区别

在Java中 除了 Map以外的集合的根接口都是Collection接口,而在Collection接口的子接口中,最重要的莫过于List和Set集合接口. 今天我们就来谈谈List集合接口与Set集合接口的差异性. 查看List集合接口的接口方法 查看Set集合接口的API 从两者的API中,以add和get为例来看, List中提供索引的方式来添加元素和获取元素,而Set并不提供.由此可见List集合可是达到精确的存储和获取,而Set只能一个一个的比较,显然效率和实用性是比不上List集合的

知了堂学习笔记-微信小程序框架

开发者文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html 一.文件结构 小程序包含一个描述整体程序的app和多个描述各自页面的page. 一个小程序主题部分由三个文件组成,必须放在项目的根目录, 如下: app.js                   必填               小程序逻辑 app.json                必填              小程序公共设置 app.wxss    

[知了堂学习笔记]_JSON数据操作第1讲(初识JSON)

一.认识JSON 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式..它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率. JSON语法 {}表示JSON对象 在{}中是1~n个键值对 键与值之间用:隔开,键值对用,隔开.如

【知了堂学习笔记】Eclipse,Myeclipse连接MySQL数据库和Oracle数据库

一.连接MySQL数据库 1.由于Eclipse,Myeclipse都没有连接MySQL数据的架包,我们需要自行下载MySQL连接架包 mysql-connector(官方链接:http://dev.mysql.com/downloads/connector/j/5.0.html),下载版本最好是最新版. 2.下载好后,复制到你的项目里任何位置,然后右键架包选择 Build path -> add to Build path,然后点击项目的Libraries里的Referenced Librar