HTML5 Bounce Ball ตัวอย่างตัวอย่าง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-14 12:00:04

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

<html>

<head>

<title> Jumping Ball </title>

//กล่อง

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

var ball_vy = 3;

var box_bound_left = box_x+ball_radius;

var box_bound_right = box_x+box_width-ball_radius;

var box_bound_top = box_y+ball_radius;

var box_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); // note

ฟังก์ชั่น 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 cur_ball_y = ball_y+ball_vy;

if (cur_ball_x <box_bound_left)

ball_vx = -ball_vx;

cur_ball_x = box_bound_left;

if (cur_ball_x> box_bound_right)

ball_vx = -ball_vx;

cur_ball_x = box_bound_right;

if (cur_ball_y <box_bound_top)

ball_vy = -ball_vy;

cur_ball_y = box_bound_top;

if (cur_ball_y> box_bound_bottom)

ball_vy = -ball_vy;

cur_ball_y = box_bound_bottom;

ball_x = cur_ball_x;

ball_y = cur_ball_y;

</script>

</head>

<body>

</body>

</html>