Html5版飞机大战游戏中(Boss战)制作

内容在“60行代码,制作飞机大战游戏”的基础上,继续追加入了Boss战的功能。

boss的血量默认设置为100了,可以二次开发调整……(^_^)

玩起来有一定难度哈。 试玩地址:点击试玩

实现功能

  1. 添加玩家飞机,并进行控制
  2. Boss能够左右移动
  3. Boss发射三种子弹
  4. 子弹击中玩家飞机
  5. 子弹击中Boss,血量计算

项目源码:http://pro.youyu001.com 

待优化的功能

1)内存优化,子弹图片需要回收

(随着子弹数量增多,计算量一直增大,会卡死,设备发热,

想拼机器性能可以长时间运行试试)

2)血条的制作

(根据血量数值,控制血条图片宽度)

 

3)激光与玩家飞机的碰撞

(激光所在的区域范围,这里不能去)

代码说明

1)通过帧频计算时间相关

定义两个变量,用于记录帧频

var fireSpeed1 = 30;//boss发射子弹的间隔帧数
var fireSpeedSub1 = 0;//记录发射子弹后的帧数

在帧频函数中,执行下面代码。每0.5秒发射一次子弹

//boss定时发射子弹(方式1)
if(fireSpeedSub1 >= fireSpeed1) {
    boss_fire1();//发射子弹
    fireSpeedSub1 = 0;
}
fireSpeedSub1 ++;

2)发射多个子弹并控制

定义存放子弹图片的数组

var bulletList = [];//boss子弹存放在这个数组

当发射子弹时,将子弹图片push到数组中

function boss_fire1() {
    var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
    bullet.anchor.set(0.5);//设置锚点为中心
    app.stage.addChild(bullet);
    bulletList.push(bullet);
    bullet.x = boss.x;
    bullet.y = boss.y;
}

给子弹图片添加更多的属性,这样在子弹移动时可以做到差异化。(Javascript的特性)

bullet.speedR = 0.1; //利用javascript对象的特性,临时记录下子弹旋转速度
bullet.speedY = 3; //利用javascript对象的特性,临时记录下子弹y方向的速度

在帧频函数中,让bulletList数组中的子弹进行移动

//boss子弹移动
for(var i = 0; i < bulletList.length; i ++) {
	var bullet = bulletList[i];
    bullet.y += bullet.speedY;
    if(bullet.speedX) { //判断如果子弹有x方向速度,则进行横向移动
        bullet.x += bullet.speedX;
    }
    if(bullet.speedR) { //判断如果子弹有旋转速度,则进行旋转
        bullet.rotation += bullet.speedR;//自转
    }
}

完整代码

<body></body>
<script src="pixi.js"></script>     
<script>

    //####### boss战 帧频控制 数组循环
    //散发子弹
    //1、boss左右移动
    //2、间隔一段时间发射子弹(两种子弹:直线、散弹)
    //3、利用数组循环处理多子弹
    //4、计算血量

    //创建应用
    var app = new PIXI.Application(512,768);
    document.body.appendChild(app.view);
    app.view.style.height = "100%";

    //添加背景
    var bg = new PIXI.Sprite.fromImage("res/bg/img_bg_level_3.jpg");
    app.stage.addChild(bg);

    //创建飞机图片
    var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
    app.stage.addChild(plane); //将图片放置到舞台
    plane.anchor.x = 0.5; //设置图片锚点为图片中心
    plane.anchor.y = 0.5;
    plane.x = 200; //设置图片的位置
    plane.y = 600;

    var planeBullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_13.png");
    app.stage.addChild(planeBullet);
    planeBullet.anchor.x = 0.5;   //设置飞机图片锚点为图片中心
    planeBullet.anchor.y = 0.5;

    bg.interactive = true;//背景图片允许接受控制信息
    bg.on("pointermove", movePlane); //滑动控制
    function movePlane(event) {
        var pos = event.data.getLocalPosition(app.stage); //获取鼠标当前位置
        plane.x = pos.x;
        plane.y = pos.y;
    }

    //创建boss图片
    var boss = new PIXI.Sprite.fromImage("res/plane/main/img_plane_boss_12.png");
    app.stage.addChild(boss); //将图片放置到舞台
    boss.anchor.x = 0.5; //设置图片锚点为图片中心
    boss.anchor.y = 0.5;
    boss.x = 300; //设置图片的位置
    boss.y = 150;

    //Boss血量
    var bossHp = 100; 
    var bossHpTxt = new PIXI.Text("Boss HP:" + bossHp);
    app.stage.addChild(bossHpTxt); //将文本添加到舞台

    var bossSpeed = 2;//boss左右移动速度

    var isGameOver = false; //是否游戏结束
    app.ticker.add(animate); //指定帧频函数
    function animate() {
        if(isGameOver == true) { //如果游戏结束,则不执行下面动画
            return;
        }

        //背景移动
        bg.y += 2;
        if(bg.y >= 0) {
            bg.y = -768;
        }

        //子弹移动
        planeBullet.y -= 40;
        if(planeBullet.y < -50) {
            planeBullet.x = plane.x;
            planeBullet.y = plane.y;
        }

        //击中Boss判断
        var pos = (planeBullet.x - boss.x) * (planeBullet.x - boss.x) + (planeBullet.y - boss.y) * (planeBullet.y - boss.y);
        if(pos < 100 * 100) { 
            planeBullet.x = plane.x;
            planeBullet.y = plane.y;
            //boss -hp
            bossHp --;
            bossHpTxt.text = "Boss HP:" + bossHp;
            if(bossHp <= 0) {
                isGameOver = true;
                //通关
                if (confirm("Success!, restart?")==true){  
                    window.location.reload();
                } 
            }
        }

        //boss左右移动
        boss.x += bossSpeed;
        if(boss.x > 400) {
            bossSpeed = -2;
        }
        if(boss.x < 100) {
            bossSpeed = 2;
        }

        //boss定时发射子弹(方式1)
        if(fireSpeedSub1 >= fireSpeed1) {
            boss_fire1();//发射子弹
            fireSpeedSub1 = 0;
        }
        fireSpeedSub1 ++;

        //boss定时发射子弹(方式2)
        if(fireSpeedSub2 >= fireSpeed2) {
            boss_fire2();//发射子弹
            fireSpeedSub2 = 0;
        }
        fireSpeedSub2 ++;

        //boss定时发射子弹(方式3)
        if(fireSpeedSub3 >= fireSpeed3) {
            boss_fire3();//发射子弹
            fireSpeedSub3 = 0;
        }
        fireSpeedSub3 ++;
        //如果激光已经发射
        if(bulletLeft.visible == true) {
            if(fire3TimeSub >= fire3Time) {
                bulletLeft.visible = false;
                bulletRight.visible = false;
                fire3TimeSub = 0;
            }
            fire3TimeSub ++;
        }
        
        //boss子弹移动
        for(var i = 0; i < bulletList.length; i ++) {
            var bullet = bulletList[i];
            bullet.y += bullet.speedY;
            
            if(bullet.speedX) { //判断如果子弹有x方向速度,则进行横向移动
                bullet.x += bullet.speedX;
            }
            if(bullet.speedR) { //判断如果子弹有旋转速度,则进行旋转
                bullet.rotation += bullet.speedR;//自转
            }
        }

        //碰撞子弹Game Over
        for(var i = 0; i < bulletList.length; i ++) {
            var bullet = bulletList[i];
            var pos = (bullet.x - plane.x) * (bullet.x - plane.x) + (bullet.y - plane.y) * (bullet.y - plane.y);
            if(pos < 30 * 30) { //这里调小一点,变的更简单
                //游戏结束标记
                isGameOver = true;
                //是否重玩
                if (confirm("Game Over, restart?")==true){  
                    window.location.reload();
                }
            }
        }

    }



    var bulletList = [];//boss子弹存放在这个数组

    //子弹1
    var fireSpeed1 = 30;//boss发射子弹的间隔帧数
    var fireSpeedSub1 = 0;//记录发射子弹后的帧数
    //boss子弹发射方式1
    function boss_fire1() {
        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedR = 0.1; //利用javascript对象的特性,临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性,临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedX = 1; //利用javascript对象的特性,临时记录下子弹x方向的速度
        bullet.speedR = 0.1; //利用javascript对象的特性,临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性,临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_17.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x;
        bullet.y = boss.y;
        bullet.speedX = -1; //利用javascript对象的特性,临时记录下子弹x方向的速度
        bullet.speedR = 0.1; //利用javascript对象的特性,临时记录下子弹旋转速度
        bullet.speedY = 3; //利用javascript对象的特性,临时记录下子弹y方向的速度
    }

    //boss子弹发射方式2
    var fireSpeed2 = 60;//boss发射子弹的间隔帧数
    var fireSpeedSub2 = 0;//记录发射子弹后的帧数
    function boss_fire2() {
        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_15.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        bullet.rotation = Math.PI;
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x + 100;
        bullet.y = boss.y + 60;
        bullet.speedY = 8; //利用javascript对象的特性,临时记录下子弹y方向的速度

        var bullet = new PIXI.Sprite.fromImage("res/bullet/img_bullet_15.png");
        bullet.anchor.set(0.5);//设置锚点为中心
        bullet.rotation = Math.PI;
        app.stage.addChild(bullet);
        bulletList.push(bullet);
        bullet.x = boss.x - 100;
        bullet.y = boss.y + 60;
        bullet.speedY = 8; //利用javascript对象的特性,临时记录下子弹y方向的速度
    }

    //boss子弹发射方式3 激光
    var fireSpeed3 = 600;//boss发射子弹的间隔帧数
    var fireSpeedSub3 = 0;//记录发射子弹后的帧数
    var fire3Time = 300;//激光发射时长
    var fire3TimeSub = 0;//记录激光发射后的帧数

    var bulletLeft = new PIXI.Sprite.fromImage("res/bullet/img_bullet_laser_01.png");
    bulletLeft.anchor.x = 0.5;//设置锚点为中心
    bulletLeft.anchor.y = 1;//设置锚点为中心
    bulletLeft.scale.x = 2;
    bulletLeft.scale.y = 2;
    bulletLeft.rotation = Math.PI;
    boss.addChild(bulletLeft); //添加到boss图片上
    bulletLeft.x = 180;
    //隐藏激光图片
    bulletLeft.visible = false;

    var bulletRight = new PIXI.Sprite.fromImage("res/bullet/img_bullet_laser_01.png");
    bulletRight.anchor.x = 0.5;//设置锚点为中心
    bulletRight.anchor.y = 1;//设置锚点为中心
    bulletRight.scale.x = 2;
    bulletRight.scale.y = 2;
    bulletRight.rotation = Math.PI;
    boss.addChild(bulletRight); //添加到boss图片上
    bulletRight.x = -180;
    //隐藏激光图片
    bulletRight.visible = false;

    function boss_fire3() {
        bulletRight.visible = true;
        bulletLeft.visible = true;
    }



</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/3383.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【AcWing刷题】蓝桥杯专题突破-广度优先搜索-bfs(11)

目录 写在前面&#xff1a; 题目&#xff1a;844. 走迷宫 - AcWing题库 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 解题思路&#xff1a; 代码&#xff1a; AC &#xff01;&#xff01;&#xff…

使用Docker 一键部署SpringBoot和SpringCloud项目

使用Docker 一键部署SpringBoot和SpringCloud项目 1. 准备工作2. 创建Dockerfile3. 创建Docker Compose文件4. 构建和运行Docker镜像5. 验证部署6. 总结Docker是一个非常流行的容器化技术,可以方便地将应用程序和服务打包成容器并运行在不同的环境中。在本篇博客中,我将向您展…

计算机组成原理|第四章(笔记)

目录第四章 存储器4.1 概述4.1.1 存储器分类4.1.2 存储器的层次结构4.2 主存储器4.2.1 概述4.2.2 半导体存储芯片简介4.2.3 随机存取存储器&#xff08;RAM&#xff09;4.2.4 只读存储器&#xff08;ROM&#xff09;4.2.5 存储器与CPU的连接4.2.6 存储器的校验4.2.7 提高访存速…

《硬件架构的艺术》读书笔记:Chapter 1 亚稳态的世界

Chapter 1 亚稳态的世界 一、简介 同步系统中&#xff0c;数据和时钟有固定的因果关系(在同一时钟域(Clock Domains))中&#xff0c;只要数据和时钟满足建立时间和保持时间的要求&#xff0c;不会产生亚稳态(meastable) 静态时序分析(STA) 就是基于同步电路设计模型而出现的&am…

安全防御 --- 防火墙

防火墙 1、基础 &#xff08;1&#xff09;防御对象&#xff1a;授权用户&#xff1b;非授权用户 &#xff08;2&#xff09;含义&#xff1a; 防火墙是一种隔离&#xff08;非授权用户所在区域间&#xff09;并过滤&#xff08;对受保护网络中的有害流量或数据包&#xff0…

GCC 编译器的主要组件和编译过程

主要组件&#xff1a; 分析器&#xff1a;分析器将源语言程序代码转换为汇编语言。因为要从一种格式转换为另一种格式&#xff08;C到汇编&#xff09;&#xff0c;所以分析器需要知道目标机器的汇编语言。 汇编器&#xff1a;汇编器将汇编语言代码转换为CPU可以执行字节码。 …

网络层协议 IP

目录 IP协议 基本概念 协议头格式&#xff08;重要&#xff09; 分片了如何组装&#xff1a; 那么判断是否片偏移就是&#xff1a; 分片对UDP和TCP有影响吗&#xff1f; 总结 网段划分&#xff08;重要&#xff09; 下面有两个例子&#xff1a; 特殊的IP地址 …

这几个SQL语法的坑,你踩过吗

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…

人工智能能否取代软硬件开发工程师

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 人工智能发展趋势 随着AI技术的不断发展&#xff0c;它正在改变我们的生活方式、商业模式和工作方式。人工智能技术的发展一直处于快速变化和持续创新的状态&#xff0c;以下…

免费镜像 ChatGPT 网站随你挑和分享一批可用的 API Keys

文章目录一、前言二、在线 ChatGPT三、分享一批 API Keys&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 随着科技的不断进步&#xff0c;人工智能在各个领域的应用越来越广泛。在这个过程中&#xff0c;人们需要不断更新知识和技能&#x…

文件包含漏洞学习笔记

1、为何会出现文件包含漏洞 相同内容或方法在多个页面显示或调用&#xff0c;文件包含漏洞又称为目录遍历漏洞或任意文件访问漏洞。分为本地文件包含&#xff08;LFI&#xff1a;Local File Inclusion&#xff09;&#xff0c;远程文件包含&#xff08;RFI&#xff1a;Remote …

Linux 多线程:多线程和多进程的对比

目录一、多进程优缺点二、多线程优缺点三、使用多执行流的场景在多任务处理中&#xff0c;我们既可以使用多进程&#xff0c;也可以使用多线程。但多进程和多线程并不是随意选择的&#xff0c;因为它们应对的场景不同&#xff0c;优缺点也不同。 一、多进程优缺点 多进程就是在…

Spring - Spring 注解相关面试题总结

文章目录01. Spring 配置方式有几种&#xff1f;02. Spring 如何实现基于xml的配置方式&#xff1f;03. Spring 如何实现基于注解的配置&#xff1f;04. Spring 如何基于注解配置bean的作用范围&#xff1f;05. Spring Component, Controller, Repository, Service 注解有何区别…

【数据结构】堆

文章目录前言堆的概念及结构堆初始化堆的判空堆的销毁插入数据删除数据堆的数据个数获取堆顶数据用数组创建堆对数组堆排序有关topk问题整体代码展示写在最后前言 &#x1f6a9;前面了解了树&#xff08;-> 传送门 <-&#xff09;的概念后&#xff0c;本章带大家来实现一…

手机验证发送及其验证(基于springboot+redis)保姆级

在Java开发中&#xff0c;发送手机验证码时需要考虑以下几个问题&#xff1a; 验证码的有效期&#xff1a;验证码应该有一定的有效期&#xff0c;一般设置为几分钟或者十几分钟。过期的验证码应该被认为是无效的&#xff0c;不能用于验证用户身份。手机号码格式的校验&#xf…

软测界的黑科技,难道不来瞧瞧?

写在前面&#xff1a; 在当今互联网时代&#xff0c;软件已经渗透到了人们生活的方方面面&#xff0c;各种类型的软件应运而生&#xff0c;为人们的工作和生活提供了更便捷的服务。然而&#xff0c;随着软件的不断增长和复杂性的不断提高&#xff0c;软件测试变得越来越重要。…

如何成为优秀的程序员

崔宝秋&#xff0c;现任小米首席架构师、小米云平台负责人。1995年赴美留学&#xff0c;纽约州立大学石溪分校计算机科学系博士毕业&#xff0c;曾任IBM高级工程师和高级研发经理、雅虎搜索技术核心团队主任工程师、LinkedIn主任工程师&#xff0c;2012年回国加入小米科技。 20…

安全防御之入侵检测篇

目录 1.什么是IDS&#xff1f; 2.IDS和防火墙有什么不同&#xff1f;3.IDS的工作原理&#xff1f; 4.IDS的主要检测方法有哪些&#xff1f;请详细说明 5.IDS的部署方式有哪些&#xff1f; 6.IDS的签名是什么意思&#xff1f;签名过滤器有什么用&#xff1f;例外签名的配置作…

性能测试(三)----loadrunner的使用

一)Controller的使用: 1)在VUG中针对写好的脚本创建场景: 2)手动打开Controller进行脚本的添加并创建场景: 点击完成之后直接打开Controller所在的组件 3)针对场景来进行设置: Basic schedule:点击这个选项进行设置 可手动修改每个用户组的Quantity来修改并发用户总量 3.1)初始…

css绘制一个Pinia小菠萝

效果如下&#xff1a; pinia小菠萝分为头部和身体&#xff0c;头部三片叶子&#xff0c;菠萝为身体 头部 先绘制头部的盒子&#xff0c;将三片叶子至于头部盒子中 先绘制中间的叶子&#xff0c;利用border-radius实现叶子的效果&#xff0c;可以借助工具来快速实现圆角的预想…