التعليق: يتم إلقاء الكائنات في اتجاه أفقي بسرعة أولية معينة. إذا كان الكائن يتأثر فقط بالجاذبية ، فإن مثل هذه الحركة تسمى حركة رمي مسطحة. تقدم هذه المقالة استخدام 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 ؛ // ملاحظة
معدل 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.StrokEct (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 يحاكي عملية رمي الكرة.