Comentário: A bola pode se mover livremente para dentro da caixa, e os tijolos pretos podem ser controlados para se mover para cima e para baixo, para a esquerda e direita através da chave de direção para colidir com a bola. As idéias e códigos de implementação específicos são os seguintes. Amigos interessados podem se referir a ele. Espero que seja útil que todos aprendam HTML5.
Endereço de demonstração
Breve introdução
A bola pode se mover livremente dentro da caixa
O tijolo preto pode ser controlado para subir e descer, para a esquerda e direita através da chave de direção para colidir com a bola
Implementação de código
<!-
Para alterar este modelo, escolha Ferramentas | Modelos
e abra o modelo no editor.
->
<! Doctype html>
<html>
<head>
<title> Tabela Tennis Game </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Cript>
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 limite_top = box_y+ball_radius;
var bound_bottom = box_y+box_height-ball_radius;
unidade var = 10;
função intersect (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));
se (t <0,0)
{
t = 0,0;
}
caso contrário, se (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)
retornar true;
outro
retornar falso;
}
função 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 = limite_right;
ball_vx = -ball_vx;
}
if (ball_y <bound_top)
{
ball_y = limite_top;
ball_vy = -ball_vy;
}
if (ball_y> bound_bottom)
{
ball_y = limite_bottom;
ball_vy = -ball_vy;
}
// caiu no topo
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;
}
// trava à esquerda
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;
}
// trava à direita
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;
}
// BRATE para baixo
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;
}
}
função move_wall (EV)
{
var keycode;
if (event == null)
{
keycode = window.event.keycode;
window.Event.PreventDefault ();
}
outro
{
keycode = event.keycode;
event.preventDefault ();
}
Switch (KeyCode)
{
caso 37: // esquerda;
Wall_x- = unidade;
if (wall_x <bound_left)
Wall_x = Bound_left;
quebrar;
Caso 38: // UP
Wall_Y- = unidade;
if (Wall_Y <Bound_top)
Wall_Y = Bound_top;
quebrar;
Caso 39: // Certo
Wall_x+= unidade;
if (wall_x+wall_width> bound_right)
wall_x = limite_right-wall_width;
quebrar;
Caso 40: // Down
Wall_Y+= unidade;
if (wall_y+wall_height> bound_bottom)
Wall_Y = Bound_Bottom-Wall_Height;
quebrar;
padrão:
quebrar;
}
}
função 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 (); // Nota
ctx.fillstyle = "rgb (0,0,0)";
ctx.fillrect (Wall_X, Wall_Y, Wall_Width, Wall_Height);
ctx.stragerect (box_x, box_y, box_width, box_height);
}
função 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); // nota
}
</script>
</head>
<Body>
<lVAs> </canvas>
</body>
</html>
dificuldade
Detecção de colisão e tratamento de colisão de bolas pequenas e tijolos
Decompor o tijolo em segmentos de 4 linhas
A detecção de colisão é realizada na bola e cada segmento de linha, respectivamente.
A detecção de colisão de bolas e segmentos de linha é introduzida em outro artigo.