Comentario: Los objetos se arrojan en dirección horizontal en una determinada velocidad inicial. Si el objeto solo se ve afectado por la gravedad, dicho movimiento se llama movimiento de lanzamiento plano. Este artículo presenta el uso de HTML5 para simular el movimiento de lanzamiento plano de una bola pequeña. El código específico es el siguiente. Los amigos interesados pueden referirse a él. Espero que te sea útil.
Se lanza un objeto en la dirección horizontal a una determinada velocidad inicial. Si el objeto solo se ve afectado por la gravedad, dicho movimiento se llama movimiento de lanzamiento plano. El movimiento de fundición plano puede considerarse como un movimiento lineal constante en la dirección horizontal y un movimiento combinado de movimiento de caída libre en la dirección vertical. Para los objetos que son degados planos, el movimiento de aguas planas es un movimiento de curva de velocidad uniforme, y la trayectoria de movimiento del objeto plano es una parábola. El movimiento de propagación horizontal es un movimiento de curva. El tiempo del movimiento de propagación plana solo está relacionado con la altura vertical del punto de lanzamiento; El desplazamiento horizontal del aterrizaje del objeto está relacionado con el tiempo (altura vertical) y la velocidad inicial horizontal.
<html>
<Evista>
<meta charset = utf-8>
<title> html5 shells </title>
<script>
//caja
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
//pelota
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
tasa var = 0.9;
//atado
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;
//contexto
var ctx;
función init ()
{
ctx = document.getElementById ('Canvas'). getContext ('2d');
ctx.linewidth = ball_radius;
ctx.fillStyle = "RGB (200,0,50)";
Move_ball ();
setInterval (Move_ball, 100);
}
función 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, verdadero);
ctx.fill ();
ctx.strokerect (box_x, box_y, box_width, box_height);
}
función 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>
</ablo>
<Body>
<Canvas/>
</body>
</html>
HTML5 simula el proceso de lanzamiento plano de la pelota.