好家伙,这应该是这个小游戏最难的几个点之一了

现在我们要做出子弹射击的效果我们应该如何处理?

1.首先我们要确定几个变量和方法的关系

变量: 子弹  bullet  弹夹(用来装子弹的东西)bulletList[] 

方法:装填子弹  绘制子弹 移动子弹

子弹发射的物理逻辑是很简单的:

生产第一个子弹,推入弹夹中,绘制弹夹(即绘制弹夹中的所有子弹),

生产第二个子弹,同样推入弹夹,移动第一颗子弹(应该说是改变第一颗子弹的y坐标),绘制弹夹中的所有子弹 

。。。。。。

。。。。。。

生产第n个子弹,推入弹夹中,改变第n-1颗子弹的Y坐标,绘制弹夹中的所有子弹

(这是本篇最重要的思路,这个不理清楚,做着做着就寄了,)

所以我们的思路就是:

(1)生产子弹,

(2)推入弹夹,

(3)移动子弹(只有第一次生产子弹是不用移动子弹的),

(4)绘制弹夹中的所有子弹  

思路理清,一切都通了

2.在类中添加方法

 class Hero {
constructor(config) {
this.width = config.width;
// this.height = config.heigth;
this.widthh = config.widthh;
this.x = (480 - config.width) / 2;
this.y = 650 - config.widthh;
// this.y = 650 - config.height;
this.frame = config.frame;
//用死/活来控制要渲染的图片组
this.img = null;
this.live = true;
//子弹上次设计的时间
this.lastShootTime = new Date().getTime();
//子弹射击的间隔
this.shootInterval = 200;
//子弹夹数组
this.bulletList = [];
}
judge() { } paint(context) {
this.img = this.frame.live[0];
context.drawImage(this.img, this.x, this.y, this.width, this.widthh);
}
//英雄的子弹设计间隔
shoot() {
//获取当前的时间
const currentTime = new Date().getTime(); if (currentTime - this.lastShootTime > this.shootInterval) {
//初始化一个子弹对象 let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2 + 2, this.y - BULLET
.height / 2);
this.bulletList.push(bullet);
//开始绘制子弹
//bullet.paint(context);
//更新时间
this.lastShootTime = currentTime;
} }
move() {
console.log("hero的move被触发");
this.y -= 2;
}
}

来到我们的Hero类

 let bullet = new Bullet(BULLET, this.x + this.width / 2 - BULLET.width / 2 + 2, this.y - BULLET
.height / 2);
this.bulletList.push(bullet);

很显然这两个就是

(1)“生产子弹”和(2)“推入弹夹”

随后是子弹类的编辑

class Bullet {
constructor(config, x, y) {
this.img = config.img;
this.width = config.width;
this.height = config.height;
this.x = x;
this.y = y;
}
//移动子弹
move() {
console.log("bullet的move被触发");
this.y -= 2;
}
//子弹绘制方法
paint(context) { context.drawImage(this.img, this.x, this.y)
}
}

这里就是

(3)移动子弹

(4)绘制弹夹中的所有子弹  

但是这显然不够完善

我们要操作的是整个弹夹

我们要用一个for循环去遍历弹夹中的每一个子弹并

(3)移动子弹

(4)绘制弹夹中的所有子弹  

3.添加全局变量

function judgeComponent() {
console.log("judge被触发");
for (let i = 0; i < hero.bulletList.length;i++) {
hero.bulletList[i].move();
}
}
//全局函数 来绘制所有的子弹/敌人组件
function paintComponent() {
for (let i = 0; i < hero.bulletList.length;i++) {
hero.bulletList[i].paint(context);
}
}

在状态中添加方法的使用

case RUNNING:
sky.judge();
sky.paint(context);
//加载主角 hero.paint(context);
hero.shoot();
judgeComponent();
paintComponent();
deleteComponent();
// context.drawImage(hero_frame.live[0], 0, 0);
break;

来看看效果:

 

搞定

(嗯,非常nice!)

Html飞机大战(八):子弹的移动和管理的更多相关文章

  1. java飞机大战之子弹的自动生成

    import java.awt.Graphics; import java.util.ArrayList; import javax.swing.JFrame; import javax.swing. ...

  2. web版canvas做飞机大战游戏 总结

    唠唠:两天的时间跟着做了个飞机大战的游戏,感觉做游戏挺好的.说是用html5做,发现全都是js.说js里一切皆为对象,写的最多的还是函数,都是函数调用.对这两天的代码做个总结,希望路过的大神指点一下, ...

  3. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

  4. cocos2dx实现经典飞机大战

    游戏开始层 #ifndef __LayerGameStart_H__ #define __LayerGameStart_H__ #include "cocos2d.h" USING ...

  5. JS+html实现简单的飞机大战

    摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...

  6. cocos2dx 3.0 飞机大战

    因为课程须要.然后又水平有限.所以写了个飞机大战.加上不会画画.所以图片资源也是从微信apk解压出来的,设计思路參考的偶尔e网事. 闲话不说.先讲一下设计.大体上一共分为3个场景.场景以下是Layer ...

  7. 微信5.0 Android版飞机大战破解无敌模式手记

    微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...

  8. [Unity3D]Unity3D游戏开发之飞机大战项目解说

    大家好,我是秦元培,欢迎大家继续关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 首先感谢大家对我博客的关注,今天我想和大家分享的是一个飞机大战的项目.这是一个比較综合的 ...

  9. java版飞机大战 实战项目详细步骤.md

    [toc] 分析 飞机大战 首先对这个游戏分析,在屏幕上的物体都是飞行物,我们可以把建一个类,让其他飞行物继承这个类.游戏中应有英雄机(也就是自己控制的飞机).敌人.而敌人应该分为打死给分的飞机(就是 ...

随机推荐

  1. 南京大学 静态软件分析(static program analyzes)-- introduction 学习笔记

    一.Programming Languages体系 静态程序分析是编程语言中应用层面下的一个细分领域,它是一个非常重要的核心内容. 在理论部分,考虑的是如何设计一个语言的语法和语义,如何设计语言的类型 ...

  2. 关于使用koa实现线上 https服务

    var https=require("https");//https服务var fs= require("fs");var Koa = require('koa ...

  3. Oracle 创建表空间及用户授权、dmp数据导入、表空间、用户删除

    1.创建表空间 // 创建表空间 物理位置为'C:\app\admin\oradata\NETHRA\NETHRA.DBF',初始大小100M,当空间不足时自动扩展步长为10M create tabl ...

  4. NTT 学习笔记

    引入 \(\tt NTT\) 和 \(\tt FFT\) 有什么不一样呢? 就是 \(\tt NTT\) 是可以用来取模的,而且没有复数带来的精度误差. 最最重要的是据说 \(\tt NTT\) 常数 ...

  5. 攻防世界MISC—进阶区11-20

    11.János-the-Ripper 得到未知类型的文件,010 Editor打开后看到pk,得知是真加密的zip文件. 密码在文件中没有提示,根据题目名字,János-the-Ripper Ján ...

  6. IO流思维导图

    IO思维导图总结 总览: 1.文件 <目标:File类的创建和删除的方法 > public boolean createNewFile() :当且仅当具有该名称的文件尚不存在时, 创建一个 ...

  7. 基于 Rainbond 部署 DolphinScheduler 高可用集群

    本文描述通过 Rainbond 云原生应用管理平台 一键部署高可用的 DolphinScheduler 集群,这种方式适合给不太了解 Kubernetes.容器化等复杂技术的用户使用,降低了在 Kub ...

  8. C# MVCapi跨域问题

     he 'Access-Control-Allow-Origin' header contains multiple values ', *', but only one is allowed. Or ...

  9. 2022-7-18 第五组 pan 面向对象

    面向过程 向过程就是:面向过程,其实就是面向着具体的每一个步骤和过程,把每一个步骤和过程完成,然后由这些功能方法相互调用,完成需求. 面向对象 什么是面向对象: 面向对象思想就是不断的创建对象,使用对 ...

  10. Nginx 平滑升级、Nginx的一些基础配置

    # Nginx 平滑升级 # 方案一:使用Nginx服务信号进行升级 # 1.将就版本的sbin目录下可执行nginx进行备份(mv nginx nginxold) # 2.将新版本 configur ...