js實(shí)現(xiàn)拖拽與碰撞檢測(cè)
本文實(shí)例為大家分享了js實(shí)現(xiàn)拖拽與碰撞檢測(cè)的具體代碼，供大家參考，具體內(nèi)容如下
拖拽
原理分析
對(duì)于拖拽一個(gè)div盒子，首先我們需要將鼠標(biāo)移動(dòng)到盒子上，然后按住鼠標(biāo)左鍵，移動(dòng)鼠標(biāo)到目標(biāo)位置，再松開鼠標(biāo)，對(duì)于這一過(guò)程的分析，
顯然需要三個(gè)鼠標(biāo)事件：
按住鼠標(biāo)：onmousedown 移動(dòng)鼠標(biāo)：onmousemove 松開鼠標(biāo)：onmouseup實(shí)現(xiàn)步驟
1、**鼠標(biāo)按下時(shí)：**我們獲取鼠標(biāo)當(dāng)前所在的位置距離頁(yè)面左邊界與上邊界的距離，分別減去盒子距離頁(yè)面左邊界與上邊界的值，這樣我們
就得到了鼠標(biāo)距離盒子左邊界與上邊界的值；
2、**鼠標(biāo)移動(dòng)時(shí)：**我們重新獲取此時(shí)鼠標(biāo)距離頁(yè)面左邊界與上邊界的值，再用它們減去步驟一中得到的鼠標(biāo)距離盒子左邊界與上邊界的
值，將得到的值重新賦給盒子，這樣盒子就能與鼠標(biāo)保持相對(duì)靜止，在頁(yè)面上移動(dòng)；
3、**松開鼠標(biāo)時(shí)：**將鼠標(biāo)移動(dòng)事件清除。
實(shí)現(xiàn)代碼
var oDiv = document.getElementById(’box2’); oDiv.onmousedown = function(ev){ var e = ev||window.event; var offsetX = e.clientX - oDiv.offsetLeft; var offsetY = e.clientY - oDiv.offsetTop; document.onmousemove = function(ev){ var e = ev||window.event; var l =e.clientX-offsetX; var t = e.clientY- offsetY;if(l<=0){ l=0; } if(t<=0){ t=0; } var windowWidth =document.documentElement.clientWidth||document.body.clientWidth; if(l>=windowWidth-oDiv.offsetWidth){ l=windowWidth-oDiv.offsetWidth; } var windowHeight = document.documentElement.clientHeight||document.body.clientHeight if(t>=windowHeight-oDiv.offsetHeight){ t=windowHeight-oDiv.offsetHeight; } oDiv.style.left = l + 'px'; oDiv.style.top = t + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; }
碰撞檢測(cè)
原理分析
js中碰撞檢測(cè)在應(yīng)用于制作一些小游戲，如飛機(jī)大戰(zhàn)、打磚塊、貪吃蛇等，那么如何實(shí)現(xiàn)碰撞檢測(cè)呢？
對(duì)于兩個(gè)矩形方塊之間的碰撞，如果直接思考如何書寫代碼檢測(cè)它們之間有沒(méi)有發(fā)生接觸，這是一個(gè)比較難的事情，我們可以換一個(gè)思路，
找出它們沒(méi)有發(fā)生碰撞得情況，排除這些情況，那么剩余的情況必然是發(fā)生了碰撞。
如下圖，檢測(cè)方塊a與b之間是否發(fā)生碰撞，我們可以分別獲取a與b的上、下邊的top值，左右邊的left值，那么以下四種情況是沒(méi)有發(fā)生碰撞的:
不會(huì)發(fā)生碰撞的4種情況：
1、a左>b右2、a上>b下3、a右<b左4、a下<b上
a左：a.offsetLeft;a右：a.offsetLeft + a.offsetWidth;a上：a.offsetTop;a下：a.offsetTop+a.offsetHeight;b左：b.offsetLeft;b右： b.offsetLeft + b.offsetWidth;b上：b.offsetTop;b下： b.offsetTop+b.offsetHeight;
只要發(fā)生了上面四種情況任意一種，那么就沒(méi)有碰撞：
實(shí)現(xiàn)代碼
function knock(node1,node2){ var l1 = node1.offsetLeft; var r1 = node1.offsetLeft + node1.offsetWidth; var t1 = node1.offsetTop; var b1 = node1.offsetTop+node1.offsetHeight; var l2 = node2.offsetLeft; var r2 = node2.offsetLeft + node2.offsetWidth; var t2 = node2.offsetTop; var b2 = node2.offsetTop+node2.offsetHeight; if(l2>r1||r2<l1||t2>b1||b2<t1){ return false; }else{ return true; } }
拖拽與碰撞完整代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> #box1{ width: 100px;height: 100px;position: absolute; top: 200px;left: 250px;background-color: blueviolet; } #box2{ width: 100px;height: 100px;position: absolute; top: 400px;left: 550px;background-color: salmon; } </style></head><body> <div id='box1'></div> <div id='box2'></div> <script> var box11 = document.getElementById('box1') var box21 = document.getElementById('box2')if(knock(box21,box11)){ box1.style.backgroundColor='blue'; }else{ box1.style.backgroundColor='grey'; }function knock(node1,node2){ var l1 = node1.offsetLeft; var r1 = node1.offsetLeft + node1.offsetWidth; var t1 = node1.offsetTop; var b1 = node1.offsetTop+node1.offsetHeight; var l2 = node2.offsetLeft; var r2 = node2.offsetLeft + node2.offsetWidth; var t2 = node2.offsetTop; var b2 = node2.offsetTop+node2.offsetHeight; if(l2>r1||r2<l1||t2>b1||b2<t1){return false; }else{return true; } } var oDiv = document.getElementById(’box2’); oDiv.onmousedown = function(ev){ var e = ev||window.event; var offsetX = e.clientX - oDiv.offsetLeft; var offsetY = e.clientY - oDiv.offsetTop; document.onmousemove = function(ev){var e = ev||window.event;var l =e.clientX-offsetX;var t = e.clientY- offsetY;if(knock(box21,box11)){ box1.style.backgroundColor='blue';}else{ box1.style.backgroundColor='grey';}if(l<=0){ l=0;}if(t<=0){ t=0;}var windowWidth =document.documentElement.clientWidth||document.body.clientWidth;if(l>=windowWidth-oDiv.offsetWidth){ l=windowWidth-oDiv.offsetWidth;}var windowHeight = document.documentElement.clientHeight||document.body.clientHeightif(t>=windowHeight-oDiv.offsetHeight){ t=windowHeight-oDiv.offsetHeight;}oDiv.style.left = l + 'px';oDiv.style.top = t + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; } </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Java之JSP教程九大內(nèi)置對(duì)象詳解(中篇)2. 基于python計(jì)算滾動(dòng)方差(標(biāo)準(zhǔn)差)talib和pd.rolling函數(shù)差異詳解3. CSS自定義滾動(dòng)條樣式案例詳解4. JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖5. 詳解CSS不定寬溢出文本適配滾動(dòng)6. 基于android studio的layout的xml文件的創(chuàng)建方式7. 使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果8. 詳解Python中openpyxl模塊基本用法9. Java發(fā)送http請(qǐng)求的示例(get與post方法請(qǐng)求)10. springboot基于Redis發(fā)布訂閱集群下WebSocket的解決方案
網(wǎng)公網(wǎng)安備