Comentario: La pelota puede moverse libremente dentro de la caja, y los ladrillos negros se pueden controlar para moverse hacia arriba y hacia abajo, a la izquierda y a la derecha a través de la llave de dirección para chocar con la pelota. Las ideas y códigos de implementación específicos son las siguientes. Los amigos interesados pueden referirse a él. Espero que sea útil para todos aprender HTML5.
Dirección de demostración
Breve introducción
La pelota puede moverse libremente dentro de la caja
El ladrillo negro se puede controlar para moverse hacia arriba y hacia abajo, a la izquierda y a la derecha a través de la llave de dirección para chocar con la pelota
Implementación del código
<!-
Para cambiar esta plantilla, elija Herramientas | Plantillas
y abra la plantilla en el editor.
->
<! Doctype html>
<html>
<Evista>
<title> Juego de tenis de mesa </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<script>
var ctx;
Var lienzo;
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;
unidad var = 10;
Función 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));
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)
devolver verdadero;
demás
devolver falso;
}
función 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;
}
// se estrelló hasta la cima
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;
}
// se bloquea a la izquierda
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;
}
// se bloquea a la derecha
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;
}
// bloquear
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;
}
}
función Move_Wall (EV)
{
Código de teclas var;
if (event == null)
{
keycode = window.event.keycode;
Window.event.PreventDefault ();
}
demás
{
KeyCode = Event.KeyCode;
event.preventDefault ();
}
Switch (KeyCode)
{
caso 37: // izquierda;
wall_x- = unidad;
if (wall_x <bound_left)
wall_x = Bound_left;
romper;
Caso 38: // arriba
wall_y- = unidad;
if (wall_y <bound_top)
wall_y = bound_top;
romper;
Caso 39: // Derecho
wall_x+= unidad;
if (wall_x+wall_width> bound_right)
wall_x = bound_right-wall_width;
romper;
Caso 40: // abajo
wall_y+= unidad;
if (wall_y+wall_height> bound_bottom)
wall_y = bound_bottom-wall_height;
romper;
por defecto:
romper;
}
}
función 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, verdadero);
ctx.fill (); // nota
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);
}
función 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>
</ablo>
<Body>
<Canvas> </Canvas>
</body>
</html>
dificultad
Detección de colisión y tratamiento de colisión de bolas y ladrillos pequeños
Descompone el ladrillo en 4 segmentos de línea
La detección de colisiones se realiza en la pelota y en cada segmento de línea respectivamente.
La detección de colisiones de bolas y segmentos de línea se introduce en otro artículo.