www.webdeveloper.com
Results 1 to 7 of 7

Thread: Collision detection in IE

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    Collision detection in IE

    Hi

    I'm using this function for collision detection. But it doesn't work in IE. Help please...

    Code:
    function distance(obj1, obj2) {
    var difx = obj2.x - obj1.x;
    var dify = obj2.y - obj1.y;
    return Math.sqrt((difx*difx) + (dify*dify));
    };
    IE says "SCRIPT5007: Unable to get value of the property 'x': object is null or undefined "

  2. #2
    Join Date
    Mar 2009
    Posts
    485
    There's nothing wrong with your quoted function. The error lies upstream with whatever code is invoking that function.

  3. #3
    Join Date
    Oct 2012
    Posts
    16
    this is the entire collision detection code. i have tested it also in firefox and it works. only IE is making problems.

    Code:
    	function distance(obj1,obj2) {
    		var difx = obj2.x - obj1.x;
    		var dify = obj2.y - obj1.y;
    		
    		return Math.sqrt((difx*difx) + (dify*dify));
    	};
    	function collide() {
    		var numAsteroids = asteroids.length; //- 1;
    		var numShots = shots.length; //- 1;
    		var curAsteroid, curShot;
    		
    		for(var j=0; j<numAsteroids; j++) {
    			curAsteroid = asteroids[j];
    			if(distance(curAsteroid, spaceShip) < asteroids[j].radius){
    				clearInterval(myVar);
    				ctx.font="50px Arial black";
    				ctx.textAlign = 'center';
          			ctx.strokeStyle = 'black';
          			ctx.strokeWidth = 10;
    				ctx.fillText("POLITIKA JE ZMAGALA!", canvasWidth/2, canvasHeight/2);
    				}
    			for(var i=0; i<numShots; i++) {
    				curShots = shots[i];
    				//tu pa preverimo konkretno med metkom in skalo
    				if (distance(curAsteroid,curShots) < asteroids[j].radius){
    					asteroids.splice([j],1);
    					shots.splice([i],1);
    					asteroids.push(new Asteroid(curAsteroid.x+5, curAsteroid.y, curAsteroid.radius/2, curAsteroid.mass, curAsteroid.vX+0.5, curAsteroid.vY-1, curAsteroid.aX, curAsteroid.aY, !curAsteroid.status));
    					asteroids.push(new Asteroid(curAsteroid.x-5, curAsteroid.y, curAsteroid.radius/2, curAsteroid.mass, -curAsteroid.vX-0.5, curAsteroid.vY-1, -curAsteroid.aX, curAsteroid.aY, !curAsteroid.status));
    					if (curAsteroid.radius<20) {
    						asteroids.splice([j+1],2);
    					}
    				}
    				//shotsLength = shots.length -1;
    				//numShots = shots.length - 1;
    				//numAsteroids = asteroids.length - 1;
    			}
    		}
    	}

  4. #4
    Join Date
    Mar 2009
    Posts
    485
    I'm glad you showed more of the code, but its obviously not all there is to it.

    The only thing that jumps out at me from what you've given is the arguments passed to the ARRAY.slice function. I'm not saying its wrong (you say it works in other browsers) but I've never seen an argument that is supposed to be an integer passed in square brackets that I can recall, as in "asteroids.splice([j],1);" The js parser in IE might be having a problem with this. You might try changing it to () instead.

    But this is just a guess.

  5. #5
    Join Date
    Oct 2012
    Posts
    16
    i was trying to avoid to post the whole code, since it gets a bit scary to read all that stuff and then I don't get any feedback. I have tryed your advice, but it didn't work.

    Code:
    	$(document).ready(function() {
    	
    	var canvas = $("#myCanvas");
    	var ctx = canvas.get(0).getContext("2d");
    	canvas.attr("width", $(window).get(0).innerWidth);
    	canvas.attr("height", $(window).get(0).innerHeight);
    	ctx.clearRect(0, 0, canvas.width, canvas.height);
    	var canvasWidth = canvas.width();
    	var canvasHeight = canvas.height();
    	var keys = [];
    	
    	function createSpaceShip() {
    		this.x = 300;
    		this.y = canvasHeight - 85;
    		this.vX = 5;
    		this.vY = 5;
    		this.drawSpaceShip = function() {
    			var img = new Image();
    			img.src = "zombi.png";
    			ctx.drawImage(img, this.x, this.y);
    		}
    	};
    	var spaceShip = new createSpaceShip();
    	var asteroids = new Array();
    	function Asteroid(x, y, radius, mass, vX, vY, aX, aY, status) {
    		this.x = x;
    		this.y = y;
    		this.radius = radius;
    		this.mass = mass; 
    		this.vX = vX;
    		this.vY = vY;
    		this.aX = aX;
    		this.aY = aY;
    		this.status = status;
    		this.drawJJ = function() {
    			var imgJJ = new Image();
    			imgJJ.src = 'jj.png';
    			ctx.drawImage(imgJJ, this.x, this.y);
    		}
    		this.drawZoki = function() {
    			var imgZoki = new Image();
    			imgZoki.src = 'zoki.png';
    			ctx.drawImage(imgZoki, this.x, this.y);
    		}
    	};
    	
    
    		var m = 1;
    		var status = false;
    		function myLoop () {
    			setTimeout(function () {
    				var x = 20+(Math.random()*(canvasWidth-40));
    				var y = -100;
    				var radius = 55;
    				var mass = radius/3;
    				var vX = Math.random()*4-2;
    				var vY = Math.random()*4-2;
    				var aX = mass*0.01; //Math.random()*0.2-0.1;
    				var aY = mass*0.02;
    
    				var numAsteroids = asteroids.length;	
    					
    				asteroids.push(new Asteroid(x, y, radius, mass, vX, vY, aX, aY, status));
    	
    				if (asteroids[m-1].status == true) {
    					status = false;
    					} else {
    					status = true;
    				}
    				console.log(asteroids[m-1].status);
    
    				m++;
    				if (m<20 || numAsteroids < 40) {
    					myLoop();
    				}
    			}, 1000)
    		}
    		
    myLoop();
    
    
    	function Shot(x, y, vX, vY, aX, aY) {
    		this.x = x;
    		this.y = y;
    		this.vX = 0;
    		this.vY = 5;
    		this.aX = aX;
    		this.aY = aY;
     	}
    	var shots = new Array();
    	
    	var keyDown;
    	var keyUp;
    	$(document).keydown(function (e) {
        	keys[e.keyCode] = true;
    	});
    	$(document).keyup(function (e) {
        	if (e.which == 32) {
        		shots.push(new Shot(spaceShip.x+23, spaceShip.y, 0, 5, 1, 1));
        	}
        	delete keys[e.keyCode];
    	});
    	document.onkeyup = function(event) {
       		var keyCode; 
       		if(event == null) {
        		keyCode = window.event.keyCode; 
       		} else {
        	keyCode = event.keyCode; 
       		}
    	};
    	
    	
    	//collision detection
    	function distance(obj1,obj2) {
    		var difx = obj2.x - obj1.x;
    		var dify = obj2.y - obj1.y;
    		
    		return Math.sqrt((difx*difx) + (dify*dify));
    	};
    	function collide() {
    		var numAsteroids = asteroids.length; //- 1;
    		var numShots = shots.length; //- 1;
    		var curAsteroid, curShot;
    		
    		for(var j=0; j<numAsteroids; j++) {
    			curAsteroid = asteroids[j];
    			if(distance(curAsteroid, spaceShip) < asteroids[j].radius){
    				clearInterval(myVar);
    				ctx.font="50px Arial black";
    				ctx.textAlign = 'center';
          			ctx.strokeStyle = 'black';
          			ctx.strokeWidth = 10;
    				ctx.fillText("POLITIKA JE ZMAGALA!", canvasWidth/2, canvasHeight/2);
    				}
    			for(var i=0; i<numShots; i++) {
    				curShots = shots[i];
    
    				if (distance(curAsteroid,curShots) < asteroids[j].radius){
    					asteroids.splice([j],1);
    					shots.splice([i],1);
    					asteroids.push(new Asteroid(curAsteroid.x+5, curAsteroid.y, curAsteroid.radius/2, curAsteroid.mass, curAsteroid.vX+0.5, curAsteroid.vY-1, curAsteroid.aX, curAsteroid.aY, !curAsteroid.status));
    					asteroids.push(new Asteroid(curAsteroid.x-5, curAsteroid.y, curAsteroid.radius/2, curAsteroid.mass, -curAsteroid.vX-0.5, curAsteroid.vY-1, -curAsteroid.aX, curAsteroid.aY, !curAsteroid.status));
    					if (curAsteroid.radius<20) {
    						asteroids.splice([j+1],2);
    					}
    				}
    
    			}
    		}
    	}
    	
    	function bounceControl() {
    
    		var asteroidsLength = asteroids.length;
    		for (var i = 0; i < asteroidsLength; i++) {
    			var tmpAsteroid = asteroids[i];
    			tmpAsteroid.x += tmpAsteroid.vX;
    			tmpAsteroid.y += tmpAsteroid.vY;
    //bounce control			
    			for (var j = i+1; j < asteroidsLength; j++) {
    				var tmpAsteroidB = asteroids[j];
    				var dX = tmpAsteroidB.x - tmpAsteroid.x;
    				var dY = tmpAsteroidB.y - tmpAsteroid.y;
    				var distance = Math.sqrt((dX*dX)+(dY*dY));
    				
    				if (distance < tmpAsteroid.radius + tmpAsteroidB.radius) {
    					var angle = Math.atan2(dY, dX);
    					var sine = Math.sin(angle);
    					var cosine = Math.cos(angle);
    					var x = 0;
    					var y = 0;
    					var xB = dX * cosine + dY * sine;
    					var yB = dY * cosine - dX * sine;
    					var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine;
    					var vY = tmpAsteroid.vY * cosine - tmpAsteroid.vX * sine;
    					var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine;
    					var vYb = tmpAsteroidB.vY * cosine - tmpAsteroidB.vX * sine;
    					
    
    					var vTotal = vX - vXb;
    					vX = ((tmpAsteroid.mass - tmpAsteroidB.mass) * vX + 2 * tmpAsteroidB.mass * vXb) / (tmpAsteroid.mass + tmpAsteroidB.mass);
    					vXb = vTotal + vX;
    					
    					
    					xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius);
    					
    					tmpAsteroid.x = tmpAsteroid.x + (x * cosine - y * sine);
    					tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine);
    					tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine - yB * sine);
    					tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine);
    					tmpAsteroid.vX = vX * cosine - vY * sine;
    					tmpAsteroid.vY = vY * cosine + vX * sine;
    					tmpAsteroidB.vX = vXb * cosine - vYb * sine;
    					tmpAsteroidB.vY = vYb * cosine + vXb * sine;
    
    };
    			};
    			
    			if (Math.abs(tmpAsteroid.vX) < 5) {
    				tmpAsteroid.vX += tmpAsteroid.aX;
    			};
    			if (Math.abs(tmpAsteroid.vY) < 5) {
    				tmpAsteroid.vY += tmpAsteroid.aY;
    			};
    
    //bounce control			
    		if (tmpAsteroid.x-tmpAsteroid.radius < 0) {
    			tmpAsteroid.x = tmpAsteroid.radius;
    			tmpAsteroid.vX *= -1;
    			tmpAsteroid.aX *= -1;
    		} else if (tmpAsteroid.x+tmpAsteroid.radius > canvasWidth) {
    			tmpAsteroid.x = canvasWidth-tmpAsteroid.radius;
    			tmpAsteroid.vX *= -1;
    			tmpAsteroid.aX *= -1;
    		};
    };
    		
    		
    	}
    	
    		var oblak = {
    		x:0,
    		y:0,
    		src: 'clouds1.png'
    	}
    	
    	var myVar = setInterval(function(){animation()},30);
    	
    	function animation() {
    
    		
    		var tmpSpaceShip = spaceShip;
        	ctx.clearRect(0, 0, canvasWidth, canvasHeight);	
        	ctx.fillRect(0,canvasHeight - 30,canvasWidth,canvasHeight);
    		var imageObj1 = new Image();
          	imageObj1.src = 'clouds1.png';
          	ctx.drawImage(imageObj1, -50, 0);
    		tmpSpaceShip.drawSpaceShip();
    		var shotsLength = shots.length;
    		var asteroidsLength = asteroids.length;
    
    
    		for (var j = 0; j < asteroidsLength; j++) {
    			var tmpAsteroid = asteroids[j];
    			tmpAsteroid.x += tmpAsteroid.vX;
    			tmpAsteroid.y += tmpAsteroid.vY;
    
        		if (tmpAsteroid.status) {
        			var imgJJ = new Image();
    			imgJJ.src = "jj.png";
        		ctx.drawImage(imgJJ, tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, tmpAsteroid.radius*1.4);
    
        		} else {
        			var imgZoki = new Image();
    			imgZoki.src = "zoki.png";
        		ctx.drawImage(imgZoki, tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, tmpAsteroid.radius*1.4);
    
        		}
        		
    			imgZoki.src = "zoki.png";
        		ctx.drawImage(imgZoki, tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, tmpAsteroid.radius*1.4);*/
    			if(asteroids[j].y>canvasHeight){
    				asteroids[j].y = -60;
    			}
    		};				
    		
    		collide();
    		bounceControl();
    
    	  	for (var i = 0; i<shotsLength; i++) {
    	  		var tmpShots = shots[i];
    	  		tmpShots.y -= tmpShots.vY;
    			ctx.beginPath();
    			ctx.moveTo(tmpShots.x, tmpShots.y);
    			ctx.lineTo(tmpShots.x, tmpShots.y-5);
    			ctx.lineWidth=5;
    			ctx.stroke();		
    			if(shots[i].y<-5) {
    				shots.splice([i],1);
    				shotsLength = shots.length -1;
    			}
    		};    	
        	
        	
      		if(keys[32]){
    
            }
    		if(keys[37]){
    		tmpSpaceShip.x -= tmpSpaceShip.vX;
    		tmpSpaceShip.drawSpaceShip();
    		if(tmpSpaceShip.x < 50) {
    			tmpSpaceShip.x = 50;
    			}
            }
      		if(keys[39]){
    		tmpSpaceShip.x += tmpSpaceShip.vX;
    		tmpSpaceShip.drawSpaceShip();
    		if(tmpSpaceShip.x > canvasWidth - 50) {
    			tmpSpaceShip.x = canvasWidth - 50;
    		}
    
            }
    
    
    	var imageObj2 = new Image();
          imageObj2.src = 'clouds1.png';
          	ctx.drawImage(imageObj2, 0, -20);
          	
    	var imageObj3 = new Image();
          imageObj3.src = 'grass12.png';
          	ctx.drawImage(imageObj3, 0, canvasHeight-119);        
    	var imageObj4 = new Image();
          imageObj4.src = 'grass23.png';
          	ctx.drawImage(imageObj4, canvasWidth-121, canvasHeight-101);        
      
    
    	}
      
    
    });

  6. #6
    Join Date
    Aug 2006
    Posts
    301
    the splice method of the built in Array object won't accept will only accept an integer or a variable storing the integer. this may not solve your problem but these lines(139 & 140) and few others like this:

    asteroids.splice([j],1);
    shots.splice([i],1);

    should be replaced with...

    asteroids.splice(j,1);
    shots.splice(i,1);

    as-is they are not referring to an actual object, and may be why you get the error that the property x of object is null or not defined

  7. #7
    Join Date
    Aug 2006
    Posts
    301
    Unable to get value of the property 'x': object is null or undefined " almost always means that the object you are referring do does not exist or doesn't have that particular property. try using an alert or console.log on obj1.x and see if it comes up undefined outside of the function as well as from inside the function.

    it seems as if the objects do exist and do have x and y properties, so you are probably not referening the object properly, the splice method definetly won't accpet the square brackets, so just use the variable and drop the square brackets in all the splice calls and see if it clears up the reference issue.

    i am also working on several js games, almost done with one of my all time favs 'Gauntlet', also workign on an overhead racer and a 'god game' similar to populous but the organisms in the game have dna and genes and actually undergo reproduction and mutuation and change their genes and thereby de/evolve. such fun. Your code is very well written even though i don't use canvas yet, i understand most of it, and use similar collisiong detectionand objects in my games.

    you might like this site, not mine, but similar to what you are doing, several full game tutorials

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles