Commentaire: La balle peut se déplacer librement à l'intérieur de la boîte, et les briques noires peuvent être contrôlées pour se déplacer vers le haut et vers le bas, à gauche et à droite à travers la clé de direction pour colliser avec le ballon. Les idées et codes de mise en œuvre spécifiques sont les suivants. Les amis intéressés peuvent y faire référence. J'espère qu'il sera utile pour tout le monde d'apprendre HTML5.
Adresse de démonstration
Brève introduction
La balle peut se déplacer librement à l'intérieur de la boîte
La brique noire peut être contrôlée pour se déplacer vers le haut et vers le bas, à gauche et à droite à travers la clé de direction pour entrer en collision avec la balle
Implémentation de code
<! -
Pour modifier ce modèle, choisissez des outils | Modèles
et ouvrez le modèle dans l'éditeur.
->
<! Doctype html>
<html>
<adal>
<Title> Table Tennis Game </Title>
<meta http-equiv = "contenu-type" contenu = "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 bound_top = box_y + ball_radius;
var bound_bottom = box_y + box_height-ball_radius;
unité var = 10;
fonction intersecte (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));
si (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)
Retour Vrai;
autre
retourne false;
}
fonction 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;
}
// s'est écrasé au sommet
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;
}
// planter à gauche
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;
}
// planter à droite
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;
}
// s'écrase
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;
}
}
fonction move_wall (ev)
{
var keycode;
if (événement == null)
{
keyCode = window.event.KeyCode;
window.event.preventDefault ();
}
autre
{
keyCode = event.KeyCode;
event.PreventDefault ();
}
commutateur (keycode)
{
Cas 37: // gauche;
wall_x- = unité;
if (wall_x <bound_left)
wall_x = bound_left;
casser;
cas 38: // up
wall_y- = unité;
if (wall_y <bound_top)
wall_y = bound_top;
casser;
cas 39: // droit
wall_x + = unité;
if (wall_x + wall_width> bound_right)
wall_x = bound_right-wall_width;
casser;
Cas 40: //
wall_y + = unité;
if (wall_y + wall_height> bound_bottom)
wall_y = bound_bottom-wall_height;
casser;
défaut:
casser;
}
}
function 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.strokect (box_x, box_y, box_width, box_height);
}
fonction 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); // note
}
</cript>
</ head>
<body>
<lebvas> </ canvas>
</docy>
</html>
difficulté
Détection de collision et traitement des collisions de petites boules et briques
Décomposer la brique en segments de 4 lignes
La détection de collision est effectuée sur la balle et chaque segment de ligne respectivement.
La détection de collision des balles et des segments de ligne est introduite dans un autre article.