HTML5 simule le mouvement de lancer à plat (simulant le processus de mouvement de lancer à plat d'une petite balle)_html5 compétences du didacticiel

L'objet est lancé dans la direction horizontale avec une certaine vitesse initiale. Si l'objet n'est affecté que par la gravité, un tel mouvement est appelé mouvement de lancer horizontal. Le mouvement de lancer horizontal peut être considéré comme le mouvement combiné d’un mouvement linéaire uniforme dans la direction horizontale et d’un mouvement de chute libre dans la direction verticale. Étant donné que la force externe nette exercée sur un objet en mouvement horizontal est une force constante, le mouvement d'un objet en mouvement horizontal est un mouvement courbe uniforme à vitesse variable et la trajectoire d'un objet lancé horizontalement est une parabole. Le mouvement de lancement horizontal est un mouvement courbe. Le temps du mouvement de lancement horizontal est uniquement lié à la hauteur verticale du point de lancement ; le déplacement horizontal de l'objet d'atterrissage est lié au temps (hauteur verticale) et à la vitesse initiale horizontale.

Copier le code

Le code est le suivant :

>

;
var box_y=0;
var box_width=300;
var box_height=300;
//ball
var ball_x=10;
var ball_vx=10;
var ball_vy=0;
//constant
var g=10;//note
var rate=0.9; > 🎜>function 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); .fill();
ctx.StrokeRect(box_x,box_y,box_width,box_height);
}
function 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{
cur_ball_x=bound_left; *0.9;
ball_vy=ball_vy*0.9;
if(cur_ball_x>bound_right)
{
cur_ball_x=bound_right; =ball_vy*0.9;
}
if(cur_ball_y{
cur_ball_y=bound_top;
ball_vy=-ball_vy*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;
}

id="canvas" width="400" height="400"/>




Processus de mouvement de lancer à plat .