コメント:オブジェクトは、特定の初期速度で水平方向にスローされます。オブジェクトが重力のみの影響を受ける場合、そのような動きはフラットスローモーションと呼ばれます。この記事では、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は、ボールフラットスロープロセスをシミュレートします。