Html飞机大战(八):子弹的移动和管理
好家伙,这应该是这个小游戏最难的几个点之一了
现在我们要做出子弹射击的效果我们应该如何处理?
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飞机大战(八):子弹的移动和管理的更多相关文章
- java飞机大战之子弹的自动生成
import java.awt.Graphics; import java.util.ArrayList; import javax.swing.JFrame; import javax.swing. ...
- web版canvas做飞机大战游戏 总结
唠唠:两天的时间跟着做了个飞机大战的游戏,感觉做游戏挺好的.说是用html5做,发现全都是js.说js里一切皆为对象,写的最多的还是函数,都是函数调用.对这两天的代码做个总结,希望路过的大神指点一下, ...
- 用Javascript模拟微信飞机大战游戏
最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...
- cocos2dx实现经典飞机大战
游戏开始层 #ifndef __LayerGameStart_H__ #define __LayerGameStart_H__ #include "cocos2d.h" USING ...
- JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...
- cocos2dx 3.0 飞机大战
因为课程须要.然后又水平有限.所以写了个飞机大战.加上不会画画.所以图片资源也是从微信apk解压出来的,设计思路參考的偶尔e网事. 闲话不说.先讲一下设计.大体上一共分为3个场景.场景以下是Layer ...
- 微信5.0 Android版飞机大战破解无敌模式手记
微信5.0 Android版飞机大战破解无敌模式手记 转载: http://www.blogjava.net/zh-weir/archive/2013/08/14/402821.html 微信5.0 ...
- [Unity3D]Unity3D游戏开发之飞机大战项目解说
大家好,我是秦元培,欢迎大家继续关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 首先感谢大家对我博客的关注,今天我想和大家分享的是一个飞机大战的项目.这是一个比較综合的 ...
- java版飞机大战 实战项目详细步骤.md
[toc] 分析 飞机大战 首先对这个游戏分析,在屏幕上的物体都是飞行物,我们可以把建一个类,让其他飞行物继承这个类.游戏中应有英雄机(也就是自己控制的飞机).敌人.而敌人应该分为打死给分的飞机(就是 ...
随机推荐
- 南京大学 静态软件分析(static program analyzes)-- introduction 学习笔记
一.Programming Languages体系 静态程序分析是编程语言中应用层面下的一个细分领域,它是一个非常重要的核心内容. 在理论部分,考虑的是如何设计一个语言的语法和语义,如何设计语言的类型 ...
- 关于使用koa实现线上 https服务
var https=require("https");//https服务var fs= require("fs");var Koa = require('koa ...
- Oracle 创建表空间及用户授权、dmp数据导入、表空间、用户删除
1.创建表空间 // 创建表空间 物理位置为'C:\app\admin\oradata\NETHRA\NETHRA.DBF',初始大小100M,当空间不足时自动扩展步长为10M create tabl ...
- NTT 学习笔记
引入 \(\tt NTT\) 和 \(\tt FFT\) 有什么不一样呢? 就是 \(\tt NTT\) 是可以用来取模的,而且没有复数带来的精度误差. 最最重要的是据说 \(\tt NTT\) 常数 ...
- 攻防世界MISC—进阶区11-20
11.János-the-Ripper 得到未知类型的文件,010 Editor打开后看到pk,得知是真加密的zip文件. 密码在文件中没有提示,根据题目名字,János-the-Ripper Ján ...
- IO流思维导图
IO思维导图总结 总览: 1.文件 <目标:File类的创建和删除的方法 > public boolean createNewFile() :当且仅当具有该名称的文件尚不存在时, 创建一个 ...
- 基于 Rainbond 部署 DolphinScheduler 高可用集群
本文描述通过 Rainbond 云原生应用管理平台 一键部署高可用的 DolphinScheduler 集群,这种方式适合给不太了解 Kubernetes.容器化等复杂技术的用户使用,降低了在 Kub ...
- C# MVCapi跨域问题
he 'Access-Control-Allow-Origin' header contains multiple values ', *', but only one is allowed. Or ...
- 2022-7-18 第五组 pan 面向对象
面向过程 向过程就是:面向过程,其实就是面向着具体的每一个步骤和过程,把每一个步骤和过程完成,然后由这些功能方法相互调用,完成需求. 面向对象 什么是面向对象: 面向对象思想就是不断的创建对象,使用对 ...
- Nginx 平滑升级、Nginx的一些基础配置
# Nginx 平滑升级 # 方案一:使用Nginx服务信号进行升级 # 1.将就版本的sbin目录下可执行nginx进行备份(mv nginx nginxold) # 2.将新版本 configur ...