Wkofrkeixgoao
New Member
Can you please help me with my collision test .In flash I would use a Hittest and it would take 2 minutes to do but as I see HTML5 is a little different.Below is my code. I can make the ball bounce inside the red block easily but I want a grey block in the middle that the ball bounces off also and the if statement is getting messy and not working. Is there an easier way todo this, can you please help me. Thanks\[code\]<html><head></head><script> var context; var x=50; var y=100; var speedX=-2; var speedY=-2; var counter=0; var ballCoordinates =''; function init() { var c = document.getElementById('myCanvas'); context= c.getContext('2d'); setInterval(draw,10); } function draw() { context.clearRect(0,0, 300,400); //draw number context.fillStyle = '#fff'; context.font="160px Arial"; context.fillText(counter,10,150); context.fillStyle = '#fff'; context.font="20px Arial"; context.fillText(ballCoordinates,10,400); //draw ball context.beginPath(); context.fillStyle="#0000ff"; context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); //draw block context.fillStyle = '#333'; context.fillRect(100,200,100,100); // Boundary Logic //if( x<0 || x>300) dx=-dx; //if( y<0 || y>300) dy=-dy; if(x>280){ speedX=speedX * -1; }else if(y<20){ speedY=speedY * -1; }else if(x<20){ speedX=speedX * -1; }else if(y>380){ speedY=speedY * -1; }else if( x>80 && y >180 && y <320) { speedY=speedY * -1; }else if( x<220 && y >180 && y <320) { speedY=speedY * -1; }else if( y>180 && x>80 && x<220) { speedX=speedX * -1; }else if( y<180 && x>80 && x<220) { speedX=speedX * -1; } x+=speedX; y+=speedY; ballCoordinates = x + 'x ' + y + 'y ' + speedX + 'speedx ' + speedY + 'speedy'; }</script><body onLoad="init();"> <canvas id="myCanvas" width="300" height="400" style="background:red" > </canvas></body></html>\[/code\]