Komentar: Bola lompatan diimplementasikan menggunakan HTML5. Jangan kaget. Ini dapat diimplementasikan menggunakan HTML5. Tangkapan layar dan kode spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
<Html>
<head>
<Meta Charset = UTF-8>
<title> bola melompat </iteme>
<script>
//kotak
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
// CATATAN: Pengaturan bola menggunakan pusat bola
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;
//bola
//konteks
var ctx;
fungsi init ()
{
ctx = document.geteLementById ('canvas'). getContext ('2d');
ctx.linewidth = ball_radius;
ctx.fillstyle = "rgb (200,0,50)";
move_ball ();
setInterval (move_ball, 100); // note
}
function 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);
}
function 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>