// GLOBAL VARIABLES. var reqID; // for requestAnimationFrame var dir; // for controls directions var collected = 0; // for keeping track of the amount of dragonballs collected var controls; // for arrow controls var w = window.innerWidth; var h = window.innerHeight; // Polyfill Fix - to be able to use requestAnimationFrame in any browser var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame; // OBJECT VARIABLES. // For the player itself, its x and y positions, its width and height var p, px, py, pw, ph; // For the dragon ball itself, its x and y positions, its width and height var b, bx, by, bw, bh; // DOCUMENT READY FUNCTION. // Get all resources ready after document is fully loaded window.onload = function docReady(){ // Object references for player Goku, array of dragonballs called 'db' class and the arrow controls p = document.getElementById('goku'); b = document.getElementsByClassName('db'); controls = document.getElementById('controls_wrapper'); // Empty array to hold random numbers from 0 to 300 var arrPos = []; // 'for' loop that creates random numbers and adds them to the 'arrPos' array for (var i=0; i<7; i++) { arrPos.push(Math.floor(Math.random() * 300)); } // Random css 'left' property values assigned to dragonballs' x position b[0].style['left'] = arrPos[0] + 'px'; b[1].style['left'] = arrPos[1] + 'px'; b[2].style['left'] = arrPos[2] + 'px'; b[3].style['left'] = arrPos[3] + 'px'; b[4].style['left'] = arrPos[4] + 'px'; b[5].style['left'] = arrPos[5] + 'px'; b[6].style['left'] = arrPos[6] + 'px'; // Random css 'top' property values assigned to dragonballs' y position b[0].style['top'] = arrPos[6] + 'px'; b[1].style['top'] = arrPos[5] + 'px'; b[2].style['top'] = arrPos[4] + 'px'; b[3].style['top'] = arrPos[3] + 'px'; b[4].style['top'] = arrPos[2] + 'px'; b[5].style['top'] = arrPos[1] + 'px'; b[6].style['top'] = arrPos[0] + 'px'; // Start up detectCollisions() so it's permanentely detecting colissions detectCollisions(); } // DOM COLLISION HIT DETECTION FUNCTION. function detectCollisions(){ // Create a 'for' loop to go over the array and access each dragon ball element for(i=0; i < b.length; i++){ // Access current position & size of the player object px = p.offsetLeft; py = p.offsetTop; pw = p.offsetWidth; ph = p.offsetHeight; // Access current position & size of each ball in the array of dragonballs (grouped in the 'db' class) bx = b[i].offsetLeft; by = b[i].offsetTop; bw = b[i].offsetWidth; bh = b[i].offsetHeight; // Check if player has intersected with dragon ball if((px+pw-20) > bx && px < (bx+bw-20) && (py+ph-20) > by && py < (by+bh-20)){ // Tell the user what dragon ball caught when collision is detected, by accessing the id of each element with 'db' class alert('You caught the ' + b[i].id + '!'); // Remove the dragon ball element from the DOM when there's a collision document.body.removeChild(b[i]); // Increment variable collected by 1 everytime a dragon ball is caught collected++; // This function will fire when all dragon balls are collected dragonballs_collected(); } // Make the player stop when it hits boundaries else if(px > window.innerWidth || px < window.innerWidth){ stop(); } else if(py > window.innerHeight || py < window.innerHeight){ stop(); } } // Make detectCollisions() repeat quickly (60 frames/sec) requestAnimationFrame(detectCollisions); } // FUNCTION TRIGGERED AFTER THE 7 DRAGON BALLS ARE CAUGHT. /* It checks if the variable 'collected' was incremented up to 7, so once it's equal to 7 these things will happen: the player and arrow controls will be removed from the screen, the Shenron image will appear, background will be black, an alert will tell the user Shenron was summoned and the function 'summoned' will fire */ function dragonballs_collected() { if(collected == 7){ document.body.removeChild(p); document.body.removeChild(controls); document.write('

'); document.body.style.backgroundColor = "black"; alert('You have summoned Shenron, the eternal dragon!'); summoned(); } } // FUNCTION TRIGGERED WHEN COLLECTED ALL DRAGONBALLS. KEEP CALM AND SUMMON SHENRON. // Takes input from the user asking for a wish and gives the user an answer function summoned() { prompt("-Shenron: Congratulations! You have gathered all seven Dragon Balls of Earth! One wish will be granted for you:", "My Wish is"); document.write("

Shenron: Okay, that's beyond my power. Try Santa Claus. Farewell!

"); } // FUNCTION TO CHANGE DIRECTIONS. // The argument d is taken from the specified arrow elements in the DOM function changeDir(d) { dir = d; } // FUNCTION TO MOVE IN ALL DIRECTIONS. // Works as an animation that starts and moves the player element 12px when arrow controls are pressed function move() { var el = document.getElementById('goku'); if (dir == 'left') { el.style.left = (el.offsetLeft -= 12) + 'px'; } else if (dir == 'right') { el.style.left = (el.offsetLeft += 12) + 'px'; } else if (dir == 'up') { el.style.top = (el.offsetTop -= 12) + 'px'; } else if (dir == 'down') { el.style.top = (el.offsetTop += 12) + 'px'; } if (el.offsetLeft > w) { el.style.left = 0; } else if (el.offsetTop > h) { el.style.top = 0; } else if (el.offsetLeft < 0) { el.style.left = w; } else if (el.offsetTop < 0) { el.style.top = h; } reqID = requestAnimationFrame(move); } // FUNCTION TO MAKE THE PLAYER STOP. // Works by canceling the animation function stop() { cancelAnimationFrame(reqID); }

DBZ - P3 Multiple Collisions