如何用js使小球来回弹动

最新推荐文章于 2023-06-26 17:33:27 发布
最新推荐文章于 2023-06-26 17:33:27 发布
阅读量2.3k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuyuderen_lpt/article/details/81067632
版权

一、创建一个小球和两堵墙以及按钮

	<style type="text/css">
		#box{
			width:60px;height:60px;position:absolute;left:10px;top:0px;background:#333;border-radius:50%;margin-top:80px;
		}
		#qiangL{
			width:2px;height:150px;position:absolute;left:10px;background:#999;margin-top:20px;
		}
		#qiangR{
			width:2px;height:150px;position:absolute;left:1000px;background:#999;margin-top:20px;
		}
	</style>
</head>
<body>
	<button id="btn1">开始</button>
	<button id="btn">停止</button>
	<div id="box"></div>
	<div id="qiangL"></div>
	<div id="qiangR"></div>

 

二、利用js分别找到墙和小球以及按钮的Id

 

<script type="text/javascript">
	   	// 找到小球的Id
		var o=document.getElementById('box');
		// 左边墙的Id
		var qiangL=document.getElementById('qiangL');
		// 右边墙的Id
		var qiangR=document.getElementById('qiangR');
		// 每次添加的距离
		var wd=5;
		// 求出小球的左边的距离
		var a=window.getComputedStyle(o,null).left;
		// 对左边墙的距离取整
		var b=parseInt(window.getComputedStyle(qiangL,null).left);
		// 对右边墙的距离取整
		var c=parseInt(window.getComputedStyle(qiangR,null).left);
		// 取得小球距离右边墙的距离取整
		var dq=c-parseInt(window.getComputedStyle(o,null).width);
		// 定义全局变量以后用于清理定时器
		var d;
		// 添加布尔值
		var z=true;

三、添加点击事件及小球运动的函数

// 设置开始按钮的点击事件
		document.getElementById("btn1").onclick=function(){
			// 先添加清理定时器再添加定时器防止多次点击出错
			clearInterval(d);
			d=setInterval(showleft,20);
		}
		// 设置停止按钮的点击事件
		document.getElementById("btn").onclick=function(){
			clearInterval(d);
		}
		// 定义具体函数
		function showleft(){
			// 小球的左边的距离取整
			a=parseInt(a);
			// 当z为真时小球向右运动,撞右墙时z变假,当z为假时小球向左运动,撞左墙时z变真便可无限循环
			if(z==true){
				if(a<dq){
					a=a+wd;
					o.style.left=a+"px";
				}else{
					z=false;
				}
		    }else{
		    	if(a==b){
		    		z=true;
				}else{
					a=a-wd;
					o.style.left=a+"px";
				}
		    }
		}
	</script>

总体代码为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width:60px;height:60px;position:absolute;left:10px;top:0px;background:#333;border-radius:50%;margin-top:80px;
		}
		#qiangL{
			width:2px;height:150px;position:absolute;left:10px;background:#999;margin-top:20px;
		}
		#qiangR{
			width:2px;height:150px;position:absolute;left:1000px;background:#999;margin-top:20px;
		}
	</style>
</head>
<body>
	<button id="btn1">开始</button>
	<button id="btn">停止</button>
	<div id="box"></div>
	<div id="qiangL"></div>
	<div id="qiangR"></div>
	<script type="text/javascript">
	   	// 找到小球的Id
		var o=document.getElementById('box');
		// 左边墙的Id
		var qiangL=document.getElementById('qiangL');
		// 右边墙的Id
		var qiangR=document.getElementById('qiangR');
		// 每次添加的距离
		var wd=5;
		// 求出小球的左边的距离
		var a=window.getComputedStyle(o,null).left;
		// 对左边墙的距离取整
		var b=parseInt(window.getComputedStyle(qiangL,null).left);
		// 对右边墙的距离取整
		var c=parseInt(window.getComputedStyle(qiangR,null).left);
		// 取得小球距离右边墙的距离取整
		var dq=c-parseInt(window.getComputedStyle(o,null).width);
		// 定义全局变量以后用于清理定时器
		var d;
		// 添加布尔值
		var z=true;
		// 设置开始按钮的点击事件
		document.getElementById("btn1").onclick=function(){
			// 先添加清理定时器再添加定时器防止多次点击出错
			clearInterval(d);
			d=setInterval(showleft,20);
		}
		// 设置停止按钮的点击事件
		document.getElementById("btn").onclick=function(){
			clearInterval(d);
		}
		// 定义具体函数
		function showleft(){
			// 小球的左边的距离取整
			a=parseInt(a);
			// 当z为真时小球向右运动,撞右墙时z变假,当z为假时小球向左运动,撞左墙时z变真便可无限循环
			if(z==true){
				if(a<dq){
					a=a+wd;
					o.style.left=a+"px";
				}else{
					z=false;
				}
		    }else{
		    	if(a==b){
		    		z=true;
				}else{
					a=a-wd;
					o.style.left=a+"px";
				}
		    }
		}
	</script>
</body>
</html>

易错点：1、点击时没清理定时器导致多次点击出bug。

               2、没考虑到布尔类型的运用

 

 

 

 

 

wuyuderen_lpt
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小球回弹运动
SunsetGirl的博客
05-07 208
一、让小球在一个范围内直线运动，遇到边界则返回 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia...
js模拟小球重力回弹效果
PublicStatic0816的博客
09-01 850
.cont{ width: 1000px; height: 600px; background: #eee; margin: 20px auto; position: relative; } .box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;} // 目标...
CSS小球下落回弹动画效果
qq_44675204的博客
05-04 1093
使用CSS动画属性完成小球回弹动画效果
js实现网页回弹小球效果
soberw的日常分享博客
11-17 885
运行页面会首先弹出一个输入框，询问用户想要产生的小球数量，随后后台就会产生指定数量的小球，在页面中来回跳动，触碰到页面边框时，就会回弹，且产生的小球颜色随机，小球在页面中的位置随机，小球运行的速度随机。
2021-09-07通过JavaScript实现小球重力回弹效果
m0_52217128的博客
09-07 306
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> .cont{ width:1000px; height:600px; background:#eee; margin:20pxauto; ...
canvas动画——弹跳小球
m0_67880202的博客
04-01 514
canvas动画
【css】小球回弹效果
qq_63806300的博客
06-26 1029
虽然看起来没有问题，实际上问题在于小球的速度是一样的，而实际上小球具有加速度，小球随着时间的变化速度也会不同，通过设置ease-in和ease-out虽然可以模拟减速和加速，但与实际相比还是有差别。具体的参数可以通过浏览器调试。
js运动 小球在页面内回弹
kkm486622296的博客
01-30 2098
html> html> head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> #div{ width: 100px;height: 100px;background-color: #ff0000;position: absolute;
【小河今学 | JavaScript】小球弹跳
LB_laber的博客
08-08 665
JavaScript实现小球弹跳
HTML5 使用canvas画布做小球回弹动画
05-14
本教程将深入探讨如何使用HTML5的canvas画布来创建一个小球回弹的动画。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并为其指定ID，以便于JavaScript代码中引用： ```html <!DOCTYPE html> <title>...
Js实现简单的小球运动特效
10-22
主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下
小球的随机运动
10-23
至于标签中的"js动"，指的是JavaScript驱动的动画，也就是通过JavaScript控制每一帧的变化，实现动态效果。"Html5 Canvas"、"setInterval"和"小球"则明确了这个项目的主要技术点和实现方式。 总结，"小球的随机运动...
JS.zip_js 小球_运动边框
09-20
总的来说，"JS.zip_js 小球_运动边框"项目是一个很好的实践，它涵盖了JavaScript动画、事件处理、碰撞检测等基础技能，对于初学者来说是学习和理解这些概念的好例子。同时，这个项目也为进阶开发者提供了扩展和优化...
js前端画布实现动画小球自由落体
05-05
在JavaScript中，我们可以使用`requestAnimationFrame`函数来创建动画，它会在浏览器准备好再次进行渲染时调用指定的回调函数。以下是一个简化的JavaScript实现： ```javascript const canvas = document....
基于贝叶斯网络BO-Transformer-BiLSTM实现负荷数据回归预测附matlab代码.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
易语言 - 易语言我的世界3D源码
最新发布
07-27
易语言我的世界3D源码
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-pp310-pypy310_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
小球来回弹
05-29
要实现小球来回弹的效果，可以在 Ball 类中添加一个速度向量，用它来表示小球的移动方向和速度。当小球碰到窗口的边界时，它的速度方向需要被反转，即横向速度取反或纵向速度取反。 以下是一个简单的示例代码，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值