js 实现碰撞检测的示例


Posted in Javascript onOctober 28, 2020

碰撞检测

目录

  • 代码实例
  • 与简易拖拽的差异
  • 下载源码链接 

代码实例

<div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;z-index: 999;"></div>
<div id="box2" style="background: green;width: 100px;height: 100px;position: absolute;top: 200px;left: 500px;"></div>

(function () {
	var dragging = false
	var boxX, boxY, mouseX, mouseY, offsetX, offsetY
	var box = document.getElementById('box')
	var box2 = document.getElementById('box2')
	var box2X, box2Y

	// 鼠标按下的动作
	box.onmousedown = down
	// 鼠标的移动动作
	document.onmousemove = move
	// 释放鼠标的动作
	document.onmouseup = up

	// 鼠标按下后的函数,e为事件对象
	function down(e) {
		dragging = true
		
		// 获取元素所在的坐标
		boxX = box.offsetLeft
		boxY = box.offsetTop

		// 获取元素box2所在的坐标
		box2X = box2.offsetLeft
		box2Y = box2.offsetTop

		// 获取鼠标所在的坐标
		mouseX = parseInt(getMouseXY(e).x)
		mouseY = parseInt(getMouseXY(e).y)

		// 鼠标相对元素左和上边缘的坐标
		offsetX = mouseX - boxX
		offsetY = mouseY - boxY
	}

	// 鼠标移动调用的函数
	function move(e){
		if (dragging) {
			// 获取移动后的元素的坐标
			var x = getMouseXY(e).x - offsetX
			var y = getMouseXY(e).y - offsetY

			// 计算可移动位置的大小, 保证元素不会超过可移动范围
			var width = document.documentElement.clientWidth - box.offsetWidth
			var height = document.documentElement.clientHeight - box.offsetHeight

			// min方法保证不会超过右边界,max保证不会超过左边界
			x = Math.min(Math.max(0, x), width)
			y = Math.min(Math.max(0, y), height)

			// 给元素及时定位
			box.style.left = x + 'px'
			box.style.top = y + 'px'

			// 碰撞检测
			// x坐标值的范围判断,y坐标值的范围判断
			var judge_x = (x >= box2X - box2.offsetWidth) && (x <= box2X + box2.offsetWidth)
			var judge_y = (y >= box2Y - box2.offsetHeight) && (y <= box2Y + box2.offsetHeight)
			if (judge_x && judge_y) {
				console.log("碰撞到")
			}
		}
	}

	// 释放鼠标的函数
	function up(e){
		dragging = false
	}

	// 函数用于获取鼠标的位置
	function getMouseXY(e){
		var x = 0, y = 0
		e = e || window.event
		
		if (e.pageX) {
			x = e.pageX
			y = e.pageY
		} else {
			x = e.clientX + document.body.scrollLeft - document.body.clientLeft
			y = e.clientY + document.body.scrollTop - document.body.clientTop
		}
		return {
			x: x,
			y: y
		}
	}
})()

与简易拖拽的差异

碰撞检测

// 碰撞检测
// x坐标值的范围判断,y坐标值的范围判断
var judge_x = (x >= box2X - box2.offsetWidth) && (x <= box2X + box2.offsetWidth)
var judge_y = (y >= box2Y - box2.offsetHeight) && (y <= box2Y + box2.offsetHeight)
if (judge_x && judge_y) {
	console.log("碰撞到")
}

下载源码链接

星辉的Github

以上就是js 实现碰撞检测的示例的详细内容,更多关于js 碰撞检测的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
JS图片预加载插件详解
Jun 21 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 #Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP重载基础知识回顾
2020/09/10 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python实现定时播放mp3
2015/03/29 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
django中的图片验证码功能
2019/09/18 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
施工资料员的岗位职责
2013/12/22 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
大学生就业策划书范文
2014/04/04 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers