html5 乒乓球(碰撞检测)实例二_html5教程技巧

<script> <br />var ctx; <br />var canvas; <br />var ball_x=10; <br />var ball_y=10; <br />var ball_radius=10; <br />var ball_vx=10; <br />var ball_vy=8; <br />var wall_x=30; <br />var wall_y=40; <br />var wall_width=30; <br />var wall_height=60; <br />var box_x=0; <br />var box_y=0; <br />var box_width=300; <br />var box_height=300; <br />var bound_left=box_x+ball_radius; <br />var bound_right=box_x+box_width-ball_radius; <br />var bound_top=box_y+ball_radius; <br />var bound_bottom=box_y+box_height-ball_radius; <br />var unit=10; <br />function intersect(sx, sy, fx, fy, cx, cy, rad) <br />{ <br />var dx; <br />var dy; <br />var t; <br />var rt; <br />dx = fx - sx; <br />dy = fy - sy; <br />t = 0.0 - (((sx - cx) * dx + (sy - cy) * dy) / (dx * dx + dy * dy)); <br />if (t < 0.0) <br />{ <br />t = 0.0; <br />} <br />else if (t > 1.0) <br />t = 1.0; <br />var dx1 = (sx + t * dx) - cx; <br />var dy1 = (sy + t * dy) - cy; <br />var rt = dx1 * dx1 + dy1 * dy1; <br />if (rt < rad * rad) <br />return true; <br />else <br />return false; <br />} <br />function move_ball() <br />{ <br />ball_x=ball_x+ball_vx; <br />ball_y=ball_y+ball_vy; <br />if(ball_x<bound_left) <br />{ <br />ball_x=bound_left; <br />ball_vx=-ball_vx; <br />} <br />if(ball_x>bound_right) <br />{ <br />ball_x=bound_right; <br />ball_vx=-ball_vx; <br />} <br />if(ball_y<bound_top) <br />{ <br />ball_y=bound_top; <br />ball_vy=-ball_vy; <br />} <br />if(ball_y>bound_bottom) <br />{ <br />ball_y=bound_bottom; <br />ball_vy=-ball_vy; <br />} <br />//撞到上边 <br />if(intersect(wall_x,wall_y,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius)) <br />{ <br />ball_y=wall_y-ball_radius; <br />ball_vy=-ball_vy; <br />} <br />//撞到左边 <br />if(intersect(wall_x,wall_y,wall_x,wall_y+wall_height,ball_x,ball_y,ball_radius)) <br />{ <br />ball_x=wall_x-ball_radius; <br />ball_vx=-ball_vx; <br />} <br />//撞到右边 <br />if(intersect(wall_x+wall_width,wall_y,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius)) <br />{ <br />ball_x=wall_x+wall_width+ball_radius; <br />ball_vx=-ball_vx; <br />} <br />//撞到下边 <br />if(intersect(wall_x,wall_y+wall_height,wall_x+wall_width,wall_y+wall_height,ball_x,ball_y,ball_radius)) <br />{ <br />ball_y=wall_y+wall_height+ball_radius; <br />ball_vy=-ball_vy; <br />} <br />} <br />function move_wall(ev) <br />{ <br />var keyCode; <br />if(event==null) <br />{ <br />keyCode=window.event.keyCode; <br />window.event.preventDefault(); <br />} <br />else <br />{ <br />keyCode=event.keyCode; <br />event.preventDefault(); <br />} <br />switch(keyCode) <br />{ <br />case 37://left; <br />wall_x-=unit; <br />if(wall_x<bound_left) <br />wall_x=bound_left; <br />break; <br />case 38://up <br />wall_y-=unit; <br />if(wall_y<bound_top) <br />wall_y=bound_top; <br />break; <br />case 39://right <br />wall_x+=unit; <br />if(wall_x+wall_width>bound_right) <br />wall_x=bound_right-wall_width; <br />break; <br />case 40://down <br />wall_y+=unit; <br />if(wall_y+wall_height>bound_bottom) <br />wall_y=bound_bottom-wall_height; <br />break; <br />default: <br />break; <br />} <br />} <br />function draw_all() <br />{ <br />ctx.beginPath(); <br />ctx.clearRect(box_x,box_y,box_width,box_height); <br />ctx.fillStyle="rgb(255,0,0)"; <br />//ctx.lineWidth=ball_radius; <br />ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true); <br />ctx.fill();//note <br />ctx.fillStyle="rgb(0,0,0)"; <br />ctx.fillRect(wall_x,wall_y,wall_width,wall_height); <br />ctx.strokeRect(box_x,box_y,box_width,box_height); <br />} <br />function init() <br />{ <br />canvas=document.getElementById('canvas'); <br />ctx=canvas.getContext('2d'); <br />draw_all(); <br />setInterval(draw_all,100); <br />setInterval(move_ball,50); <br />window.addEventListener('keydown',move_wall,false);//note <br />} <br /></script>