Comentário: Os objetos são lançados em uma direção horizontal a uma certa velocidade inicial. Se o objeto for afetado apenas pela gravidade, esse movimento será chamado de movimento de arremesso plano. Este artigo apresenta o uso do HTML5 para simular o movimento de arremesso plano de uma pequena bola. O código específico é o seguinte. Amigos interessados podem se referir a ele. Espero que seja útil para você.
Um objeto é jogado na direção horizontal a uma certa velocidade inicial. Se o objeto for afetado apenas pela gravidade, esse movimento será chamado de movimento de arremesso plano. O movimento de fundição plana pode ser considerado como um movimento linear constante na direção horizontal e um movimento combinado de movimento de queda livre na direção vertical. Para objetos que são arremessados, o movimento arremessado é um movimento uniforme da curva de velocidade e a trajetória de movimento do objeto arborizado é uma parábola. O movimento de propagação horizontal é um movimento da curva. O tempo do movimento de espalhamento plano está relacionado apenas à altura vertical do ponto de arremesso; O deslocamento horizontal do pouso do objeto está relacionado ao tempo (altura vertical) e à velocidade inicial horizontal.
<html>
<head>
<meta charset = utf-8>
<title> html5 conchas </ititle>
<Cript>
//caixa
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_Height = 300;
//bola
var Ball_x = 10;
var Ball_Y = 10;
var Ball_radius = 10;
var Ball_vx = 10;
var Ball_Vy = 0;
//constante
var g = 10; // Nota
taxa var = 0,9;
//vinculado
var bound_left = box_x+ball_radius;
var bound_right = box_x+box_width-ball_radius;
var limite_top = box_y+ball_radius;
var bound_bottom = box_y+box_height-ball_radius;
//contexto
var ctx;
função init ()
{
ctx = document.getElementById ('Canvas'). getContext ('2D');
ctx.linewidth = ball_radius;
ctx.fillstyle = "rgb (200,0,50)";
move_ball ();
setInterval (move_ball, 100);
}
função 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.stragerect (box_x, box_y, box_width, box_height);
}
função 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 = limite_left;
ball_vx = -ball_vx*0.9;
ball_vy = ball_vy*0.9;
}
if (cur_ball_x> bound_right)
{
cur_ball_x = limite_right;
ball_vx = -ball_vx*0.9;
ball_vy = ball_vy*0.9;
}
if (cur_ball_y <bound_top)
{
cur_ball_y = limite_top;
ball_vy = -ball_vy*0.9;
ball_vx = ball_vx*0.9;
}
if (cur_ball_y> bound_bottom)
{
cur_ball_y = limite_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>
O HTML5 simula o processo de arremesso de bola.