Collision Between 2 Objects togagames Follow 2010-12-04 11:09:24 License: MIT License Fork0 Fav2 View711 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(); <div id='container' class='container' align='right'> <div id='output' class='tracer'>Collision Test</div> <canvas id="game" width="335" height="335"></canvas> </div> Collision Between 2 Objects 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; } 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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> Tweet twitter Tags Efects canvas game Favorite by canvastag p1r4t0s: canvasEfectsgamegamecolilision