015-案例（1）

最新推荐文章于 2024-03-21 00:19:57 发布
最新推荐文章于 2024-03-21 00:19:57 发布
阅读量215 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45615613/article/details/102605680
版权

2019 10 15

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fly bird</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#game {
			/*相对定位*/
			position: relative;
			width: 800px;
			height: 600px;
			-ms-background-position-x: -50px;
			background: url(images/sky.png);
			overflow: hidden;
		}
		#bird {
			/*绝对定位*/
			width: 34px;
			height: 25px;
			background: url(images/birds.png) -8px -10px;
			top: 100px;
			left: 100px;
			position: absolute;
		}
	</style>
</head>
<body>
	<!-- 创建骨架 -->
	<div id="game">
		<div id="bird">
			
		</div>
	</div>
	<script>
		/*
			让小鸟飞起来
				1.背景向后移动
		*/
		//获取元素
		var game = document.getElementById('game');
		var birdEl = document.getElementById('bird');

		//以键值对的形式保存小鸟和背景的参数
		var sky = {
			x : 0
		}
		//初始化bird值
		var bird = {
			speedX : 5,
			speedY : 0,
			x : birdEl.offsetLeft,
			y : birdEl.offsetTop
		}
		//判断游戏是否开始  需要一个状态值
		var running = true;
		//定义定时器 使游戏背景移动
		setInterval(function() {
			if (running) {
			sky.x -= 5;
			//sky的值水平移动5
			game.style.backgroundPositionX = sky.x + 'px';
			//实现小鸟的上下移动
			//距离= 时间 * 速度
			bird.speedY += 1; //加速度为1
			bird.y += bird.speedY;
			if (bird.y < 0) {
				running = false;
				// alert('You juse like silly boy!!!');
				bird.y = 0;
			}
			//当小鸟offsettop + 自身高度 大于背景高度时游戏停止
			if (bird.y + birdEl.offsetHeight > 600) {
				running = false;
				// alert('You juse like silly boy!!!');
				bird.y = 600-birdEl.offsetHeight;
			}

			birdEl.style.top = bird.y + 'px';
			}
		},20)
		//点击文档是，小鸟实现向上运动
		document.onclick = function() {
			bird.speedY = -10;
		}

		//创建管道函数
		function createPipe(position) {
			//管道长度随机 管道有很多参数：水平位置，自身高度 上下管道距离
			var pipe = {};
				//水平位置
				pipe.x = position;
				//上管道高度
				pipe.uHeight =200 + parseInt((Math.random() *100));
				//下管道高度 
				pipe.dHeight =600 - pipe.uHeight -200;
				pipe.dTop = pipe.uHeight +200;

				//创建一个div
				var uPipe = document.createElement('div');
				uPipe.style.width = '52px';
				uPipe.style.height = pipe.uHeight + 'px';

				uPipe.style.position = 'absolute';
				uPipe.style.top = '0px';
				uPipe.style.left = pipe.x + 'px';
				uPipe.style.background = 'url(images/pipe2.png) no-repeat center bottom';
				game.appendChild(uPipe);

				var dPipe = document.createElement('div');
				dPipe.style.width = '52px';
				dPipe.style.height = pipe.dHeight + 'px';
				dPipe.style.background = 'url(images/pipe1.png) no-repeat center top';
				dPipe.style.position = 'absolute';
				dPipe.style.top = pipe.dTop+'px';
				dPipe.style.left = pipe.x + 'px';
				game.appendChild(dPipe);


				//管道动起来
				setInterval(function() {
					if (running) {
						pipe.x -= 2;
						uPipe.style.left = pipe.x +'px';
						dPipe.style.left = pipe.x +'px';
						if (pipe.x <-52) {
							pipe.x = 800;
						}

						var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;
						var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;
						if (uCheck || dCheck) {
							running = false;
							alert('You juse like silly boy!!!');
						}
					}
				},20)

			}
			createPipe(400);
			createPipe(600);
			createPipe(800);
			createPipe(1000);
	</script>
</body>
</html>
weixin_45615613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XC7Z015-1CLG485I原理图和封装AD版本
12-13
在本案例中，XC7Z015-1CLG485I的原理图详细描绘了这款FPGA与其他外围电路、接口和组件的连接关系，包括电源、时钟、输入/输出（I/O）接口、控制信号等。原理图的设计需要遵循电气规则，确保电路的正确性和可靠性。...
US-015使用说明书及例程
06-08
1. **产品概述**：简要介绍US-015的功能、设计目的和适用场景。 2. **硬件规格**：包括US-015的物理尺寸、接口类型、电源需求等技术参数。 3. **软件接口**：描述US-015与其它系统交互的方式，如API（应用程序编程...
方刚先生谈《胜于言传——网站内容制胜宝典》
csdn20150317的博客
12-25 248
我提前拿到了本书的中文校对稿，花30分钟浏览完，留下的第一印象是，这本书像教材，适合网站的编辑和UED人员阅读并备在案头不时查阅。书仅仅是带你入门，它描绘了一些基本原则和常用技巧，它永远都是过时的，你阅读它理解它并在实践中得到运...
惑不惑
weixin_33720078的博客
09-11 144
看到有人说过 四十不惑，主要是说到了这个年纪，人能看到自己能力的边界，做得了的可以选择继续做或不做，做不了的就不要做了；能想通的已经想通了，想不通的还是想不通、也就别想了。 最近自己好像隐约在思考职业化方面的问题。对于职业化，我的理解是有两种选择：一是最大化自己的价值；一是最大化自己在团队中的价值。前者是指只选择对自己有利的环境，环境能给自己带来价值大于自己能为团队带来的价值；后者则反之。当然，这...
数据结构——015括号匹配
Miracle呀的博客
05-10 105
//括号匹配 #include <iostream> #include <string> using namespace std; #define MaxSize 50 typedef char Elem; typedef struct Stack { Elem data[MaxSize]; int top; }SqStack; void init_s(SqStack &s) { s.top = -1; } bool empty_s(SqStack s) { if
015全局配置-案例：配置tabBar
qq_45448242的博客
09-14 57
配置tabBar
HiveSQL一本通 - 案例实操
lihuazaizheli的博客
03-21 1029
文章目录0.HiveSQL一本通使用说明6.综合案例练习之基础查询6.1 环境准备创建数据表数据准备加载数据6.2 简单查询练习1.查询姓名中带“山”的学生名单2.查询姓“王”老师的个数3.检索课程编号为“04”且分数小于60的学生的分数信息，结果按分数降序排列4.查询数学成绩不及格的学生信息和其对应的数学学科成绩，按照学号升序排序6.3 分组与汇总练习6.3.1 汇总练习1.查询编号为“02”的课程的总成绩6.3.2 分组练习1.查询各科成绩最高和最低的分，以如下的形式显示：课程号、最高分、最低分2.查询
linux-awk-案例100例
01-18 1662
awk案例练习100例001三级目录002三级目录003三级目录004三级目录005三级目录006三级目录007三级目录008三级目录009三级目录010三级目录011三级目录012三级目录013三级目录014三级目录015三级目录016三级目录017三级目录018三级目录019三级目录020三级目录021三级目录022三级目录023三级目录024三级目录025三级目录026三级目录027三级目录028三级目录029三级目录030三级目录031三级目录032三级目录033三级目录034三级目录035三级目录
【愚公系列】2023年11月 大数据教学课程 015-JVM字节码
时光隧道
11-28 4万+
字节码是一种中间代码形式，其设计目的是为了在不同的平台上实现跨语言的程序执行。它是一种类似于汇编语言的低级代码，使用单字节指令表示高级语言中的指令，通常以二进制形式存储。Java和Python等编程语言都采用了字节码技术，将源代码编译成字节码，然后运行时再将字节码解释成机器代码执行。这种方法既保证了跨平台性，也提高了程序的运行效率。
KM015-LR-2057_莱钢尾矿试验报告.rar
05-07
1. **尾矿处理技术**：报告可能涉及尾矿的处理方法，如干堆、湿法储存、尾矿库设计、尾矿资源化利用等。 2. **环境影响**：分析尾矿排放对水、土壤和空气的影响，以及可能的污染控制措施。 3. **安全问题**：尾矿...
015-香港新市镇发展经验.pdf
08-29
综上所述，香港新市镇的发展经验为我们提供了关于如何有效规划和管理卫星城、新城的宝贵案例。借鉴其成功的交通规划、自给自足的社区建设和均衡发展策略，我国的城市规划者可以更好地应对城市化带来的挑战，创建可...
E-015 机械臂DIY.rar
04-24
《E-015 机械臂DIY》项目是一份集创新、技术与学习于一体的资源，旨在帮助用户深入了解和实践机械臂的设计与制作。这个压缩包包含了一系列与三维图、三维模型以及设计案例相关的文件，提供了丰富的学习材料，是...
【愚公系列】2023年12月 HarmonyOS教学课程 015-ArkUI组件（Radio）
热门推荐
时光隧道
12-05 4万+
Radio单选框是一种表单元素，允许用户从一组选项中选择一个选项。它由一个圆圈和一个标签组成，用户只能选择其中一个选项。Radio单选框通常用于表单中，用于收集用户选择的信息，例如用户性别、年龄、爱好等等。
Day015--java中的多线程
码到成龚的博客
05-08 660
多线程的概述 线程的生命周期 线程的创建 Thread类 案例： Runnable接口 案例： 线程的控制 线程的挂起 join方法 状态检查 线程的优先级 线程的守护 线程的同步机制 使用同步代码块进行上锁 ​编辑使用同步方法上锁 水池排注水问题
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
--add-data 案例
05-29
--add-data 是指在使用 Python 程序时，可以通过命令行参数 --add-data 来添加额外的数据文件或目录。这些数据文件或目录将会被打包到可执行文件中，以便在程序运行时访问这些文件。 以下是一个 --add-data 的案例： 假设您有一个 Python 程序，需要访问一个名为 data.txt 的文本文件，该文件存储在您的计算机上的 /home/user/ 目录下。您可以使用以下命令行参数来添加该文件： ```python python my_program.py --add-data "/home/user/data.txt:data" ``` 这将会把 data.txt 文件打包到可执行文件中，并将其放置在程序的 data 目录下。在程序运行时，您可以使用以下代码来访问该文件： ```python import os file_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'data', 'data.txt') with open(file_path, 'r') as f: data = f.read() print(data) ``` 这样做可以确保您的程序在任何计算机上都可以访问到该文件，而无需手动将其复制到程序所在的目录下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值