Collision Between 2 Objects

togagames

2010-12-04 11:09:24

License: MIT License

Fork: 0

Fav: 2

View: 711

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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<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>

QR Code

Favorite by

canvastag

p1r4t0s:

canvas Efects gamegamecolilision

Collision Between 2 Objects

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Tags

Favorite by