Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Collision Detection Hit Game Enemies

Learn object collision detection on the canvas with JavaScript for games and more. A few other useful tactics are included in the exercise. Collision detection is the act of detecting when specific objects come into contact with one another and then programming some resulting effect of that collision. We are going to be putting the logic into a video game programming scenario to best demonstrate detecting collisions for multiple objects simultaneously. All of the code used in the basic application is code from all of the previous exercises. <!DOCTYPE html> <html> <head> <style> body{ margin:10px; background:#CCC; } #my_canvas{ background:#FFF; border:#000 1px solid; } </style> <script> function initCanvas(){ var ctx = document.getElementById('my_canvas').getContext('2d'); var cW = ctx.canvas.width, cH = ctx.canvas.height; var enemies = [ {"id":"enemy1","x":100,"y":-20,"w":40,"h":20}, {"id":"enemy2","x":225,"y":-20,"w":40,"h":20}, {"id":"enemy3","x":350,"y":-20,"w":40,"h":20}, {"id":"enemy4","x":100,"y":-70,"w":40,"h":20}, {"id":"enemy5","x":225,"y":-70,"w":40,"h":20}, {"id":"enemy6","x":350,"y":-70,"w":40,"h":20} ]; function renderEnemies(){ for(var i = 0; i < enemies.length; i++){ ctx.fillStyle = "blue"; ctx.fillRect(enemies[i].x, enemies[i].y+=.5, enemies[i].w, enemies[i].h); } } function Launcher(){ this.y = 280, this.x = cW*.5-25, this.w = 50, this.h = 50, this.dir, this.bg="orange", this.missiles = []; this.render = function(){ if(this.dir == 'left'){ this.x-=5; } else if(this.dir == 'right'){ this.x+=5; } ctx.fillStyle = this.bg; ctx.fillRect(this.x, this.y, this.w, this.h); for(var i=0; i < this.missiles.length; i++){ var m = this.missiles[i]; ctx.fillStyle = m.bg; ctx.fillRect(m.x, m.y-=5, m.w, m.h); this.hitDetect(this.missiles[i],i); if(m.y <= 0){ // If a missile goes past the canvas boundaries, remove it this.missiles.splice(i,1); // Splice that missile out of the missiles array } } if(enemies.length == 0){ clearInterval(animateInterval); // Stop the game animation loop ctx.fillStyle = '#FC0'; ctx.font = 'italic bold 36px Arial, sans-serif'; ctx.fillText('Level Complete', cW*.5-130, 50, 300); } } this.hitDetect = function(m,mi){ for(var i = 0; i < enemies.length; i++){ var e = enemies[i]; if(m.x+m.w >= e.x && m.x <= e.x+e.w && m.y >= e.y && m.y <= e.y+e.h){ this.missiles.splice(this.missiles[mi],1); // Remove the missile enemies.splice(i,1); // Remove the enemy that the missile hit document.getElementById('status').innerHTML = "You destroyed "+ e.id; } } } } var launcher = new Launcher(); function animate(){ //ctx.save(); ctx.clearRect(0, 0, cW, cH); launcher.render(); renderEnemies(); //ctx.restore(); } var animateInterval = setInterval(animate, 30); var left_btn = document.getElementById('left_btn'); var right_btn = document.getElementById('right_btn'); var fire_btn = document.getElementById('fire_btn'); left_btn.addEventListener('mousedown', function(event) { launcher.dir = 'left'; }); left_btn.addEventListener('mouseup', function(event) { launcher.dir = ''; }); right_btn.addEventListener('mousedown', function(event) { launcher.dir = 'right'; }); right_btn.addEventListener('mouseup', function(event) { launcher.dir = ''; }); fire_btn.addEventListener('mousedown', function(event) { launcher.missiles.push({"x":launcher.x+launcher.w*.5,"y":launcher.y,"w":3,"h":10,"bg":"red"}); }); } window.addEventListener('load', function(event) { initCanvas(); }); </script> </head> <body> <canvas id="my_canvas" width="500" height="350"></canvas> <div> <button id="left_btn">Move Left</button> <button id="right_btn">Move Right</button> <button id="fire_btn">Fire Missile</button> </div> <h3 id="status"></h3> </body> </html>
thumb

JavaScript Videos

Canvas Programming

2D Context Object and Rectangle MethodsFill and Stroke Styles Color Gradient PatternLine Styles for Lines and StrokesBuilding and Drawing PathsDrawing Images and VideosDrawing Text on CanvasRendering Shadows on CanvasCanvas Transformation EffectsPixel Manipulation on CanvasCompositing on the CanvasDynamic Centering and Alignment on the CanvasCanvas Animation and App InitializationObject Oriented Assets OOP on CanvasDetect Mouse Coordinates on CanvasAnimated Background Layers on Canvas TutorialKeyboard Control and MovementJSON Object Arrays and Loops on CanvasHit Detection Mouse Touch Over Object ArraysCollision Detection Hit Game EnemiesParticle Effect System Tutorial Snow Falling AnimationInteractive Canvas Imaging Applications JavaScript PHP TutorialCircular Progress Loader Canvas JavaScript Programming Tutorial