碰撞檢測

目錄

代碼實例

<div style='background: #334;width: 100px;height: 100px;position: absolute;cursor: move;z-index: 999;'></div><div style='background: green;width: 100px;height: 100px;position: absolute;top: 200px;left: 500px;'></div>(function () {var dragging = falsevar boxX, boxY, mouseX, mouseY, offsetX, offsetYvar 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.offsetLeftboxY = box.offsetTop// 獲取元素box2所在的坐標box2X = box2.offsetLeftbox2Y = box2.offsetTop// 獲取鼠標所在的坐標mouseX = parseInt(getMouseXY(e).x)mouseY = parseInt(getMouseXY(e).y)// 鼠標相對元素左和上邊緣的坐標offsetX = mouseX - boxXoffsetY = mouseY - boxY}// 鼠標移動調用的函數function move(e){if (dragging) {// 獲取移動后的元素的坐標var x = getMouseXY(e).x - offsetXvar y = getMouseXY(e).y - offsetY// 計算可移動位置的大小， 保證元素不會超過可移動范圍var width = document.documentElement.clientWidth - box.offsetWidthvar 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 = 0e = e || window.eventif (e.pageX) {x = e.pageXy = e.pageY} else {x = e.clientX + document.body.scrollLeft - document.body.clientLefty = 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 碰撞檢測的資料請關注好吧啦網其它相關文章！