التعليق: يتم تنفيذ كرة القفز باستخدام HTML5. لا تفاجأ. يمكن تنفيذها باستخدام HTML5. لقطات ورموز محددة هي كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
<html>
<head>
<meta charset = utf-8>
<title> كرة القفز </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 = 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) ؛ // ملاحظة
}
وظيفة 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 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>
<canvas/>
</body>
</html>