Exemple de tennis de table HTML5 (détection de collision) two_html5 compétences du didacticiel

Adresse de démonstration

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

Une brève introduction

Le ballon peut se déplacer librement à l'intérieur de la boîte
Vous pouvez utiliser les touches de direction pour contrôler les briques noires afin de monter, descendre, gauche et droite pour entrer en collision avec le ballon

Mise en œuvre du code

Copier le code

Le code est le suivant :

<script> <br>var ctx; <br>toile var; <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>varbound_left=box_x ball_radius; <br>varbound_right=box_x box_width-ball_radius; <br>varbound_top=box_y ball_radius; <br>varbound_bottom=box_y box_height-ball_radius; <br>unité var=10 ; <br>fonction intersection(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 />sinon si (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 />pause; <br />case 38://up <br />wall_y-=unit; <br />if(wall_y<bound_top) <br />wall_y=bound_top; <br />pause; <br />case 39://right <br />wall_x =unit; <br />if(wall_x wall_width>bound_right) <br>wall_x=bound_right-wall_width; <br>pause; <br>case 40://down <br>wall_y =unit; <br>if(wall_y wall_height>bound_bottom) <br>wall_y=bound_bottom-wall_height; <br>pause; <br>par défaut : <br>pause ; <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中有介绍。