Commentaire: La balle de saut est mise en œuvre à l'aide de HTML5. Ne soyez pas surpris. Il peut être implémenté en utilisant HTML5. Les captures d'écran et les codes spécifiques sont les suivants. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
<html>
<adal>
<Meta Charset = UTF-8>
<Title> Ball Jumping </Title>
<cript>
//boîte
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
// Remarque: le réglage du ballon utilise le centre de la balle
var ball_x = 10;
var ball_y = 10;
var ball_radius = 10;
var ball_vx = 5;
var ball_vy = 3;
var box_bound_left = box_x + ball_radius;
var box_bound_right = box_x + box_width-ball_radius;
var box_bound_top = box_y + ball_radius;
var box_bound_bottom = box_y + box_height-ball_radius;
//balle
//contexte
var ctx;
fonction init ()
{
ctx = document.getElementById ('canvas'). getContext ('2d');
ctx.lineWidth = Ball_Radius;
ctx.fillStyle = "RGB (200,0,50)";
MOVE_BALL ();
setInterval (move_ball, 100); // note
}
fonction move_ball ()
{
ctx.clearrect (box_x, box_y, box_width, box_height);
move_and_check ();
ctx.beginPath ();
ctx.arc (Ball_x, Ball_Y, Ball_Radius, 0, math.pi * 2, true);
ctx.fill ();
ctx.strokect (box_x, box_y, box_width, box_height);
}
fonction move_and_check ()
{
var cur_ball_x = ball_x + ball_vx;
var cur_ball_y = ball_y + ball_vy;
if (cur_ball_x <box_bound_left)
{
ball_vx = -ball_vx;
cur_ball_x = box_bound_left;
}
if (cur_ball_x> box_bound_right)
{
ball_vx = -ball_vx;
cur_ball_x = box_bound_right;
}
if (cur_ball_y <box_bound_top)
{
ball_vy = -ball_vy;
cur_ball_y = box_bound_top;
}
if (cur_ball_y> box_bound_bottom)
{
ball_vy = -ball_vy;
cur_ball_y = box_bound_bottom;
}
ball_x = cur_ball_x;
ball_y = cur_ball_y;
}
</cript>
</ head>
<body>
<canvas />
</docy>
</html>