Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

WAPG 5 Collision Hit Detection DOM Programming JavaScript Tutorial

Learn collision and hit detection in the DOM. The DOM is the normal development environment. We already made collision and hit detection tutorials for the HTML5 canvas in my Canvas Bootcamp playlist, which you can find on my channel any time you want.

Example A <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #player { position: absolute; top: 50px; left: 20px; background: #FC0; width: 50px; height: 50px; } #thing1 { position: absolute; top: 75px; left: 200px; background: #06C; width: 25px; height: 25px; } </style> <script> // Initialize some variables that our program will use var reqID, dir; var p, t, pw, ph, px, py, tw, th, tx, ty; // This function will be set to repeat very fast function detectCollisions(){ // Access the current location and dimension of both objects pw = p.offsetWidth; ph = p.offsetHeight; px = p.offsetLeft; py = p.offsetTop; tw = t.offsetWidth; th = t.offsetHeight; tx = t.offsetLeft; ty = t.offsetTop; // Check to see if player has intersected with thing1 in any direction if((px+pw) > tx && px < (tx+tw) && (py+ph) > ty && py < (ty+th)){ // Do anything you want in the program when collision is detected console.log("Collision detected"); document.body.removeChild(t); } // This makes the detectCollisions() function repeat very quickly window.requestAnimationFrame(detectCollisions); } // This function simply changes the direction the object will move function changeDir(d) { dir = d; } // This function moves the player(thing1) function startAnimation() { if( dir == "right" ) { p.style.left = (p.offsetLeft += 2) + 'px'; } else if( dir == "left" ) { p.style.left = (p.offsetLeft -= 2) + 'px'; } reqID = window.requestAnimationFrame(startAnimation); } function stopAnimation() { window.cancelAnimationFrame(reqID); } // The window load event fires this function // This function is where you get everything ready in the program after document is fully loaded function docReady(){ // Get object references for elements we are scripting against p = document.getElementById("player"); t = document.getElementById("thing1"); // Start up the collision detection function detectCollisions(); } // The window load event listener window.addEventListener("load", docReady); </script> </head> <body> <div id="player"></div> <div id="thing1"></div> <button onmousedown="changeDir('left'); startAnimation()" onmouseup="stopAnimation()">Left</button> <button onmousedown="changeDir('right'); startAnimation()" onmouseup="stopAnimation()">Right</button> </body> </html> Example B <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #player { position: absolute; top: 50px; left: 20px; background: #FC0; width: 50px; height: 50px; } .things { position: absolute; top: 75px; background: #06C; width: 25px; height: 25px; } #thing1 { left: 200px; } #thing2 { left: 300px; } #thing3 { left: 400px; } </style> <script> // Initialize some variables that our program will use var reqID, dir; var p, t, pw, ph, px, py, tw, th, tx, ty; // This function will be set to repeat very fast function detectCollisions(){ /* Loop over the array to access each element in - the array one by one in succession */ for(i = 0; i < t.length; i++){ // Access the current location and dimension of both objects pw = p.offsetWidth; ph = p.offsetHeight; px = p.offsetLeft; py = p.offsetTop; tw = t[i].offsetWidth; th = t[i].offsetHeight; tx = t[i].offsetLeft; ty = t[i].offsetTop; // Check to see if player has intersected with this element in any direction if((px+pw) > tx && px < (tx+tw) && (py+ph) > ty && py < (ty+th)){ // Do anything you want in the program when collision is detected console.log("Collision detected with "+t[i].id); document.body.removeChild(t[i]); } } // This makes the detectCollisions() function repeat very quickly window.requestAnimationFrame(detectCollisions); } // This function simply changes the direction the object will move function changeDir(d) { dir = d; } // This function moves the player(thing1) function startAnimation() { if( dir == "right" ) { p.style.left = (p.offsetLeft += 2) + 'px'; } else if( dir == "left" ) { p.style.left = (p.offsetLeft -= 2) + 'px'; } reqID = window.requestAnimationFrame(startAnimation); } function stopAnimation() { window.cancelAnimationFrame(reqID); } // The window load event fires this function // This function is where you get everything ready in the program after document is fully loaded function docReady(){ // Get object references for elements we are scripting against p = document.getElementById("player"); t = document.getElementsByClassName("things"); // Start up the collision detection function detectCollisions(); } // The window load event listener window.addEventListener("load", docReady); </script> </head> <body> <div id="player"></div> <div id="thing1" class="things"></div> <div id="thing2" class="things"></div> <div id="thing3" class="things"></div> <button onmousedown="changeDir('left'); startAnimation()" onmouseup="stopAnimation()">Left</button> <button onmousedown="changeDir('right'); startAnimation()" onmouseup="stopAnimation()">Right</button> </body> </html>
thumb

JavaScript Videos

Web Animation Programming Guide

WAPG 1 Transition Animation Programming CSS JavaScriptWAPG 2 keyframes Animation Programming CSS JavaScriptWAPG 3 Sprite Animation Programming CSS JavaScriptWAPG 4 Script Based Animation Programming JavaScript CSS TutorialWAPG 5 Collision Hit Detection DOM Programming JavaScript Tutorial