HTML5 เทเบิลเทนนิส (การตรวจจับการชน) ตัวอย่าง 2

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-16 20:16:01

ความคิดเห็น: ลูกบอลสามารถเคลื่อนที่ได้อย่างอิสระภายในกล่องและอิฐสีดำสามารถควบคุมได้เพื่อเลื่อนขึ้นและลงซ้ายและขวาผ่านกุญแจทิศทางที่จะชนกับลูกบอล แนวคิดการใช้งานและรหัสเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ HTML5

ที่อยู่สาธิต

บทนำสั้น ๆ

ลูกบอลสามารถขยับได้อย่างอิสระภายในกล่อง

อิฐสีดำสามารถควบคุมเพื่อเลื่อนขึ้นและลงซ้ายและขวาผ่านกุญแจทิศทางเพื่อชนกับลูกบอล

การใช้รหัส

หากต้องการเปลี่ยนเทมเพลตนี้ให้เลือกเครื่องมือ | เทมเพลต

และเปิดเทมเพลตในตัวแก้ไข

<! doctype html>

<html>

<head>

<tite> เกมเทเบิลเทนนิส </title>

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 unit = 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;

ถ้า (ball_y <bound_top)

ball_y = bound_top;

ball_vy = -ball_vy;

ถ้า (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 KYCODE;

if (event == null)

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: // ขึ้น

Wall_y- = หน่วย;

ถ้า (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 (); // note

ctx.fillstyle = "rgb (0,0,0)";

ctx.fillrect (wall_x, wall_y, wall_width, wall_height);

ctx.strokerect (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>

</body>

</html>

ความยากลำบาก

การตรวจจับการชนและการชนกันของลูกบอลขนาดเล็กและอิฐ

ย่อยสลายอิฐเป็น 4 ส่วนของเส้น

การตรวจจับการชนจะดำเนินการกับลูกบอลและแต่ละส่วนของเส้นตามลำดับ

การตรวจจับการชนกันของลูกและกลุ่มบรรทัดถูกนำมาใช้ในบทความอื่น