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 相关文章推荐
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
常用的javascript function代码
2008/05/23 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python清空文件并替换内容的实例
2018/10/22 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Django如何实现上传图片功能
2019/08/16 Python
pytorch 预训练层的使用方法
2019/08/20 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
诚信的演讲稿范文
2014/05/12 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
政风行风整改方案
2014/10/25 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
《观察物体》教学反思
2016/02/17 职场文书
三年级作文之小小梦想
2019/12/06 职场文书