コメント:ジャンプボールは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>