Commentaire: Ajoutez un mur sur la toile en faisant glisser la souris et contrôlez le polygone pour se déplacer vers le haut, vers le bas, à gauche et à droite à travers les touches de direction. Si vous rencontrez un mur, vous ne pouvez pas avancer. Vous trouverez ci-dessous une introduction aux problèmes qui doivent être résolus et au code d'implémentation spécifique. Les amis intéressés peuvent l'apprendre.
Rendages de jeuAjoutez un mur sur la toile en faisant glisser la souris et utilisez les touches de flèche pour contrôler le polygone pour se déplacer vers le haut, vers le bas, la gauche et la droite. Si vous rencontrez un mur, vous ne pouvez pas avancer.
Les problèmes qui doivent être résolus
Détection de la presse de souris, traînée de souris, événement de libération de souris
Dessin de polygones
Peinture de murs
Détection de collision entre les polygones et les murs (essentiellement, c'est le jugement de l'intersection entre les cercles et les segments de ligne)
Mycode:
<html>
<adal>
<Title> Maze </Title>
<cript>
var canvas_width = 900;
var canvas_height = 350;
var ctx;
Var Canvas;
var tout = [];
var cur_wall;
var wall_width;
var wall_style = "rgb (200,0,200)";
var murs = [];
var in_motion = false;
unité var = 10;
Fonction Token (SX, SY, RAD, Style_String, N)
{
this.sx = sx;
this.sy = sy;
this.rad = rad;
this.draw = draw_token;
this.n = n;
this.angle = (2 * math.pi) / n;
this.move = move_token;
this.fill_style = style_string;
}
fonction draw_token () // dessiner régulièrement de la face n
{
ctx.fill_style = this.fill_style;
ctx.beginPath ();
var i;
var rad = this.rad;
ctx.moveto (this.sx + rad * math.cos (-0.5 * this.angle), this.sy + rad * math.sin (-0.5 * this.angle));
pour (i = 1; i <this.n; i ++)
ctx.lineto (this.sx + rad * math.cos ((i - 0.5) * this.angle), this.sy + rad * math.sin ((i - 0.5) * this.angle));
ctx.fill ();
}
fonction move_token (dx, dy)
{
this.sx + = dx;
this.sy + = dy;
var i;
Var Wall;
pour (i = 0; i <whirs.length; i ++)
{
mur = murs [i];
if (intersect (wall.sx, wall.sy, wall.fx, wall.fy, this.sx, this.sy, this.rad))
{
this.sx - = dx;
this.sy - = dy;
casser;
}
}
}
mur de fonction (sx, sy, fx, fy, largeur, stylestring)
{
this.sx = sx;
this.sy = sy;
this.fx = fx;
this.fy = fy;
this.width = largeur;
this.draw = draw_line;
this.strokestyle = Stylestring;
}
fonction Draw_line ()
{
ctx.linewidth = this.width;
ctx.strokestye = this.strokestyle;
ctx.beginPath ();
ctx.moveto (this.sx, this.sy);
ctx.lineto (this.fx, this.fy);
ctx.stroke ();
}
//note
var mypent = new token (100, 100, 20, "RGB (0,0,250)", 5);
Tout.push (mypent);
fonction init ()
{
canvas = document.getElementById ("canvas");
ctx = canvas.getContext ('2d');
//note
canvas.addeventListener ('Mousedown', start_wall, false);
canvas.addeventListener («MouseMove», stretch_wall, false);
canvas.addeventListener ('mouseup', finad_wall, false);
window.addeventListener ('keydown', getkey_and_move, false);
draw_all ();
}
fonction start_wall (ev)
{
var mx;
var mon;
if (ev.layerx || ev.layerx == 0)
{
mx = ev.layerx;
mon = ev.layery;
}
else if (ev.offsetx || ev.offsetx == 0)
{
mx = ev.offsetx;
mon = ev.offsety;
}
cur_wall = new Wall (mx, my, mx + 1, my + 1, wall_width, wall_style);
in_motion = true;
Tout.push (cur_wall);
draw_all ();
}
fonction stretch_wall (ev)
{
if (in_motion)
{
var mx;
var mon;
if (ev.layerx || ev.layerx == 0)
{
mx = ev.layerx;
mon = ev.layery;
}
else if (ev.offsetx || ev.offsetx == 0)
{
mx = ev.offsetx;
mon = ev.offsety;
}
cur_wall.fx = mx;
cur_wall.fy = mon;
draw_all ();
}
}
fonction fini final_wall (ev)
{
in_motion = false;
wals.push (cur_wall);
}
function draw_all ()
{
ctx.ClearRect (0, 0, canvas_width, canvas_height);
var i;
pour (i = 0; i <tout.length; i ++)
{
Tout [i] .Draw ();
}
}
fonction getkey_and_move (événement)
{
var keycode;
if (événement == null)
{
keyCode = window.event.KeyCode;
window.event.preventDefault ();
}
autre
{
keyCode = event.KeyCode;
event.PreventDefault ();
}
commutateur (keycode)
{
Cas 37: // Flèche gauche
mypent.move (-unit, 0);
casser;
Cas 38: // Up Arrow
mypent.move (0, -unit);
casser;
Cas 39: // Flèche droite
mypent.move (unité, 0);
casser;
Cas 40:
mypent.move (0, unité);
casser;
défaut:
//window.removeeventListener('keydown ', getkey_and_move, false);
}
draw_all ();
}
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;
}
</cript>
<body>
<lebvas> </ canvas>
</docy>
</html>
difficulté
Méthodes de détection des collisions entre les polygones et les segments de ligne
La fonction intersect () est responsable de la détection si le polygone et le segment de ligne se croisent.
Notez un point P (x, y) sur le segment de la ligne
Les deux points d'évaluation du segment de ligne sont (SX, SY) et (FX, FY)
souviens-toi
dx = fx-sx
dy = fy-sy
X et Y peuvent être représentés comme suit
x = sx + t * dx
y = sy + t * dy
Pour déterminer si le segment de ligne et le polygone se croisent, il est transformé en déterminant si le segment de ligne et le polygone se croisent.
Pour ce faire, vous devez trouver le point P le plus proche du centre du cercle O sur le segment de la ligne
Si | Op | <le rayon du cercle, vous pouvez juger de l'intersection du segment de ligne et du cercle.
Sinon, ils ne se croiseront pas.
Comment trouver le point le plus proche du centre du cercle sur le segment de la ligne?
La distance du point P au point O peut être exprimée comme
Distance = Sqrt ((X-CX) * (X-CX) + (Y-Cy) * (Y-Cy));
Remplaçant
x = sx + t * dx et y = sy + t * dy
Vous pouvez obtenir la distance est une fonction sur t
Dérivé de cette fonction
Trouvez la valeur t correspondante lorsque la valeur de la fonction est 0 et vous pouvez rapprocher le point le plus proche du centre du cercle