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] 分析 飞机大战 首先对这个游戏分析,在屏幕上的物体都是飞行物,我们可以把建一个类,让其他飞行物继承这个类.游戏中应有英雄机(也就是自己控制的飞机).敌人.而敌人应该分为打死给分的飞机(就是 ...
随机推荐
- VMware Workstation 虚拟机安装教程
一.介绍篇 VMware Workstation 16 Pro是VMware(威睿公司)于2021年最新发布的一代虚拟机软件,软件的中文名是"VMware 工作站 16 专业版". ...
- 1.Shell编程循环语句(if 、while、 until)
循环语句 for循环语句 读取不同的变量值,用来逐个执行同一组命令 格式: for 变量名 in 取值列表 do 命令序列 done 示例:批量创建用户并设置密码 [root@localhost da ...
- vue2和vue3生命周期的区别
概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...
- JavaScript与Node.js一起打造一款聊天App
聊天是我们人与人交流最直接的方式,互联网的加入使我们交流更加便捷.我们手机上的微信.QQ是我们手机必不可少的应用软件.那么,我们是否可以做一款聊天应用呢? 之前我自己闲着没事,研究过一些技术,做了一款 ...
- Spring Security认证器实现
目录 拦截请求 验证过程 返回完整的Authentication 收尾工作 结论 一些权限框架一般都包含认证器和决策器,前者处理登陆验证,后者处理访问资源的控制 Spring Security的登陆请 ...
- SAP Smartforms 参数配置
DATA : sf_name TYPE rs38l_fnam. DATA : sf_output_options TYPE ssfcompop. DATA : sf_control_parameter ...
- 业务可视化-让你的流程图"Run"起来
前言 最近在研究业务可视化的问题,在日常的工作中,流程图和代码往往是分开管理的. 一个被维护多次的系统,到最后流程图和代码是否匹配这个都很难说. 于是一直有一个想法,让程序直接读流程图,根据流程图的配 ...
- 鹏城杯 WEB_WP
简单的PHP GET /?code=[~%8C%86%8C%8B%9A%92][~%CF]([~%9A%91%9B][~%CF]([~%98%9A%8B%9E%93%93%97%9A%9E%9B%9A ...
- zip格式文件编码检测
解压后文件名乱码 由于zip格式文件无编码存储的结构,因此解压时无法知道原先的编码. 当解压zip格式文件时使用的编码和原编码不一致时,就可能会出现解压后文件名乱码问题. 猜测编码 基于上述问题,需要 ...
- pip安装报错Could not install packages due to an EnvironmentError: Missing dependencies for SOCK
unset all_proxy && unset ALL_PROXY