Html5 Table Tennis (collision detection) Example 2 _ html5 tutorial skills-

The ball can be freely moved inside the box, and the black brick can be moved up or down to collide with the ball through the arrow keys. The specific implementation ideas and code are as follows. For more information, see, I hope it will help you learn html5.

Demo address

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

Brief Introduction

The ball can be freely moved inside the box.
You can use the arrow keys to control the movement of Black bricks from top to bottom to collide with the ball.

Code Implementation

The Code is as follows:

Table Tennis Games

Script
Var ctx;
Var canvas;
Var ball_x = 10;
Var ball_y = 10;
Var ball_radius = 10;
Var ball_vx = 10;
Var ball_vy = 8;
Var wall_x = 30;
Var wall_y = 40;
Var wall_width = 30;
Var wall_height = 60;
Var box_x = 0;
Var box_y = 0;
Var box_width = 300;
Var box_height = 300;
Var bound_left = box_x + ball_radius;
Var bound_right = box_x + box_width-ball_radius;
Var bound_top = box_y + ball_radius;
Var bound_bottom = box_y + box_height-ball_radius;
Var unit = 10;
Function intersect (sx, sy, fx, fy, cx, cy, rad)
{
Var dx;
Var dy;
Var t;
Var rt;
Dx = fx-sx;
Dy = fy-sy;
T = 0.0-(sx-cx) * dx + (sy-cy) * dy)/(dx * dx + dy * dy ));
If (t <1, 0.0)
{
T = 0.0;
}
Else 'if (t> 1.0)
T = 1.0;
Var dx1 = (sx + t * dx)-cx;
Var dy1 = (sy + t * dy)-cy;
Var rt = dx1 * dx1 + dy1 * dy1;
If (rt <rad * rad)
Return true;
Else
Return false;
}
Function move_ball ()
{
Ball_x = ball_x + ball_vx;
Ball_y = ball_y + ball_vy;
If (ball_x {
Ball_x = bound_left;
Ball_vx =-ball_vx;
}
If (ball_x> bound_right)
{
Ball_x = bound_right;
Ball_vx =-ball_vx;
}
If (ball_y {
Ball_y = bound_top;
Ball_vy =-ball_vy;
}
If (ball_y> bound_bottom)
{
Ball_y = bound_bottom;
Ball_vy =-ball_vy;
}
// Hit the top
If (intersect (wall_x, wall_y, wall_x + wall_width, wall_y + wall_height, ball_x, ball_y, ball_radius ))
{
Ball_y = wall_y-ball_radius;
Ball_vy =-ball_vy;
}
// Hit the left
If (intersect (wall_x, wall_y, wall_x, wall_y + wall_height, ball_x, ball_y, ball_radius ))
{
Ball_x = wall_x-ball_radius;
Ball_vx =-ball_vx;
}
// Hit the right
If (intersect (wall_x + wall_width, wall_y, wall_x + wall_width, wall_y + wall_height, ball_x, ball_y, ball_radius ))
{
Ball_x = wall_x + wall_width + ball_radius;
Ball_vx =-ball_vx;
}
// Hit the bottom
If (intersect (wall_x, wall_y + wall_height, wall_x + wall_width, wall_y + wall_height, ball_x, ball_y, ball_radius ))
{
Ball_y = wall_y + wall_height + ball_radius;
Ball_vy =-ball_vy;
}
}
Function move_wall (ev)
{
Var keyCode;
If (event = null)
{
KeyCode = window. event. keyCode;
Window. event. preventDefault ();
}
Else
{
KeyCode = event. keyCode;
Event. preventDefault ();
}
Switch (keyCode)
{
Case 37: // left;
Wall_x-= unit;
If (wall_x Wall_x = bound_left;
Break;
Case 38: // up
Wall_y-= unit;
If (wall_y Wall_y = bound_top;
Break;
Case 39: // right
Wall_x + = unit;
If (wall_x + wall_width> bound_right)
Wall_x = bound_right-wall_width;
Break;
Case 40: // down
Wall_y + = unit;
If (wall_y + wall_height> bound_bottom)
Wall_y = bound_bottom-wall_height;
Break;
Default:
Break;
}
}
Function draw_all ()
{
Ctx. beginPath ();
Ctx. clearRect (box_x, box_y, box_width, box_height );
Ctx. fillStyle = "rgb (255, 0, 0 )";
// Ctx. lineWidth = ball_radius;
Ctx. arc (ball_x, ball_y, ball_radius, 0, Math. PI * 2, true );
Ctx. fill (); // note
Ctx. fillStyle = "rgb (0, 0 )";
Ctx. fillRect (wall_x, wall_y, wall_width, wall_height );
Ctx. strokeRect (box_x, box_y, box_width, box_height );
}
Function init ()
{
Canvas = document. getElementById ('canvas ');
Ctx = canvas. getContext ('2d ');
Draw_all ();
SetInterval (draw_all, 100 );
SetInterval (move_ball, 50 );
Window. addEventListener ('keylow', move_wall, false); // note
}
Script

Difficulties

Collision detection and handling of ball and brick
Split bricks into four line segments
Collision Detection is performed on the ball and each line segment.

Collision Detection of small balls and line segments is introduced in another article http://www.jb51.net/html5/93997.html.