JS實現(xiàn)碰撞檢測效果
更新時間：2020年03月12日 10:48:54 作者：李尚書
這篇文章主要為大家詳細介紹了JS實現(xiàn)碰撞檢測效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)碰撞檢測效果的具體代碼，供大家參考，具體內(nèi)容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#all{
width: 500px;
height: 500px;
border: 2px solid sandybrown;
position: relative;
margin: 0 auto;
}
#div1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
#center{
width: 150px;
height: 150px;
background-color: black;
position: absolute;
margin: 175px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1"></div>
<div id="center"></div>
</div>
<script type="text/javascript">
var oAll = document.getElementById("all");
var oDiv1 = document.getElementById("div1");
var oCenter = document.getElementById("center");
var maxL = oAll.clientWidth - oDiv1.clientWidth;
var maxT = oAll.clientHeight - oDiv1.clientHeight;
oDiv1.onmousedown = function(){
var ev = ev || window.event;
var lessX = ev.clientX - oDiv1.offsetLeft;
var lessY = ev.clientY - oDiv1.offsetTop;
document.onmousemove = function(){
var ev = ev || window.event;
var posL = ev.clientX - lessX;
var posT = ev.clientY - lessY;
if(oCenter.offsetLeft-oDiv1.offsetWidth<posL && posL<325 && oCenter.offsetLeft-oDiv1.offsetWidth<posT && posT<325 ){
oCenter.style.backgroundColor = "red"
}else{
oCenter.style.backgroundColor = "black"
}
if(posL<0){
posL = 0;
}
if(posT<0){
posT = 0;
}
if(posL>maxL){
posL = maxL;
}
if(posT>maxT){
posT = maxT;
}
oDiv1.style.left = posL + "px";
oDiv1.style.top = posT + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
oDiv1.onmousemove = null;
}
</script>
</body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)頁面跳轉(zhuǎn)的幾種方式，需要的朋友可以參考下。2010-11-11
本篇文章主要是對javascript頁面加載完執(zhí)行事件的代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Bootstrap每天必學(xué)之日期控制，對Bootstrap日期控制感興趣的小伙伴們可以參考一下2016-03-03
video.js 實現(xiàn)視頻只能后退不能快進的思路詳解
這篇文章主要介紹了video.js 實現(xiàn)視頻只能后退不能快進的思路詳解，主要思路是點擊進度條需要獲取拖動前的時間點，具體實例代碼大家跟隨小編一起看看吧2018-08-08
閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。相信很少有人能直接看懂這句話，因為他描述的太學(xué)術(shù)。其實這句話通俗的來說就是：JavaScript中所有的function都是一個閉包。2015-04-04
這篇文章主要介紹了webpack模塊加載器兼打包工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)煙花效果，實現(xiàn)鼠標點擊出現(xiàn)模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了使用jquery解析XML的方法,代碼簡潔實用,需要的朋友可以參考下2014-09-09
JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法實例總結(jié)
這篇文章主要介紹了JS獲取子節(jié)點、父節(jié)點和兄弟節(jié)點的方法,結(jié)合實例形式總結(jié)分析了JavaScript針對子節(jié)點、父節(jié)點和兄弟節(jié)點獲取相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了如何通過JS實現(xiàn)轉(zhuǎn)碼與解碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02