コメント：オブジェクトは、特定の初期速度で水平方向にスローされます。オブジェクトが重力のみの影響を受ける場合、そのような動きはフラットスローモーションと呼ばれます。この記事では、HTML5の使用を紹介して、小さなボールの平らな投げ動きをシミュレートします。特定のコードは次のとおりです。興味のある友達はそれを参照できます。それがあなたに役立つことを願っています。
オブジェクトは、特定の初期速度で水平方向にスローされます。オブジェクトが重力のみの影響を受ける場合、そのような動きはフラットスローモーションと呼ばれます。平らな鋳造の動きは、水平方向の一定の線形運動と、垂直方向の自由落下運動の複合運動と見なすことができます。平らなオブジェクトの場合、平らなピッチの動きは均一な速度曲線運動であり、平らなオブジェクトの動きの軌跡は放物線です。水平広がりの動きは、曲線の動きです。平らな広がりの動きの時間は、投げ点の垂直高さにのみ関連しています。オブジェクト着陸の水平変位は、時間（垂直の高さ）と水平の初期速度に関連しています。
<html>
<head>
<メタcharset = utf-8>
<title> html5シェル</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 = 10;
var ball_vy = 0;
//絶え間ない
var g = 10; // note
varレート= 0.9;
//バウンド
var bound_left = box_x+ball_radius;
var bound_right = box_x+box_width-ball_radius;
var bound_top = box_y+ball_radius;
var 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）;
}
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 temp = ball_vy;
ball_vy = ball_vy+g;
var cur_ball_y = ball_y+ball_vy+g/2;
if（cur_ball_x <bound_left）
{
cur_ball_x = bound_left;
ball_vx = -ball_vx*0.9;
ball_vy = ball_vy*0.9;
}
if（cur_ball_x> bound_right）
{
cur_ball_x = bound_right;
ball_vx = -ball_vx*0.9;
ball_vy = ball_vy*0.9;
}
if（cur_ball_y <bound_top）
{
cur_ball_y = bound_top;
ball_vy = -ball_vy*0.9;
ball_vx = ball_vx*0.9;
}
if（cur_ball_y> bound_bottom）
{
cur_ball_y = bound_bottom;
ball_vy = -ball_vy*0.9;
ball_vx = ball_vx*0.9;
}
ball_x = cur_ball_x;
ball_y = cur_ball_y;
}
</script>
</head>
<body>
<canvas/>
</body>
</html>
HTML5は、ボールフラットスロープロセスをシミュレートします。