주석 : 점프 볼은 HTML5를 사용하여 구현됩니다. 놀라지 마십시오. HTML5를 사용하여 구현할 수 있습니다. 특정 스크린 샷 및 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
<html>
<헤드>
<meta charset = utf-8>
<title> 점프 볼 </title>
<cript>
//상자
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.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;
}
</스크립트>
</head>
<body>
<캔버스/>
</body>
</html>