HTML5 simuliert flache Wurfbewegungen (simuliert den flachen Wurfbewegungsprozess eines kleinen Balls)_html5-Tutorial-Fähigkeiten

Das Objekt wird mit einer bestimmten Anfangsgeschwindigkeit in horizontaler Richtung geschleudert. Wenn das Objekt nur durch die Schwerkraft beeinflusst wird, wird eine solche Bewegung als horizontale Wurfbewegung bezeichnet. Die horizontale Wurfbewegung kann als kombinierte Bewegung aus gleichförmiger linearer Bewegung in horizontaler Richtung und freier Fallbewegung in vertikaler Richtung betrachtet werden. Da die äußere Nettokraft auf ein Objekt in horizontaler Bewegung eine konstante Kraft ist, ist die Bewegung eines Objekts in horizontaler Bewegung eine gleichmäßige Kurvenbewegung mit variabler Geschwindigkeit und die Flugbahn eines horizontal geschleuderten Objekts ist eine Parabel. Die horizontale Wurfbewegung ist eine gekrümmte Bewegung. Die Zeit der horizontalen Wurfbewegung hängt nur von der vertikalen Höhe des Wurfpunkts ab.

Code kopieren

Der Code lautet wie folgt:

>
;
var box_y=0;
var box_height=300;//ball
var ball_y=10;
var ball_vx=10;
var ball_vy=0;
//constant
var g=10;//note
var rate=0.9;//bound
varbound_left=box_x ball_radius;
varbound_top=box_y ball_radius;
//context
var ctx; 🎜>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.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_xball_vx =-ball_vx *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_yball_vy=-ball_vy*0.9;
}
if(cur_ball_y>bound_bottom)
{
cur_ball_y=bound_bottom;
ball_vy=-ball_vy*0.9;
}
ball_x= cur_ball_x;
ball_y=cur_ball_y

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



html5 Simulationsball Flacher Wurfbewegungsprozess .