تعليق: يمكن أن تتحرك الكرة بحرية داخل الصندوق ، ويمكن التحكم في الطوب الأسود للتحرك لأعلى ولأسفل ، يسارًا ويمينًا من خلال مفتاح الاتجاه للتصادم مع الكرة. أفكار التنفيذ المحددة ورموزها هي كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون من المفيد للجميع تعلم HTML5.
عنوان العرض التوضيحي
مقدمة موجزة
يمكن أن تتحرك الكرة بحرية داخل الصندوق
يمكن التحكم في الطوب الأسود للتحرك لأعلى ولأسفل ، يسارًا ويمينًا من خلال مفتاح الاتجاه للتصادم مع الكرة
تنفيذ الكود
<!-
لتغيير هذا القالب ، اختر الأدوات | قوالب
وافتح القالب في المحرر.
->
<! doctype html>
<html>
<head>
<title> لعبة تنس الطاولة </title>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<script>
var ctx ؛
var canvas.
var ball_x = 10 ؛
var ball_y = 10 ؛
var ball_radius = 10 ؛
var ball_vx = 10 ؛
var ball_vy = 8 ؛
var wall_x = 30 ؛
var wall_y = 40 ؛
var wall_width = 30 ؛
var wall_height = 60 ؛
var box_x = 0 ؛
var box_y = 0 ؛
var box_width = 300 ؛
var box_height = 300 ؛
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 = 10 ؛
وظيفة تقاطع (SX ، SY ، FX ، FY ، CX ، CY ، RAD)
{
var dx ؛
var dy ؛
var t ؛
var rt ؛
dx = fx - sx ؛
dy = fy - sy ؛
t = 0.0 - (((sx - cx) * dx + (sy - cy) * dy) / (dx * dx + dy * dy)) ؛
إذا (T <0.0)
{
t = 0.0 ؛
}
آخر إذا (t> 1.0)
t = 1.0 ؛
var dx1 = (sx + t * dx) - cx ؛
var dy1 = (sy + t * dy) - cy ؛
var rt = dx1 * dx1 + dy1 * dy1 ؛
إذا (rt <rad * rad)
العودة صحيح.
آخر
العودة كاذبة
}
وظيفة move_ball ()
{
ball_x = ball_x+ball_vx ؛
ball_y = ball_y+ball_vy ؛
if (ball_x <bound_left)
{
ball_x = bound_left ؛
ball_vx = -ball_vx ؛
}
if (ball_x> bound_right)
{
ball_x = bound_right ؛
ball_vx = -ball_vx ؛
}
if (ball_y <bound_top)
{
ball_y = bound_top ؛
ball_vy = -ball_vy ؛
}
if (ball_y> bound_bottom)
{
ball_y = bound_bottom ؛
ball_vy = -ball_vy ؛
}
// تحطمت إلى الأعلى
if (intersect (wall_x ، wall_y ، wall_x+wall_width ، wall_y+wall_height ، ball_x ، ball_y ، ball_radius)))
{
ball_y = wall_y-ball_radius ؛
ball_vy = -ball_vy ؛
}
// تحطم إلى اليسار
if (intersect (wall_x ، wall_y ، wall_x ، wall_y+wall_height ، ball_x ، ball_y ، ball_radius))
{
ball_x = wall_x-ball_radius ؛
ball_vx = -ball_vx ؛
}
// تحطم إلى اليمين
if (intersect (wall_x+wall_width ، wall_y ، wall_x+wall_width ، wall_y+wall_height ، ball_x ، ball_y ، ball_radius))
{
ball_x = wall_x+wall_width+ball_radius ؛
ball_vx = -ball_vx ؛
}
// تحطم
if (intersect (wall_x ، wall_y+wall_height ، wall_x+wall_width ، wall_y+wall_height ، ball_x ، ball_y ، ball_radius)))
{
ball_y = wall_y+wall_height+ball_radius ؛
ball_vy = -ball_vy ؛
}
}
وظيفة move_wall (EV)
{
Var keycode ؛
إذا (الحدث == فارغ)
{
keycode = window.event.keycode ؛
window.event.preventDefault () ؛
}
آخر
{
keycode = event.keycode ؛
Event.PreventDefault () ؛
}
التبديل (رمز المفاتيح)
{
الحالة 37: // اليسار ؛
wall_x- = الوحدة ؛
if (wall_x <bound_left)
wall_x = bound_left ؛
استراحة؛
الحالة 38: // UP
wall_y- = الوحدة ؛
if (wall_y <bound_top)
wall_y = bound_top ؛
استراحة؛
الحالة 39: // الحق
wall_x+= الوحدة ؛
if (wall_x+wall_width> bound_right)
wall_x = bound_right-wall_width ؛
استراحة؛
الحالة 40: // لأسفل
wall_y+= الوحدة ؛
if (wall_y+wall_height> bound_bottom)
wall_y = bound_bottom-wall_height ؛
استراحة؛
تقصير:
استراحة؛
}
}
وظيفة draw_all ()
{
ctx.beginpath () ؛
ctx.clearrect (box_x ، box_y ، box_width ، box_height) ؛
ctx.fillstyle = "rgb (255،0،0)" ؛
//ctx.linewidth=ball_radius ؛
ctx.arc (ball_x ، ball_y ، ball_radius ، 0 ، math.pi*2 ، true) ؛
ctx.fill () ؛ // ملاحظة
ctx.fillstyle = "rgb (0،0،0)" ؛
ctx.fillrect (wall_x ، wall_y ، wall_width ، wall_height) ؛
CTX.StrokEct (box_x ، box_y ، box_width ، box_height) ؛
}
وظيفة init ()
{
canvas = document.getElementById ('canvas') ؛
ctx = canvas.getContext ('2d') ؛
draw_all () ؛
setInterval (draw_all ، 100) ؛
setInterval (move_ball ، 50) ؛
window.addeventListener ('keydown' ، move_wall ، false) ؛ // note
}
</script>
</head>
<body>
<Canvas> </tanvas>
</body>
</html>
صعوبة
الكشف عن التصادم وعلاج التصادم للكرات الصغيرة والطوب
تحلل الطوب إلى 4 شرائح خط
يتم إجراء اكتشاف التصادم على الكرة وكل مقطع خط على التوالي.
يتم إدخال الاكتشاف الاصطدام للكرات وشرائح الخط في مقال آخر.