溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用JavaScript怎么實現一個碰撞檢測功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
width: 300px;
height: 300px;
background-color: green;
}
span {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100px;
height: 100px;
background-color: rgb(10, 151, 233);
}
</style>
<body>
<div></div>
<span></span>
<script>
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
span.onmousedown = function(e) {
// 事件對象兼容
e = window.event || e;
// 添加全局捕獲
if (span.setCapture) {
span.setCapture();
}
// 鼠標按下獲取鼠標距離頁面左側和頂部距離
var x = e.clientX;
var y = e.clientY;
// 元素距離頁面左側和頂部距離
var elex = span.offsetLeft;
var eley = span.offsetTop;
// 鼠標距離元素距離 =鼠標距離頁面距離 -元素距離頁面距離
var X = x - elex;
var Y = y - eley;
document.onmousemove = function(e) {
// 鼠標移動 獲取鼠標距離頁面距離
// 事件對象兼容
e = window.event || e;
var movex = e.clientX;
var movey = e.clientY;
// 元素的left和top值 =鼠標距離頁面距離 -鼠標距離元素距離
var leftx = movex - X;
var lefty = movey - Y;
/*----------------------------------------------------------*/
// 碰撞檢測
// 1.左側安全距離 =大盒子距離頁面左側距離 -小盒子占位寬
var safeleft = div.offsetLeft - span.offsetWidth;
// 2.右側安全距離 大盒子距離頁面左側距離 +大盒子占位寬
var saferight = div.offsetLeft + div.offsetWidth;
// 3.上側安全距離 =大盒子距離頁面頂部距離 -小盒子占位高
var safetop = div.offsetTop - span.offsetHeight;
// 4. 下側安全距離 = 大盒子距離頁面頂部距離 + 大盒子占位高
var safebottom = div.offsetTop + div.offsetHeight;
if (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
div.style.background = 'green';
} else {
div.style.background = 'red';
}
/*----------------------------------------------------------*/
// 邊界值
// 左
if (leftx <= 0) {
leftx = 0;
}
// 上
if (lefty <= 0) {
lefty = 0;
}
// 右
var rightx = document.documentElement.clientWidth - span.offsetWidth;
if (leftx >= rightx)
leftx = rightx;
// 下
var righty = document.documentElement.clientHeight - span.offsetHeight;
if (lefty >= righty) {
lefty = righty;
}
span.style.left = leftx + 'px';
span.style.top = lefty + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
if (span.releaseCapture) {
span.releaseCapture();
}
}
// 阻止默認事件
return false;
}
</script>
</body>
</html>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
