Native JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel)

Das Folgende ist die Methode, die ich für Sie zusammengestellt habe, um natives JS zur Bestimmung von Kollisionen zu implementieren.

HTML-Seitencode:

<div id="d1"></div>  
<div id="d2"></div>

CSS-Seitencode:

<style type="text/css">  
        * {  
            padding: 0px;  
            margin: 0px;  
         }  
        #d1{  
            width: 100px;  
            height: 100px;  
            background: red;  
            position: absolute;  
        }  
        #d2{  
            width: 200px;  
            height: 200px;  
            background: yellow;  
            position: absolute;  
            top: 200px;  
            left: 400px;  
            position: absolute;  
        }  
</style>

JS-Seitencode:

<script type="text/javascript">  
    div=document.querySelectorAll("div");   
function hit(obj){  
    obj.onmousedown=function(e){  
        var e=e||window.event;  
        var dX=e.offsetX;  
        var dY=e.offsetY;  
        document.onmousemove=function(e){  
            var x=e.clientX;  
            var y=e.clientY;  
            obj.style.left=x-dX+"px";  
            obj.style.top=y-dY+"px";  
            if(div[0].offsetTop+div[0].offsetHeight>=div[1].offsetTop && div[0].offsetTop<=div[1].offsetTop+div[1].offsetHeight && div[0].offsetLeft+div[0].offsetWidth>=div[1].offsetLeft && div[0].offsetLeft<=div[1].offsetLeft+div[1].offsetWidth){  
                console.log("你撞我了！再撞一个试试！")  
            };  
    }  
    document.onmouseup=function(){  
        document.onmousemove=null;  
    }  
}     
}  
hit(div[0]);  
hit(div[1]);  
</script>

Das Obige ist was Ich habe eine Methode zusammengestellt, mit der Sie Kollisionen in Ihrem nativen JS ermitteln können. Ich hoffe, dass sie Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Einfache Bedienung des JS-Download-Dateistreams (Code angehängt)

Verifizierungscode in js generieren und überprüfen (Enthält Code, einfach und grob, Unterricht und Schulung inklusive)

Über einfache Aufrufe zum Abrufen von JSON-Daten in JS (Code angehängt, einfach und grob)

Das obige ist der detaillierte Inhalt vonNative JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!