前段-用面向对象的方式开发一个水管小鸟的游戏

首先准备好各类空文件 index.js css html 和图片
在这里插入图片描述
图片是下面这些,如果没有的可在这里下载
在这里插入图片描述

2 开发开始

好了,基础准备工作完毕,开发开始,
首先,先把天空,大地,小鸟的盒子准备好,并为其添加样式
在这里插入图片描述
需要注意的是,天空和大地,都是宽度200%,这是因为我们使用绝对定位,让图片往左移来模拟移动,所以不能设置100%

效果如下
在这里插入图片描述

3.给小鸟设置飞行状态

给小鸟添加飞行状态的css,并给小鸟设置初始飞行状态和初始位置

在这里插入图片描述

4. 添加水管

之后就是添加水管了,注意下面的水管应该加上地面的高度也就是112px,这样才能正常的显示,不然就穿出地表了

在这里插入图片描述

以上,使用css 和html静态页面布局就完成了,接下来是使用js来控制行为了

创建js对象

因为标题说的是使用面向对象的方式来写这个游戏,
为了不做标题单,所以我先开始创建对象
,根据上面写的那些可以很轻易地得出

这个游戏拥有的对象为

天空
大地
水管

然后再仔细观察,该如何来判断小鸟是不是装上了水管呢?,小游戏,自然是把他们看做是一个个的矩形(这也是为什么我一直留着边框)
只需要js判断矩形重合了,那就是撞到了
在这里插入图片描述

所以在这里可以抽象出他们的共同父类,矩形,
所以这里新建一个class.js用来做对象

在这里插入图片描述

然后就需要想一想,这个类需要有什么成员

  1. 小鸟,水管,大地,天空,都是要移动的,所以这个类要有移动这个成员
  2. 宽度,高度,这是基本的
  3. 小鸟水管在地图的坐标
  4. 既然他们都能移动,那就有速度,速度,这是2d的那就得分为,横向速度,纵向速度

于是就有了下面这个基类

class Rectangle {constructor(width, height, left, top, xSpeed, ySpeed, dom) {this.width = width;this.height = height;this.left = left;this.top = top;this.xSpeed = xSpeed;this.ySpeed = ySpeed;this.dom = dom;}render() {this.dom.style.width = this.width + "px";this.dom.style.height = this.height + "px";this.dom.style.left = this.left + "px";this.dom.style.top = this.top + "px";}move(duration) {const xDis = this.xSpeed * duration;const yDis = this.ySpeed * duration;const newList = this.left + xDisconst newTop = this.top + yDis;this.render()}
}

不好意思,朋友要噶了,我先去处理下,明天续写

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android studio配置Flutter开发环境报错问题解决

博主前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住也分享一下给大家 👉点击跳转到教程 报错问题截图 报错原因已经给出: You need Java 11 or higher to build your app with this version of G…

【智能家居】4、智能家居框架设计和代码文件工程建立

目录 一、智能家居项目框架 二、智能家居工厂模式示意 三、代码文件工程建立 SourceInsight创建新工程步骤 一、智能家居项目框架 二、智能家居工厂模式示意 三、代码文件工程建立 创建一个名为si的文件夹用于保存SourceInsight生成的文件信息,然后在SourceInsig…

DocCMS keyword SQL注入漏洞复现 [附POC]

文章目录 DocCMS keyword SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 DocCMS keyword SQL注入漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相关技术从事非法测…

【ES6.0】- 扩展运算符(...)

【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数&#xff0…

【超好用的工具库】hutool-all工具库的基本使用

简介(可不看): hutool-all是一个Java工具库,提供了许多实用的工具类和方法,用于简化Java开发过程中的常见任务。它包含了各种模块,涵盖了字符串操作、日期时间处理、加密解密、文件操作、网络通信、图片处…

2311rust到27版本更新

1.23 从Rust1.0开始,有叫AsciiExt的特征来提供u8,char,[u8]和str上的ASCII相关功能.要使用它,需要如下编写代码: use std::ascii::AsciiExt; let ascii a; let non_ascii ; let int_ascii 97; assert!(ascii.is_ascii()); assert!(!non_ascii.is_ascii()); assert!(int_a…

C#多线程Thread、Task

在C#中,线程可以用于完成需要耗费较长时间的操作,而不会阻塞用户界面。一个程序可以有多个线程,每个线程可以并行执行代码。 在C#中,可以使用System.Threading.Thread类来创建和控制线程,使用System.Threading.Mutex类…

javascript二维数组(22)JavaScript 中的数据类型有哪些?如何进行类型转换?

在 JavaScript 中,数据类型主要分为两种:基本类型和对象类型。 基本类型是指原始数据类型,包括: Number:数值型。可以是整数或浮点数。String:字符串型。用于表示文本数据。Boolean:布尔型。包…

ZYNQ7000---FLASH读写

提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Flash是什么?二、Flash的分类1、内部结构(接口)区分:2、外部接口区分:SPIQPSI Flash: QSPI 控制…

k8s pod 处于Terminating的原因分析和解决处理——筑梦之路

之前整理了一下各种资源长时间无法回收,解决处理的命令行 k8s 各种资源Terminationg状态处理 —— 筑梦之路_k8s自定义资源修改状态-CSDN博客 这里具体整理下pod长时间处于Terminating状态的相关知识,主要是对前面的补充和完善,作为笔记记录…

京东数据挖掘(京东数据采集):2023年Q3电脑行业数据分析报告

近年来,在远程办公、远程教育等需求的刺激下,电脑的销售增长较为显著。不过,随着市场的成熟乃至饱和,电脑销售市场也逐渐出现增长困难、需求疲软等问题。 2023年第三季度,电脑市场的出货量同比下滑。根据鲸参谋电商数据…

德迅云安全为您介绍关于抗D盾的一些事

抗D盾概述: 抗D盾是新一代的智能分布式云接入系统,接入节点采用多机房集群部署模式,隐藏真实服务器IP,类似于网站CDN的节点接入,但是“抗D盾”是比CDN应用范围更广的接入方式,适合任何TCP 端类应用包括&am…

GB28181 编码规则说明

背景: GB/T28181-2011 《安全防范视频监控联网系统信息传输、交换、控制技术要求》中规定了联网系统应对前端设备、监控中心设备、用户终端ID进行统一编码,该编码具有全局唯一性。这就是国标编码。编码分20位和18位,其中18位编码已经淘汰。下文中&#…

React hooks(一):useState

1.React hooks React hooks是React16.8的新特性,可以让React函数组件具有状态,并提供类似componentDidMount和componentDidUpdate等生命周期方法。 React 早期版本,类组件可以在shouldComponentUpdate中,通过判断props和state是…

搭建yum源并定时同步

一 、安装yum源 1-准备yum目录 cd /data/www/html createrepo -v ./目录 2-安装服务 yum -y install httpd 3-配置服务 /etc/httpd/conf/httpd.conf 4.配置/etc/yum.repo.d/local.rpeo 二、定时更新yum源 #1. 同步整个源到指定目录 [rootV10SP1-1 pac]# reposync -p /root/…

到底什么是Linux?快进来学习!

相信大家对Linux并不陌生吧?Linux 是一种计算机系统,属于基础中的基础,就和我们熟知的Windows一样,都是系统。它是现今最流行和最实用的计算机操作系统,它区别于后台、算法、大数据、前端、测试方向,需要程…

python 随机数生成

生成随机整数 使用 randint() 函数可以生成指定范围内的随机整数。 import random # 生成1到10之间的随机整数 random_int random.randint(1, 10) print(random_int) 生成随机浮点数 random() 方法用于生成 0 到 1 之间的随机浮点数。 import random # 生成0到1之间…

LVGL 日历组件

LVGL 日历组件 calendar 添加到默认组中 lvgl的 calendar 组件会默认添加到旋钮按键组中,需要手动将其删除,否则会聚焦到不可见的控件上。 lv_obj_set_style_pad_all(calendar, 8, LV_STATE_DEFAULT); lv_group_remove_obj(calendar);修改时间范围 年…

[msg_msg] corCTF2021 -- fire_of_salvation

前言 msg_msg 是 kernel pwn 中经常用作堆喷的结构体. 其包含一个 0x30 大小的 header. 但 msg_msg 的威力远不如此, 利用 msg_msg 配合其他堆漏洞可以实现任意地址读写的功能. 程序分析 本题给了源码, 可以直接对着源码看. 并且题目给了编译配置文件, 所以可以直接编译一个…

C++ const与符号表

fun_cpp.cpp //const修饰的全局变量 默认是内部链接(只在当前源文件有效 不能直接用于其他源文件) const int num_pp 100;//如果必须用在其他源文件 使用只读的全局变量 必须加extern将num转换成外部链接 //extern const int num_pp 100;main_cpp.cpp…