html5迷宮游戲(碰撞檢測)實(shí)例一

1、通過鼠標(biāo)拖拽在畫布上添加墻壁，通過方向鍵控制多邊形上下左右移動(dòng)，遇到墻壁則無法前進(jìn)，下面為大家介紹下需要解決的問題及具體的實(shí)現(xiàn)代碼，感興趣的朋友可以學(xué)習(xí)下需要解決的問題鼠標(biāo)按下，鼠標(biāo)拖動(dòng)，鼠標(biāo)釋放事件的檢測多邊形的繪制墻壁的繪制 多邊形和墻壁的碰撞檢測(實(shí)質(zhì)上是圓和線段的相交判斷)MYCode:代碼如下：& lt;html >& lt;head ><title>迷宮&t;/title>& t;script>var can vas_width = 900;var can vas_h

2、eight = 350;var ctx;var canvas;var everyth ing =;var cur_wall;var wall_width;var wall_style = "rgb(200,0,200)"var walls =;var in_motio n = false;var unit = 10;function Toke n( sx, sy, rad, style_stri ng, n)this.sx = sx;this.sy = sy;this.rad = rad;this.draw = draw_toke n;this. n = n;this.a

3、ngle = (2 * Math.PI) / n;this.move = move_toke n;this.fill_style = style_stri ng;function draw_token() 繪制正 n 邊形ctx.fill_style = this.fill_style;ctx.begi nPath();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.a ngle);for (i = 1; i

4、& It; this. n; i+)ctx.li neTo(this.sx + rad * Math.cos(i - 0.5) * this.a ngle), this.sy + rad * Math.s in (i - 0.5) * this.a ngle);ctx.fill();fun ctio n move_toke n( dx, dy)this.sx += dx;this.sy += dy;var i;var wall;for (i = 0; i & It; walls.le ngth; i+)wall = wallsi;if (in tersect(wall.sx,

5、wall.sy, wall.fx, wall.fy, this.sx, this.sy, this.rad)this.sx -= dx;this.sy -= dy;break;function Wall(sx, sy, fx, fy, width, styleStri ng)this.sx = sx;this.sy = sy;this.fx = fx;this.fy = fy;this.width = width;this.draw = draw_li ne;this.strokeStyle = styleStri ng;fun ctio n draw_li ne()ctx.li neWidt

6、h = this.width;ctx.strokeStye = this.strokeStyle;ctx.begi nPath();ctx.moveTo(this.sx, this.sy);ctx.lin eTo(this.fx, this.fy);ctx.stroke();/notevar mype nt = new Toke n(100, 100, 20, "rgb(0,0,250)", 5);everythi ng.push(mype nt);fun ctio n in it()can vas = docume nt.getEleme ntByld("ca

7、nvas");ctx = can vas.getC on text('2d');/notecan vas.addEve ntListe ner('mousedow n', start_wall, false);can vas.addEve ntListe ner('mousemove', stretch_wall, false);can vas.addEve ntListe ner('mouseup', fini sh_wall, false);win dow.addEve ntListe ner('keydow

8、 n', getkey_a nd_move, false); draw_all();function start_wall(ev)var mx;var my;if (evayerX | evayerx = 0)mx = evayerX;my = evayerY;else if (ev.offsetX | ev.offsetX = 0)mx = ev.offsetX;my = ev.offsetY;cur_wall = new Wall(mx, my, mx + 1, my + 1, wall_width, wall_style); in_motio n = true;everythi

9、ng.push(cur_wall);draw_all();fun ctio n stretch_wall(ev)if (in _motio n)var mx;var my;if (ev.layerX | ev.layerX = 0)mx = evayerX;my = evayerY;else if (ev.offsetX | ev.offsetX = 0)mx = ev.offsetX;my = ev.offsetY;cur_wall.fx = mx;cur_wall.fy = my;draw_all();fun ctio n fini sh_wall(ev)in_motio n = fals

10、e;walls.push(cur_wall);fun ctio n draw_all()ctx.clearRect(O, 0, can vas_width, can vas_height);var i;for (i = 0; i < everyth ing.len gth; i+)everythi ngi.draw();fun ctio n getkey_a nd_move(eve nt)var keyCode;if (eve nt = n ull)keyCode = win dow.eve nt.keyCode;wi ndow.eve nt.preve ntDefault();

11、elsekeyCode = eve nt.keyCode;eve nt.preve ntDefault();switch (keyCode)case 37:/left arrowmype nt.move (-un it, 0);break;case 38:/up arrowmype nt.move (0, -un it);break;case 39:/right arrowmype nt.move (un it, 0);break;case 40:mype nt.move(0, un it);break;default:/wi ndow.removeEve ntListe ner('k

12、eydow n', getkey_a nd_move, false); draw_all();function in tersect(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 & It; 0.0)t = 0.0;else if (t & gt; 1.0)t = 1.0;var dx1 = (sx + t * dx

13、) - cx;var dy1 = (sy + t * dy) - cy;var rt = dx1 * dx1 + dy1 * dy1;if (rt & It; rad * rad)return true;elsereturn false;& lt;/script >& t;body on Load="i nit();">& lt;ca nvas id="ca nvas" width="900" height="350"></ca nvas></body >& lt;/html>難點(diǎn)多邊形和線段碰撞檢測的方法函數(shù)intersect()負(fù)責(zé)檢測多邊形和線段是否相交記線段上一點(diǎn) p(x,y)線段2個(gè)端點(diǎn)是(sx,sy)和(fx,fy)記dx=fx-sxdy=fy-syx和y可以表示如下x=sx+t*dxy=sy+t*dy要判斷線段和多邊形是否相交，轉(zhuǎn)化為判斷線段和多邊形的