コメント：ジャンプボールはHTML5を使用して実装されます。驚かないでください。 HTML5を使用して実装できます。特定のスクリーンショットとコードは次のとおりです。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
<html>
<head>
<メタcharset = utf-8>
<title>ジャンプボール</title>
<スクリプト>
//箱
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
//注：ボールの設定は、ボールの中心を使用します
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;
//ボール
//コンテクスト
var ctx;
関数init（）
{
ctx = document.getElementById（ 'canvas'）。getContext（ '2d'）;
ctx.linewidth = ball_radius;
ctx.fillstyle = "rgb（200,0,50）";
move_ball（）;
setInterval（move_ball、100）; // note
}
functionmove_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）;
}
functionmove_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>