댓글 : 공은 상자 안에서 자유롭게 움직일 수 있으며 검은 벽돌은 방향 키를 통해 왼쪽과 오른쪽으로 위아래로 움직일 수 있습니다. 특정 구현 아이디어와 코드는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람이 HTML5를 배우는 것이 도움이되기를 바랍니다.
데모 주소
간단한 소개
공은 상자 안에서 자유롭게 움직일 수 있습니다
검은 벽돌은 방향 키를 통해 왼쪽 및 오른쪽으로 위아래로 움직일 수 있도록 제어 할 수 있습니다.
코드 구현
<!-
이 템플릿을 변경하려면 도구를 선택하십시오 | 템플릿
편집기에서 템플릿을 엽니 다.
->
<! doctype html>
<html>
<헤드>
<제목> 탁구 게임 </제목>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<cript>
var ctx;
var 캔버스;
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);
if (t <0.0)
{
t = 0.0;
}
else if (t> 1.0)
t = 1.0;
var dx1 = (sx + t * dx) -cx;
var dy1 = (sy + t * dy) - cy;
var rt = dx1 * dx1 + dy1 * dy1;
if (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;
}
if (ball_y <bound_top)
{
ball_y = bound_top;
ball_vy = -ball_vy;
}
if (ball_y> bound_bottom)
{
ball_y = bound_bottom;
ball_vy = -ball_vy;
}
// 상단으로 추락했습니다
if (intersect
{
ball_y = Wall_y-ball_radius;
ball_vy = -ball_vy;
}
// 왼쪽으로 충돌합니다
if (intersect
{
ball_x = Wall_x-ball_radius;
ball_vx = -ball_vx;
}
// 오른쪽으로 충돌합니다
if (intersect
{
ball_x = wall_x+wall_width+ball_radius;
ball_vx = -ball_vx;
}
// 추락
if (intersect
{
ball_y = wall_y+wall_height+ball_radius;
ball_vy = -ball_vy;
}
}
기능 move_wall (EV)
{
var 키 코드;
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 : // UP
wall_y- = 단위;
if (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 (); // 참고
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); // 참고
}
</스크립트>
</head>
<body>
<canvas> </canvas>
</body>
</html>
어려움
작은 공과 벽돌의 충돌 감지 및 충돌 처리
벽돌을 4 라인 세그먼트로 분해하십시오
충돌 감지는 각각 볼과 각 라인 세그먼트에서 수행됩니다.
볼 및 라인 세그먼트의 충돌 감지는 다른 기사에서 소개됩니다.