ความคิดเห็น: ลูกบอลสามารถเคลื่อนที่ได้อย่างอิสระภายในกล่องและอิฐสีดำสามารถควบคุมได้เพื่อเลื่อนขึ้นและลงซ้ายและขวาผ่านกุญแจทิศทางที่จะชนกับลูกบอล แนวคิดการใช้งานและรหัสเฉพาะมีดังนี้ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ HTML5
ที่อยู่สาธิต
บทนำสั้น ๆ
ลูกบอลสามารถขยับได้อย่างอิสระภายในกล่อง
อิฐสีดำสามารถควบคุมเพื่อเลื่อนขึ้นและลงซ้ายและขวาผ่านกุญแจทิศทางเพื่อชนกับลูกบอล
การใช้รหัส
-
หากต้องการเปลี่ยนเทมเพลตนี้ให้เลือกเครื่องมือ | เทมเพลต
และเปิดเทมเพลตในตัวแก้ไข
-
<! doctype html>
<html>
<head>
<tite> เกมเทเบิลเทนนิส </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 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>
<Canvas> </sanvas>
</body>
</html>
ความยากลำบาก
การตรวจจับการชนและการชนกันของลูกบอลขนาดเล็กและอิฐ
ย่อยสลายอิฐเป็น 4 ส่วนของเส้น
การตรวจจับการชนจะดำเนินการกับลูกบอลและแต่ละส่วนของเส้นตามลำดับ
การตรวจจับการชนกันของลูกและกลุ่มบรรทัดถูกนำมาใช้ในบทความอื่น