Kommentar: Der Ball kann sich frei in die Box bewegen, und die schwarzen Ziegel können kontrolliert werden, um sich durch die Richtungsschlüssel auf und ab zu bewegen, um mit dem Ball zu kollidieren. Die spezifischen Implementierungsideen und -codes sind wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein, HTML5 zu lernen.
Demo -Adresse
Kurze Einführung
Der Ball kann sich frei in die Box bewegen
Der schwarze Ziegel kann kontrolliert werden, um sich durch die Richtungsschlüssel auf und ab zu bewegen, um mit dem Ball zu kollidieren
Code -Implementierung
<!-
Um diese Vorlage zu ändern, wählen Sie Tools | Vorlagen
und öffnen Sie die Vorlage im Editor.
->
<! DocType html>
<html>
<kopf>
<title> Tischtennisspiel </title>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<Script>
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 bound_top = box_y+ball_radius;
var bound_bottom = box_y+box_height-ball_radius;
var Unit = 10;
Funktion Kreuzung (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;
}
sonst wenn (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)
zurückkehren;
anders
false zurückgeben;
}
Funktion 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;
}
// stürzte nach oben
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;
}
// stürze nach links ab
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;
}
// nach rechts abstürzen
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;
}
// Crash herunterstürzen
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;
}
}
Funktion move_wall (ev)
{
var keycode;
if (event == null)
{
KeyCode = window.event.KeyCode;
window.event.preventDefault ();
}
anders
{
KeyCode = Event.KeyCode;
Event.PreventDefault ();
}
Schalter (Schlüsselcode)
{
Fall 37: // links;
Wall_x- = Einheit;
if (wall_x <bound_left)
WALL_X = BORD_LEFT;
brechen;
Fall 38: // Up
Wall_y- = Einheit;
if (wall_y <bound_top)
Wall_y = bound_top;
brechen;
Fall 39: // rechts
Wall_x+= Einheit;
if (wall_x+wall_width> bound_right)
WALL_X = BORD_RIGHT-WALL_WIDTH;
brechen;
Fall 40: // unten
Wall_y+= Einheit;
if (wall_y+wall_height> bound_bottom)
WALL_Y = bound_bottom-wall_height;
brechen;
Standard:
brechen;
}
}
Funktion 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 (); // note
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);
}
Funktion 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); // Notiz
}
</script>
</head>
<body>
<Canvas> </canvas>
</body>
</html>
Schwierigkeit
Kollisionserkennung und Kollisionsbehandlung von kleinen Kugeln und Ziegeln
Zersetzen Sie den Ziegel in 4 Leitungssegmente
Die Kollisionserkennung wird am Ball bzw. auf jedem Liniensegment durchgeführt.
Die Kollisionserkennung von Bällen und Liniensegmenten wird in einem anderen Artikel eingeführt.