Kommentar: Objekte werden in eine bestimmte anfängliche Geschwindigkeit in horizontaler Richtung geworfen. Wenn das Objekt nur von der Schwerkraft beeinflusst wird, wird eine solche Bewegung als flache Wurfbewegung bezeichnet. In diesem Artikel wird die Verwendung von HTML5 eingeführt, um die flache Wurfbewegung eines kleinen Balls zu simulieren. Der spezifische Code ist wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Ein Objekt wird in eine bestimmte anfängliche Geschwindigkeit in horizontale Richtung geworfen. Wenn das Objekt nur von der Schwerkraft beeinflusst wird, wird eine solche Bewegung als flache Wurfbewegung bezeichnet. Die flache Gussbewegung kann als konstante lineare Bewegung in horizontaler Richtung und eine kombinierte Bewegung der freien Fallbewegung in vertikaler Richtung angesehen werden. Für Objekte, die flach aufgebraucht sind, ist die flache Bewegung eine gleichmäßige Geschwindigkeitskurvenbewegung, und die Bewegungs-Flugbahn des flachen Objekts ist eine Parabola. Die horizontale Ausbreitungsbewegung ist eine Kurvenbewegung. Die Zeit der flachen Ausbreitungsbewegung hängt nur mit der vertikalen Höhe des Wurfpunkts zusammen; Die horizontale Verschiebung der Objektlandung hängt mit der Zeit (vertikale Höhe) und der horizontalen Anfangsgeschwindigkeit zusammen.
<html>
<kopf>
<meta charset = utf-8>
<title> html5 Shells </title>
<Script>
//Kasten
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
//Ball
var ball_x = 10;
var ball_y = 10;
var ball_radius = 10;
var ball_vx = 10;
var ball_vy = 0;
//Konstante
var g = 10; // Anmerkung
var rate = 0,9;
//gebunden
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;
//Kontext
var ctx;
Funktion init ()
{
ctx = document.getElementById ('canvas'). getContext ('2d');
ctx.linewidth = ball_radius;
Ctx.FillStyle = "RGB (200,0,50)";
move_ball ();
setInterval (move_ball, 100);
}
Funktion 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.strokerect (box_x, box_y, box_width, box_height);
}
Funktion 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>
</head>
<body>
<Canvas/>
</body>
</html>
HTML5 simuliert den Ball Flat -Wurfprozess.