Commentaire: Les objets sont lancés dans une direction horizontale à une certaine vitesse initiale. Si l'objet n'est affecté que par la gravité, un tel mouvement est appelé mouvement de lancer plat. Cet article présente l'utilisation de HTML5 pour simuler le mouvement de lancement plat d'une petite balle. Le code spécifique est le suivant. Les amis intéressés peuvent y faire référence. J'espère que cela vous sera utile.
Un objet est lancé dans le sens horizontal à une certaine vitesse initiale. Si l'objet n'est affecté que par la gravité, un tel mouvement est appelé mouvement de lancer plat. Le mouvement de coulée plat peut être considéré comme un mouvement linéaire constant dans la direction horizontale et un mouvement combiné de mouvement de chute libre dans la direction verticale. Pour les objets qui sont à plan plat, le mouvement à poitrine est un mouvement de courbe de vitesse uniforme, et la trajectoire de mouvement de l'objet plat est une parabole. Le mouvement de propagation horizontale est un mouvement de courbe. L'heure du mouvement de propagation plate n'est liée qu'à la hauteur verticale du point de lancer; Le déplacement horizontal de l'atterrissage de l'objet est lié au temps (hauteur verticale) et à la vitesse initiale horizontale.
<html>
<adal>
<Meta Charset = UTF-8>
<Title> Html5 Shels </Title>
<cript>
//boîte
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
//balle
var ball_x = 10;
var ball_y = 10;
var ball_radius = 10;
var ball_vx = 10;
var ball_vy = 0;
//constante
var g = 10; // note
Taux var = 0,9;
//lié
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;
//contexte
var ctx;
fonction init ()
{
ctx = document.getElementById ('canvas'). getContext ('2d');
ctx.lineWidth = Ball_Radius;
ctx.fillStyle = "RGB (200,0,50)";
MOVE_BALL ();
setInterval (move_ball, 100);
}
fonction 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.strokect (box_x, box_y, box_width, box_height);
}
fonction 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;
}
</cript>
</ head>
<body>
<canvas />
</docy>
</html>
HTML5 simule le processus de lancement à plat.