ความคิดเห็น: วัตถุถูกโยนไปในทิศทางแนวนอนที่ความเร็วเริ่มต้นที่แน่นอน หากวัตถุได้รับผลกระทบจากแรงโน้มถ่วงเท่านั้นการเคลื่อนไหวดังกล่าวเรียกว่าการเคลื่อนที่แบบแบน บทความนี้แนะนำการใช้ HTML5 เพื่อจำลองการเคลื่อนไหวการขว้างปาแบนของลูกบอลขนาดเล็ก รหัสเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
วัตถุถูกโยนไปในทิศทางแนวนอนที่ความเร็วเริ่มต้นที่แน่นอน หากวัตถุได้รับผลกระทบจากแรงโน้มถ่วงเท่านั้นการเคลื่อนไหวดังกล่าวเรียกว่าการเคลื่อนที่แบบแบน การเคลื่อนไหวการหล่อแบบแบนถือได้ว่าเป็นการเคลื่อนที่เชิงเส้นคงที่ในทิศทางแนวนอนและการเคลื่อนที่แบบรวมของการเคลื่อนที่แบบอิสระในทิศทางแนวตั้ง สำหรับวัตถุที่มีการแหลมแบบแบนการเคลื่อนไหวของเสียงแหลมแบบแบนคือการเคลื่อนที่ของเส้นโค้งความเร็วสม่ำเสมอและวิถีการเคลื่อนที่ของวัตถุที่มีการแหลมเป็นพาราโบลา การเคลื่อนไหวการแพร่กระจายในแนวนอนคือการเคลื่อนไหวของเส้นโค้ง เวลาของการเคลื่อนที่แบบแบนนั้นเกี่ยวข้องกับความสูงในแนวตั้งของจุดขว้างเท่านั้น การกระจัดในแนวนอนของการลงจอดของวัตถุนั้นเกี่ยวข้องกับเวลา (ความสูงในแนวตั้ง) และความเร็วเริ่มต้นแนวนอน
<html>
<head>
<meta charset = utf-8>
<title> html5 shells </title>
<script>
//กล่อง
var box_x = 0;
var box_y = 0;
var box_width = 300;
var box_height = 300;
//ลูกบอล
var ball_x = 10;
var ball_y = 10;
var ball_radius = 10;
var ball_vx = 10;
var ball_vy = 0;
//คงที่
var g = 10; // note
อัตรา var = 0.9;
//ผูกพัน
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;
//บริบท
var ctx;
ฟังก์ชั่น init ()
-
ctx = document.getElementById ('canvas'). getContext ('2d');
ctx.lineWidth = ball_radius;
ctx.fillstyle = "RGB (200,0,50)";
move_ball ();
setInterval (move_ball, 100);
-
ฟังก์ชั่น 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);
-
ฟังก์ชั่น 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 จำลองกระบวนการขว้างลูกบอลแบน