碰撞运动

最新推荐文章于 2022-09-03 13:56:39 发布
最新推荐文章于 2022-09-03 13:56:39 发布
阅读量373 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangqling/article/details/84635838
版权

1、点击开始运动，盒子开始运动，碰到/超出可是区范围，盒子返回来运动。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>碰撞运动</title>
	<style>
		#div1{
			width: 260px;
			height: 160px;
			background: url(pz.jpg) center center / cover no-repeat;
			position: absolute;
			left: 130px;
		}
	</style>
	<script>
		var iSpeedX=5;
		var iSpeedY=6;
		var timer=null;
		window.onload=function(){
			var oDiv=document.getElementById("div1");
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				startMove(oDiv);
			}
		}
		function startMove(obj){
			clearInterval(timer);
			timer=setInterval(function(){
				var l=obj.offsetLeft+iSpeedX;
				var t=obj.offsetTop+iSpeedY;
				if (l>document.documentElement.clientWidth-obj.offsetWidth) {
					iSpeedX*=-1;
					l=document.documentElement.clientWidth-obj.offsetWidth;
				}
				else if(l<0){
					iSpeedX*=-1;
				}
				if (t>document.documentElement.clientHeight-obj.offsetHeight) {
					iSpeedY*=-1;
					t=document.documentElement.clientHeight-obj.offsetHeight;
				}
				else if(t<0){
					iSpeedY*=-1;
				}

				obj.style.left=l+'px';
				obj.style.top=t+'px';
			},30);
		}
	</script>
</head>
<body>
	<div id="div1"></div>
	<input type="button" value="点击开始运动" id="btn">
</body>
</html>

结果展示：

 

 

 

qianlingvip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
matlab中小球从高处落下不停碰撞的运动
01-10
看到的一个matlab编的小球从高处落下不停碰撞的运动 感觉很好玩 大家可以看看
C++小动画，两个小球在桌面碰撞
06-09
C++,动画，小球碰撞，C++小动画
动画特效七：碰撞动画
秋恨雪
07-23 4320
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。这一节讲述的动画效果是碰撞动画，就是模拟或者仿真现实物体的碰撞效果。先看看效果图。动画效果分析：1. 有两个形式一样的View（自己和对手），所以我们可以考虑直接封装一个View。2. 注意到View的里面的图片及边框的圆形都有可能变成椭圆。所以使用View的block方式实现这个效果有点不可靠。...
基于c++，OpenGL渲染的碰撞游戏
Javalllq的博客
06-22 1477
基于c++，OpenGL渲染的碰撞 标明（本文章并非完全原创，整理自（https://learnopengl.com） 一：准备工作： 安装opengl渲染库，SQIL库，并且进行相关文件路径设置工作，具体过程就不详细叙述了。 写好基本框架： 首先定义一个游戏类，它会包含所有相关的渲染和游戏代码 游戏类封装了一个初始化函数，一个更新函数，一个处理输入函数以及一个渲染函数 class Game { public: // 游戏状态 GameState Sta
13c++呵呵老师【pawn移动组件与碰撞】
zhang2362167998的博客
09-03 697
pawn移动组件与碰撞
c++ 2D小球 碰撞模拟
带带我咯的博客
07-30 1880
一个简单的2D小球碰撞模拟程序，代码不长主程序90多行。 全部用c++实现，借助easyx绘图，同时实现简单向量类便于计算 (默认小球质量相同 大小相同)。 #include <iostream> #include <easyx.h> #include <conio.h> #include <algorithm> #include <vector> #include <cmath> #include <stdlib.h>.
JS碰撞运动实现方法详解
10-20
主要介绍了JS碰撞运动实现方法,详细分析了碰撞运动的原理及相应的javascript实现技巧,需要的朋友可以参考下
论文研究-汽车刚性碰撞运动模型研究 .pdf
08-19
汽车刚性碰撞运动模型研究，刘长征，徐磊，目的 在动力学和刚度分析基础上，研究车辆碰撞检测方法，确定车辆碰撞前后运动状态，建立二维碰撞运动模型。 方法 根据事故现场痕
js实现碰撞运动
05-30
js实现碰撞运动，有详细的中文注释，便于初学者掌握原理
HTML5 Canvas彩色小球碰撞运动特效特效代码
03-20
在这个“HTML5 Canvas彩色小球碰撞运动特效”中，我们看到的是利用Canvas API实现的一个视觉效果，其中包含多个彩色小球在画布上进行碰撞运动。 首先，Canvas API提供了基本的绘图命令，如`fillRect`用于填充矩形，...
matlab 物体碰撞模型论文
07-02
用 matlab 做的物体碰撞模型 的论文
一个小球自由碰撞的项目源码
06-09
这是一个小球自由碰撞的程序！简单易懂！适合初学者！是一个简单入手的小游戏！
javafx小球移动
12-10
可以点击上下左右使小球移动，并且不超出界面。。。。
Java实现小球碰撞检测
09-04
Java 小球碰撞 碰撞检测 碰撞引擎，看了一些网上的例子，然后实现了一种小球碰撞的算法，是使用平面向量和冲量守恒完成的。
运动物体碰撞算法演示【转】
feihuadao的专栏
11-06 1652
1,test.js代码var getFlag=function (id) { return document.getElementById(id); //获取元素引用 } var extend=function(des, src) { for (p in src) { des[p]=src[p]; } return des; } var clss=['
JavaFX、合并碰撞的弹球
m0_62659797的博客
08-09 299
代码】JavaFX、合并碰撞的弹球。
js点击按钮两个盒子碰撞运动代码
最新发布
03-24
以下是一个简单的 JavaScript 代码示例，可以实现点击按钮后两个盒子之间的碰撞运动： HTML 代码： ```html <button id="btn">点击开始运动</button> <div id="box1"></div> <div id="box2"></div> ``` CSS 代码： ```css #box1, #box2 { width: 50px; height: 50px; background-color: red; position: absolute; top: 50px; left: 50px; } #box2 { background-color: blue; top: 100px; left: 100px; } ``` JavaScript 代码： ```javascript var btn = document.getElementById('btn'); var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); btn.onclick = function() { var speed1 = 5; // 盒子1的速度 var speed2 = -3; // 盒子2的速度 var timer = setInterval(function() { var left1 = box1.offsetLeft + speed1; var top1 = box1.offsetTop; var left2 = box2.offsetLeft + speed2; var top2 = box2.offsetTop; if (left1 + box1.offsetWidth >= left2 && left1 <= left2 + box2.offsetWidth && top1 + box1.offsetHeight >= top2 && top1 <= top2 + box2.offsetHeight) { // 碰撞后反弹 speed1 = -speed1; speed2 = -speed2; } if (left1 <= 0 || left1 + box1.offsetWidth >= document.documentElement.clientWidth) { // 盒子1到达边界后反弹 speed1 = -speed1; } if (left2 <= 0 || left2 + box2.offsetWidth >= document.documentElement.clientWidth) { // 盒子2到达边界后反弹 speed2 = -speed2; } box1.style.left = left1 + 'px'; box2.style.left = left2 + 'px'; }, 30); }; ``` 这段代码中，我们首先获取了按钮和两个盒子的 DOM 元素，然后给按钮添加了一个点击事件处理函数。在事件处理函数中，我们定义了两个变量 speed1 和 speed2，分别表示盒子1和盒子2的速度。然后使用 setInterval 函数来不断更新盒子的位置，实现运动效果。在更新位置的过程中，我们判断两个盒子是否发生了碰撞，如果发生了碰撞，则让它们反弹。同时，我们还判断盒子是否到达了边界，如果到达了边界，则让它们反弹。最后，我们将盒子的位置更新到 DOM 中，完成了碰撞运动的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值