[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲(创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机,小飞机死亡)
一、创建敌方飞机
1、思考创建思路:
创建敌方飞机思路与创建玩家飞机思路一样:
(1)思考敌方飞机具备什么属性:
敌方飞机的图片、坐标、飞行速度、状态(是否被击中) 设置小飞机被击中时消失时间、飞机可以移动
2、创建敌方飞机对象,在这里我创建两种飞机,根据玩家等级不同出现不同的飞机(小飞机和中飞机)
3、在创建飞机对象的方法中定义敌方飞机的移动方法(这里设置的敌方飞机移动方向是从上到下)。
4、将创建的飞机对象以节点形式添加到游戏界面
- /*敌方小飞机对象*/
- function createsmellplance(smellplanesrc, x, y, blood, speed) {
- this.smellplanesrc = smellplanesrc; //敌方飞机图片的路径
- this.x = x; //敌方飞机的X轴
- this.y = y; //敌方飞机的Y轴
- this.blood = blood;
- this.speed = speed; //敌方飞机飞行 的速度
- //创建图片对象
- this.semllplaneNode = document.createElement("img");
- this.isdead = false; //敌方飞机的状态 为false的时候 飞机没有被击中
- this.deadtime = 10; //控制小飞机被击中产生的爆炸效果消失时间
- /*敌方飞机移动*/
- this.remove = function() {
- this.semllplaneNode.style.top = parseInt(this.semllplaneNode.style.top) + this.speed + "px";
- }
- //敌方小飞机对象加入到节点
- this.create = function() {
- this.semllplaneNode.src = this.smellplanesrc;
- this.semllplaneNode.style.position = "absolute";
- this.semllplaneNode.style.left = this.x + "px";
- this.semllplaneNode.style.top = this.y + "px";
- //向游戏界面加入敌方飞机节点
- mainobj.appendChild(this.semllplaneNode);
- }
- //敌方飞机节点初始化
- this.create();
- }
- //敌方中飞机对象
- function createzhongplance(zhongplanesrc, x, y, blood, speed) {
- this.zhongpplanesrc = zhongplanesrc; //当前的飞机图片为传入的飞机图片
- this.x = x;
- this.y = y;
- this.blood = blood;
- this.speed = speed;
- this.zhongplanenode = document.createElement("img"); //创建一个图片节点
- this.isdead = false; //敌方中飞机的状态
- this.deadtime = 10;
- this.remove = function() { //敌方中飞机移动
- this.zhongplanenode.style.top = parseInt(this.zhongplanenode.style.top) + this.speed + "px";
- }
- this.create = function() {
- this.zhongplanenode.src = this.zhongpplanesrc; //当前图片节点的路径为当前的图片路径(传入的图片路径)
- this.zhongplanenode.style.position = "absolute";
- this.zhongplanenode.style.left = this.x + "px";
- this.zhongplanenode.style.top = this.y + "px";
- mainobj.appendChild(this.zhongplanenode); //把图片节点放入游戏界面中
- }
- this.create();
- //敌方中飞机子弹弹夹对象
- this.shot = function() {
- var bullet1 = new createZBullet("../img/wp2.png", parseInt(this.zhongplanenode.style.left) + 20, parseInt(this.zhongplanenode.style.top) + 12, 2);
- zhonglist.push(bullet1);
- }
- }
二、实例化飞机对象
1、实现思路、
(1)总体思路:因我们要考虑到玩家玩游戏的体验性,所有我们需要设置玩家的等级,再跟进玩家的等级出现不同的飞机,那么我们第一步就要先设置玩家等级 再跟进等级判断实例化敌方飞机对象
(2)如何实现玩家等级,我们先设置玩家的分数,比如玩家击灭一个小飞机加五分,一个中飞机,加十分。再根据玩家的总分进行判断玩家等级,这里我以玩家总分等于50分时玩家升一级
(3)在出于游戏的体验性 我们实例化飞机的时候尽量要点时间间隔,所有我们可以设置一个随机判断,当随机数处于哪个范围的时候才创建飞机
(4)在创建敌机时,因为敌机不能左右移动,所有在创建的时候我们在他的坐标轴用随机数,这样创建的敌机就是处于不同的位置创建
2、根据思路创建实例化敌机方法
- /*===================================根据等级创建敌方飞机的方法=============================*/
- function mysmellplane() {
- //得到等级DIV
- var dengji=document.getElementById("blood");
- dengji.innerHTML="玩家等级:"+level;
- //根据总分判断等级
- if(score <50) {
- level=1;
- }
- else if(score >= 50) {
- level=2;
- }
- //当总分小于50时
- if(level >=1) {
- if(Math.random() * 100 <=30) {
- //设置小飞机的产生间隔
- //创建敌方飞机 敌方飞机的X坐标是0~400之间的随机数 Y坐标是-10~-190 血量为3,速度是2~6
- var mysmellplane1=new createsmellplance("../img/enemy1_fly_1.png", parseInt(Math.random() * 400), -parseInt(Math.random() * 180) - 10, 3, parseInt(Math.random() * 6 + 2));
- //将创建的小飞机放入敌方小飞机数组中
- smellplanelist.push(mysmellplane1);
- }
- }
- //当等级为2时 出现小BOSS
- if(level >=2) {
- if(Math.random() * 100 <=20 ) {
- //设置中飞机的产生间隔
- //创建敌方飞机 敌方飞机的X坐标是0~400之间的随机数 Y坐标是-10~-190 速度是3~7
- var mysmellplane3=new createzhongplance("../img/enemy3_fly_1.png", parseInt(Math.random() * 400), -parseInt(Math.random() * 180) - 10, 2, parseInt(Math.random() * 1 + 3));
- //将创建的小飞机放入敌方中飞机数组中
- zhongplanelist.push(mysmellplane3);
- }
- }
- }
- 三、根据敌方飞机状态和位置清除相应节点:
1、为什么清除节点:
为了游戏在运行过程中不会出现崩盘和不影响游戏的流程度,根据敌方飞机的状态和位置我们要时刻的清除它的节点,如果不清除敌方飞机会一直存在,随着游戏的进行,我们不断的创建飞机对象,
从而电脑(手机)内存会越来越小,从而导致崩盘或死机状态。
2、该在什么情况下清除
当敌方飞机死亡和敌方飞机移除游戏界面时清除节点
3、代码实现:
- /*===================================控制敌方小飞机移动 小飞机节点已移除=======================*/
- function smellmove() {
- for(i=0;
- i < smellplanelist.length;
- i++) {
- if(smellplanelist[i].isdead==false) {
- //当敌方飞机没有被击中时 飞机移动
- smellplanelist[i].remove();
- //当敌方小飞机移出游戏界面时
- if(parseInt(smellplanelist[i].semllplaneNode.style.top) >=parseInt(mainobj.style.height)) {
- //移除敌方小飞机节点
- mainobj.removeChild(smellplanelist[i].semllplaneNode);
- //从小飞机对象数组中移除当前的小飞机
- smellplanelist.splice(i, 1);
- }
- }
- else {
- //当敌方小飞机被击中后,从页面消失
- //因设置了dadtime为10 是为了添加飞机杯击中的时的图片,并停留一段时间
- smellplanelist[i].deadtime--;
- if(smellplanelist[i].deadtime <=0) {
- //移除敌方小飞机节点
- mainobj.removeChild(smellplanelist[i].semllplaneNode);
- //从小飞机对象数组中移除当前的小飞机
- smellplanelist.splice(i, 1);
- }
- }
- }
- }
- /*====================================控制敌方中飞机移动 并发射子弹 敌方中飞机节点已移除========================*/
- function zhongmove() {
- for(i=0;
- i < zhongplanelist.length;
- i++) {
- if(zhongplanelist[i].isdead==false) {
- //当敌方飞机没有被击中时 飞机移动
- zhongplanelist[i].remove();
- //当敌方小飞机移出游戏界面时 移除敌方飞机节点
- if(parseInt(zhongplanelist[i].zhongplanenode.style.top) >=parseInt(mainobj.style.height)) {
- //移除敌方小飞机节点
- mainobj.removeChild(zhongplanelist[i].zhongplanenode);
- //从小飞机对象数组中移除当前的小飞机
- zhongplanelist.splice(i, 1);
- }
- }
- else {
- //当敌方小飞机被击中后,从页面消失
- //因设置了dadtime为10 是为了添加飞机杯击中的时的图片,并停留一段时间
- zhongplanelist[i].deadtime--;
- if(zhongplanelist[i].deadtime <=0) {
- //移除敌方小飞机节点
- mainobj.removeChild(zhongplanelist[i].zhongplanenode);
- //从小飞机对象数组中移除当前的小飞机
- zhongplanelist.splice(i, 1);
- }
- }
- }
- }
四、创建敌方飞机子弹
创建思路与创建玩家子弹的思路一样,这里我直接给出代码
- /*======定义敌方中飞机子弹对象====*/
- function createZBullet(ZBulletsrc, x, y, speed) {
- this.bulletsrc = ZBulletsrc; //定义子弹的图片属性(子弹图片的路径)
- this.x = x; //定义子弹飞行的X轴坐标
- this.isdead = false; //定义敌方飞机子弹的状态
- this.y = y;
- this.bullernode = document.createElement("img"); //创建一个图片节点
- this.btstate = true; //定义子弹没有击中地方飞机的状态
- this.speed = speed; //子弹的飞行速度
- //定义子弹图片节点的属性,并将图片节点放入游戏界面
- this.create = function() {
- this.bullernode.src = this.bulletsrc;
- this.bullernode.style.position = "absolute";
- this.bullernode.style.left = this.x + "px";
- this.bullernode.style.top = this.y + "px";
- mainobj.appendChild(this.bullernode); //向大的DIV下添加子弹节点
- }
- //定义子弹运行的轨迹
- this.move = function() {
- this.bullernode.style.top = parseInt(this.bullernode.style.top) + this.speed + "px";
- }
- //在创建子弹对象的时候就把子弹显示在游戏界面上
- this.create();
- }
五、实现玩家子弹打击敌方飞机,飞机死亡
实现思路:判断我方子弹与敌方飞机的位置,当玩家子弹碰到敌机或在敌机内部时,改变敌方飞机和我玩家子弹的状态(死亡),从而清除节点,玩家积分累加。
代码实现:
- /*=====================================子弹打中敌方小飞机的效果===我方子弹之前已移除 不需再进行移除节点===========*/
- function smellplanedeath() {
- //循环遍历小飞机和子弹数组
- for(i=0;
- i < smellplanelist.length;
- i++) {
- for(j=0;
- j < bulletlist.length;
- j++) {
- // 得到小飞机和子弹的坐标
- var zdleft=parseInt(bulletlist[j].bullernode.style.left);
- var zdtop=parseInt(bulletlist[j].bullernode.style.top);
- var fjleft=parseInt(smellplanelist[i].semllplaneNode.style.left);
- var fjtop=parseInt(smellplanelist[i].semllplaneNode.style.top);
- if(smellplanelist[i].isdead==false) {
- //如果飞机状态为活着
- //判断子弹的与飞机的位置关系
- if(zdleft >=fjleft - 10 && zdleft < fjleft + 40 && zdtop > fjtop && zdtop < fjtop + 60) {
- smellplanelist[i].semllplaneNode.src="../img/ss.gif"; //子弹击中飞机
- //改变敌方小飞机的状态(死掉状态)
- smellplanelist[i].isdead=true;
- //子弹击中飞机
- bulletlist[j].btstate=false;
- /*legendarys();//执行飞机被击中的声音*/
- //杀敌数量
- killnum++;
- //杀敌总分
- score=killnum * 5;
- }
- }
- }
- }
- }
- 我这里只实现了这些能力,当玩家飞机与敌方飞机碰撞,我方飞机血量减少,玩家飞机死亡,玩家飞机子弹打击敌方中飞机时,敌方飞机血量减少,直至死亡等功能与玩家子弹击中敌方小飞机的实现思路是一样的,这里我就不一一写完
六、在开始游戏方法中调用以上的所有方法监听器,并在暂停、开始新游戏、、重新开始等功能方法中调用对应的监听器
(开始监听、结束监听)
七、代码实现的效果图:- 以上是我这讲的主要内容,下一讲将为大家讲解玩家飞机通过碰到敌方飞机和子弹血量减少到死亡、及设置第三关,出现boss,并击杀敌机,敌机死亡后随机生成宝箱(具有加血功能)。
若以上知识点讲解的不够仔细的请各位大神多多包涵和指正,需要学习更多关于软件知识的博友可以关注后续博客
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲(创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机,小飞机死亡)的更多相关文章
- [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...
- 【知了堂学习笔记】java 自定义异常
java 常见异常种类(Java Exception): 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCas ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)
整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)
整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...
- [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第3讲(玩家发射子弹)
一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字==================== ...
- [知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&&添加Tomcat到Eclipse
来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...
- [知了堂学习笔记]_牵线Eclipse和Tomcat第一篇 —— 配置Java环境变量&&安装eclipse
一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的 ...
- [知了堂学习笔记]_ajax的两种使用方式
一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...
随机推荐
- linux环境变量的配置
1.全局环境变量 vi /etc/profile JAVA_HOME=/opt/modules/jdk1.8.0_11/ export PATH=$PATH:$JAVA_HOME/bin:$JAV ...
- Pyhton编程(六)之基本数据类型-集合(补充)
集合(set) 集合其实就是一个无序的,自动去重的数据集合,它主要的作用是用来去重和进行关系测试,集合的定义方法如下: name=set("czp") /name=set({1,2 ...
- docker-compose v3版本命令详解参考
参考和指南 这些主题描述了Compose文件格式的第3版.这是最新的版本. Compose and Docker 兼容性矩阵 有几个版本的Compose文件格式 - 1,2,2.x和3.x.下表是快速 ...
- 浅谈canvas绘画王者荣耀--雷达图
背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...
- c++ 中 pair 的 使用方法
原转载地址:点击打开链接 pair的类型: pair 是 一种模版类型.每个pair 可以存储两个值.这两种值无限制.也可以将自己写的struct的对象放进去.. pair<string,int ...
- Springmvc ModelAndView踩过的坑之HttpServletResponse response
先抛出问题.以下两个方法声明有毛区别: @RequestMapping(value = "/rg") public void rg(@PathVariable Long pageI ...
- webpack loader加载器
配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...
- mybatis实现延迟加载多对一
1.数据库表 CREATE TABLE `country` ( `cid` ) NOT NULL AUTO_INCREMENT COMMENT '国家id', `cname` ) COLLATE ut ...
- DDD峰会归来话DDD
一场大戏落幕,首届DDD中国峰会如大会主题色一般的红.或许在12月9日这一天,全中国的DDD粉丝大约有一半都汇聚在了国家会议中心.听起来是幸,其实是不幸,因为DDD在中国的人群基数实在是太少了. 因为 ...
- TP3.2 图片上传及缩略图
基于TP自带的上传文件的类, Think/Upload.class.php 设置表单的enctype属性 下面是上传的具体方法 /** * 图片上传处理 * @param [String] $path ...