-
Html飞机大战(二):面向对象绘制背景
好家伙,
我们为了后续工作的顺利进行,我试着把每一个模块封装为对象
但冻手之前还是要构思一下
我们把天空封装成一个类:
1.来搞一手简单的对象分析:
属性方面的都好理解
来说明一下方法:
(1) paint方法:
我们把图片的渲染封装成一个独立的方法
然后我们知道图片的移动是通过y1,y2++来实现的
(2) judge方法:
我们我们把对y1,y2的控制交给judge
思路清晰,开干:
2.代码如下:
弄一个config来放参数:
const config ={
bg: bg,
width:480,
height:650,
speed: 10,
/* 速度 */
}
然后是Sky类的代码:
class Sky{
constructor(config){
//图片资源
this.bg=config.bg;
this.width = config.width;
this.height = config.height;
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = -this.height;
this.speed =config.speed;
//最后更新时间
this.lasttime = new Date().getTime();
}
//判断方法
judge(){
let currentTime = new Date().getTime();
//在此处增加一个判断
if(currentTime -this.lasttime > this.speed){
this.y1++;
this.y2++;
this.lasttime =currentTime;
}
//渲染完毕,重置y1,y2
if(this.y2===0){
this.y1=0;
this.y2=-this.height;
}
}
//绘图方法
paint(context){
context.drawImage(this.bg,this.x1,this.y1++,this.width,this.height);
context.drawImage(this.bg,this.x2,this.y2++,this.width,this.height);
if(this.y2===0){
this.y1=0;
this.y2=-650;
}
}
}
(呜呜呜,已经是Java形状了,像,太像了,要我说这就是Java)
整体思路上与上一篇没什么变化,只是多了封装这一步
3.实例对象
const sky = new Sky(config);
4.加载图片
bg.addEventListener("load",()=>{
/*
callback: Function 表示回调函数
timeout: Number 表示每次调用函数所间隔的时间段
*/
setInterval(()=>{
sky.paint(context);
},10);
})
这里的速度10,由于我们的速度理论上来讲不应该丢给"背景类"去控制,所以这里暂时不管
背景这一对象就弄好了
出处:https://www.cnblogs.com/FatTiger4399/p/16597060.html
最新更新
谷歌、微软、Meta?谁才是 Python 最大的金
VB.NET编程调用讯雷下载文件
Objective-C语法之代码块(block)的使用
URL Encode
python爬虫学习
python爬虫学习——列表
go语言写http踩得坑
【Python】爬虫笔记-从PyMySQL到DBUtils
【Python】爬虫笔记-开源代理池haipproxy使用
Python规范:提高可读性
SQL SERVER 查询所有表 统计每张表的大小
.NET MAUI (微软 .Net 6 跨多平台应用 UI)框架
获取树形数据的全路径
第十一章-并发控制
第十章-数据库恢复技术
第七章-概念结构设计
第六章-关系数据理论
第三章-标准SQL语句
第二章-关系数据库
第一章-绪论
JavaScript 中 Object,Map,Set 及数组遍历方法
微信小程序的全局弹窗以及全局实例
理解JS函数之call,apply,bind
解决未知的服务器标记“asp:ListView”。
css样式显示省略号
浅谈JS词法环境
js对象的理解
原型和原型链的深入浅出
JavaScript实现数组对象去重
关于 NodeJs 处理超长字符串问题的分析