Collision Between 2 Objects

togagames

2010-12-04 11:09:24

License: MIT License

Fork: 0

Fav: 2

View: 624

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 83 lines
HTML 5 lines
CSS 10 lines

Collision Between 2 Objects

var timer_id;
var update_time = 20;
var counter = 0;
var _width = 335;
var _height = 335;
var game;
var context;
var output;
var distance = 0;
var distx = 0;
var disty = 0;

var obj1 = {
  x:15,
  y:100,
  xspeed:2,
  yspeed:1.5,
  radius:10,
  color:'ff33cc'
};
var obj2 = {
  x:44,
  y:224,
  xspeed:1.5,
  yspeed:3,
  radius:10,
  color:'ff0000'
};

function _init(){
  game = document.getElementById('game');
  context = game.getContext('2d');
  output = document.getElementById('output');

timer_id = setInterval(_update, update_time); 
}
                        
function _update(){
  // move them
  obj1.x += obj1.xspeed;
  obj1.y += obj1.yspeed;
  obj2.x += obj2.xspeed;
  obj2.y += obj2.yspeed;
  // clear old draw
  context.clearRect(0,0,_width,_height);
  context.beginPath();
  context.beginPath();
  // draw the distance line 
  context.moveTo(obj1.x,obj1.y);
  context.lineTo(obj2.x,obj2.y);
  context.stroke();
  context.closePath();
  // get distance
  distx = Math.max(obj1.x,obj2.x)-Math.min(obj1.x,obj2.x);
  disty = Math.max(obj1.y,obj2.y)-Math.min(obj1.y,obj2.y);
  distance = Math.sqrt((distx*distx)+(disty*disty));
  // obj 1
  context.fillStyle = obj1.color;
  context.arc(obj1.x,obj1.y,obj1.radius,0,Math.PI*2,false);
  context.fill();
  // obj 2
  context.beginPath();
  context.fillStyle = obj2.color;
  context.arc(obj2.x,obj2.y,obj2.radius,0,Math.PI*2,false);
  context.fill();
  /* update their distance */
  output.innerHTML = 'distance: '+Math.round(distance);
  if((distance < obj1.radius*2) && (distance < obj1.radius*2)){
        output.innerHTML += "\n<strong>COLLISION!</strong>";
  }
  /* wall collision */
  if((obj2.x + (obj2.radius)) > _width){obj2.xspeed *= -1;}
  if(obj2.x - obj2.radius < 0){obj2.xspeed *= -1;}
  if((obj1.x + (obj1.radius)) > _width){obj1.xspeed *= -1;}
  if(obj1.x < obj1.radius){obj1.xspeed *= -1;}

if((obj2.y + (obj2.radius)) > _height){obj2.yspeed *= -1;}
  if(obj2.y < obj2.radius){obj2.yspeed *= -1;}  
  if((obj1.y + (obj1.radius)) > _height){obj1.yspeed *= -1;}
  if(obj1.y < obj1.radius){obj1.yspeed *= -1;}  
}

_init();

Collision Between 2 Objects

var timer_id; var update_time = 20; var counter = 0; var _width = 335; var _height = 335; var game; var context; var output; var distance = 0; var distx = 0; var disty = 0; var obj1 = { x:15, y:100, xspeed:2, yspeed:1.5, radius:10, color:'ff33cc' }; var obj2 = { x:44, y:224, xspeed:1.5, yspeed:3, radius:10, color:'ff0000' }; function _init(){ game = document.getElementById('game'); context = game.getContext('2d'); output = document.getElementById('output'); timer_id = setInterval(_update, update_time); } function _update(){ // move them obj1.x += obj1.xspeed; obj1.y += obj1.yspeed; obj2.x += obj2.xspeed; obj2.y += obj2.yspeed; // clear old draw context.clearRect(0,0,_width,_height); context.beginPath(); context.beginPath(); // draw the distance line context.moveTo(obj1.x,obj1.y); context.lineTo(obj2.x,obj2.y); context.stroke(); context.closePath(); // get distance distx = Math.max(obj1.x,obj2.x)-Math.min(obj1.x,obj2.x); disty = Math.max(obj1.y,obj2.y)-Math.min(obj1.y,obj2.y); distance = Math.sqrt((distx*distx)+(disty*disty)); // obj 1 context.fillStyle = obj1.color; context.arc(obj1.x,obj1.y,obj1.radius,0,Math.PI*2,false); context.fill(); // obj 2 context.beginPath(); context.fillStyle = obj2.color; context.arc(obj2.x,obj2.y,obj2.radius,0,Math.PI*2,false); context.fill(); /* update their distance */ output.innerHTML = 'distance: '+Math.round(distance); if((distance < obj1.radius*2) && (distance < obj1.radius*2)){ output.innerHTML += "\n<strong>COLLISION!</strong>"; } /* wall collision */ if((obj2.x + (obj2.radius)) > _width){obj2.xspeed *= -1;} if(obj2.x - obj2.radius < 0){obj2.xspeed *= -1;} if((obj1.x + (obj1.radius)) > _width){obj1.xspeed *= -1;} if(obj1.x < obj1.radius){obj1.xspeed *= -1;} if((obj2.y + (obj2.radius)) > _height){obj2.yspeed *= -1;} if(obj2.y < obj2.radius){obj2.yspeed *= -1;} if((obj1.y + (obj1.radius)) > _height){obj1.yspeed *= -1;} if(obj1.y < obj1.radius){obj1.yspeed *= -1;} } _init();<div id='container' class='container' align='right'> <div id='output' class='tracer'>Collision Test</div> <canvas id="game" width="335" height="335"></canvas> </div> body { background-color: #DDDDDD; font: .75em 'Microsoft Sans Serif'; } .container { width:335px; height:335px; } .tracer { border:2px inset; width:100px; height:35px; font-weight:450; background-color:#fff; overflow:hidden; padding-left:3px; text-align:left; } #divclear{ clear:both; } #game { border: 1px solid #999999; background-color:#fff; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/zc7D/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/togagames/zc7D" title="Collision Between 2 Objects">Collision Between 2 Objects - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Favorite by

canvastag

p1r4t0s:

canvas Efects gamegamecolilision

Collision Between 2 Objects

tags

Tweet

twitter

Tags

Favorite by