$(document).ready(function() { //define canvas var canvasElement = document.getElementById('canvas'); var canvas = canvasElement.getContext("2d"); //define objects var box = spritify({ movement : false, animation : false, image : 'box.png', posY : 184, posX : 184 }); var character = spritify({ collisionObjs : 'collisionObjs' }); //define collision objects window.collisionObjs = new Array(); window.collisionObjs[0] = box; function draw() { canvas.clearRect(0, 0, 400, 400); canvas.fillStyle = "green"; canvas.fillRect(0, 0, 400, 400); //draw/update character character.spritifyObj.update(); character.spritifyObj.draw(); //draw/update collisionObjs if (window.collisionObjs) { for(var x = 0; x < window.collisionObjs.length; x++) { window.collisionObjs[x].spritifyObj.update(); window.collisionObjs[x].spritifyObj.draw(); } } } setInterval(function() { draw(); }, 1000/30); });
To use Spritify's simple rectangular collision detection, simply add all the Spritify objects you would like it to check against to a javascript array. Then assign your character object's "collisionObjs" variable to that array as shown above. Spritify will check during the movement function whether or not it collides with any of the "collisionObjs". If it does collide, it will prevent movement in that direction.