Комментарий: объекты брошены в горизонтальном направлении с определенной начальной скоростью. Если на объект влияет только тяжесть, такое движение называется плоским бросающим движением. В этой статье представлено использование HTML5 для имитации плоского бросающего движения маленького шара. Конкретный код выглядит следующим образом. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для вас.
Объект брошен в горизонтальном направлении с определенной начальной скоростью. Если на объект влияет только тяжесть, такое движение называется плоским бросающим движением. Плоское движение литья можно рассматривать как постоянное линейное движение в горизонтальном направлении и комбинированное движение свободного движения в вертикальном направлении. Для объектов, которые плоскими пронзительно, плоское движение является однородным движением кривой скорости, а траектория движения плоского объекта является параболой. Горизонтальное распространяющее движение - это кривое движение. Время плоского распространяющегося движения связано только с вертикальной высотой точки броска; Горизонтальное смещение посадки объекта связано со временем (вертикальной высотой) и горизонтальной начальной скоростью.
<html>
<голова>
<meta charset = utf-8>
<title> HTML5 Shells </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; // Примечание
var storce = 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);
}
function 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;
}
</script>
</head>
<тело>
<canvas/>
</body>
</html>
HTML5 имитирует процесс броска шарика.