HTML5 table tennis (collision detection) example two_html5 tutorial skills

Demo address

http://koking.8u.hanmandarin.com/html5/1.html

A brief introduction

The ball can move freely inside the box
You can use the direction keys to control the black bricks to move up, down, left and right to collide with the ball

Code implementation

Copy code

The code is as follows:

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

难点

小球和砖块的碰撞检测以及碰撞处理
将砖块分解为4条线段
分别对小球和每条线段进行碰撞检测。

小球和线段的碰撞检测在另一篇文章http://www.jb51.net/html5/93997.html中有介绍。