Comments: The ball can be freely moved inside the box. You can use the arrow keys to control the movement of Black bricks up, down, and left to collide with the ball. The specific implementation ideas and code are as follows. If you are interested, refer to it, 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:
<! --
To change this template, choose Tools | Templates
And open the template in the editor.
-->
<! DOCTYPE html>
<Html>
<Head>
<Title> Table Tennis Games </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<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 <bound_left)
{
Ball_x = bound_left;
Ball_vx =-ball_vx;
}
If (ball_x> bound_right)
{
Ball_x = bound_right;
Ball_vx =-ball_vx;
}
If (ball_y <bound_top)
{
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 <bound_left)
Wall_x = bound_left;
Break;
Case 38: // up
Wall_y-= unit;
If (wall_y <bound_top)
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>
</Head>
<Body onLoad = "init ();">
<Canvas id = "canvas" width = "300" height = "300"> </canvas>
</Body>
</Html>
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
