Kommentar: Der Sprungball wird mit HTML5 implementiert. Sei nicht überrascht. Es kann mit HTML5 implementiert werden. Die spezifischen Screenshots und Codes sind wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
<html>
<kopf>
<meta charset = utf-8>
<title> Sprungball </title>
<Script>
//Kasten
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
// Hinweis: Das Einstellen des Balls verwendet die Mitte des Balls
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;
//Ball
//Kontext
var ctx;
Funktion init ()
{
ctx = document.getElementById ('canvas'). getContext ('2d');
ctx.linewidth = ball_radius;
Ctx.FillStyle = "RGB (200,0,50)";
move_ball ();
setInterval (Move_ball, 100); // Notiz
}
Funktion 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.strokerect (box_x, box_y, box_width, box_height);
}
Funktion 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;
}
</script>
</head>
<body>
<Canvas/>
</body>
</html>