주석 : 물체는 특정 초기 속도로 수평 방향으로 던져집니다. 물체가 중력에 의해서만 영향을받는 경우, 그러한 움직임을 평평한 던지기 운동이라고합니다. 이 기사는 작은 공의 평평한 던지기 운동을 시뮬레이션하기 위해 HTML5를 사용하는 것을 소개합니다. 특정 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
물체는 특정 초기 속도로 수평 방향으로 던져집니다. 물체가 중력에 의해서만 영향을받는 경우, 그러한 움직임을 평평한 던지기 운동이라고합니다. 평평한 주조 운동은 수평 방향의 일정한 선형 운동 및 수직 방향으로 자유 낙하 운동의 결합 운동으로 간주 될 수 있습니다. 평평한 물체의 경우, 평평한 피치 운동은 균일 한 속도 곡선 운동이며, 평평한 피치 물체의 모션 궤적은 포물선입니다. 수평 확산 운동은 곡선 운동입니다. 평평한 확산 운동의 시간은 던지는 지점의 수직 높이와 관련이 있습니다. 물체 착륙의 수평 변위는 시간 (수직 높이) 및 수평 초기 속도와 관련이 있습니다.
<html>
<헤드>
<meta charset = utf-8>
<title> html5 쉘 </title>
<cript>
//상자
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; // 참고
var rate = 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);
}
기능 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);
}
함수 move_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;
}
</스크립트>
</head>
<body>
<캔버스/>
</body>
</html>
HTML5는 볼 플랫 던지기 과정을 시뮬레이션합니다.