canvas二增加了角色，一共是7个，操作的那个可以按A放置炸弹，随即移动的其他6个碰到炸弹就算亡，
然后操作方一共66个炸弹，用完后如果其他6个还有没炸掉的，操作方就输了。另，移动的过程中，
碰到其他6个也算输了。
1 body { 2 margin: 0; 3 } 4 #game { 5 background: url("../images/back.png") repeat; 6 } 7 .wuli{ 8 position: absolute; 9 min-width: 200px; 10 height: 33px; 11 background: #355596; 12 opacity: 0.6; 13 filter:alpha(opacity = 60); 14 border-radius: 3px; 15 color: #fff; 16 text-align: center; 17 line-height: 33px; 18 } 19 .hide{ 20 display: none; 21 } 22 .dialog{ 23 position: absolute; 24 background: #355596; 25 opacity: 0.6; 26 filter:alpha(opacity = 60); 27 border-radius: 5px; 28 color: #fff; 29 text-align: center; 30 line-height: 33px; 31 padding: 0 5px; 32 max-width: 300px; 33 } 34 .win{ 35 position: absolute; 36 background: #f5f5f5; 37 opacity: 0.6; 38 filter:alpha(opacity = 60); 39 border-radius: 5px; 40 color: #cf0f0f; 41 text-align: center; 42 line-height: 33px; 43 padding: 0 5px; 44 max-width: 300px; 45 }
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>看我吃你们</title> 6 <link rel="stylesheet" href="css/main2.css"> 7 <script type="text/javascript" src="js/excanvas.min.js"></script> 8 </head> 9 <body> 10 <canvas id="game" width="510" height="480"></canvas> 11 12 <script type="text/javascript" src="js/jquery.js"></script> 13 <script type="text/javascript" src="js/game2.js"></script> 14 <script type="text/javascript"> 15 $("#game").Game({ 16 rols:[ 17 {"name":"lr"}, 18 {"name":"lina","hero":true}, 19 {"name":"xiaoping"}, 20 {"name":"zhaoyu"}, 21 {"name":"zhushuai"}, 22 {"name":"baoge"}, 23 {"name":"lyd"} 24 ] 25 }); 26 </script> 27 </body> 28 </html>
1 //@charset "utf-8"; 2 (function(window,document,$){ 3 "use strict"; 4 var game = { 5 defaluts : { 6 rols:[], 7 boompic : "images/boom.png", 8 boom:[], 9 boomnum:0, 10 bpos : [], 11 apos : [], 12 hero : [], 13 imgs : [], 14 boomPos:[], 15 allnum: 0, 16 loadnum : 0, 17 pie : 0, 18 cw:0, 19 ctx:"", 20 ch:0, 21 mtimer:null 22 }, 23 init:function(item){ 24 var param = $.extend(game.defaluts,item); 25 return this.each(function(){ 26 game.initPic(); // 先把图片加载完成 27 }); 28 }, 29 initPic : function(){ 30 var item = this.defaluts; 31 for(var i =0 ; i <item.rols.length; i++){ 32 item.allnum++; 33 var cont = item.rols[i]; 34 this.loadImg(cont); 35 } 36 }, 37 loadImg : function(cont){ 38 var param = this.defaluts; 39 var url = cont["name"]; 40 var img = new Image(); 41 var flag = false; 42 img.onload = function(){ 43 param.loadnum ++; 44 if(param.loadnum == param.allnum){ 45 game.loadBoom(); 46 } 47 } 48 for(var i in cont){ 49 if(i == "hero"){ 50 flag = true; 51 //only one hero(^-^)说英文会不会被骂！HIAHIAHI 52 img.src = "images/"+url+".png"; 53 param.hero = param.hero.length == 0 ? img : param.hero; 54 return; 55 } 56 } 57 img.src = "images/"+url+".png"; 58 param.imgs.push(img); 59 }, 60 loadBoom:function(){ 61 var img= new Image(); 62 img.onload = function(){ 63 game.showRole(); //加载完成后开始画图展示 64 } 65 img.src = this.defaluts.boompic; 66 this.defaluts.boom.push(img); 67 }, 68 showRole:function(){ 69 var param = this.defaluts; 70 var canvas = document.getElementById("game"); 71 param.cw = canvas.width; 72 param.ch = canvas.height; 73 param.pie = param.cw/17; 74 param.ctx = canvas.getContext("2d"); 75 this.getCommonPos(); 76 }, 77 getCommonPos:function(){ 78 var param = this.defaluts; 79 for(var i = 0; i<param.imgs.length; i++){ 80 var pos = this.getRandomPos(); 81 this.addPos(pos,param.bpos); 82 } 83 var hp = this.getRandomPos(); 84 this.addPos(hp,param.apos); 85 this.drawRole(); 86 var apos = param.apos[0]; 87 param.ctx.drawImage(param.hero,apos.x,apos.y); 88 this.showTalk(); 89 }, 90 drawRole:function(){ 91 var param = this.defaluts; 92 var ctx = param.ctx; 93 var imgs = param.imgs; 94 var bpos = param.bpos; 95 var apos = param.apos[0]; 96 for(var i = 0; i<imgs.length; i++){ 97 ctx.drawImage(imgs[i],bpos[i].x,bpos[i].y); 98 } 99 }, 100 showTalk:function(){ 101 var param = this.defaluts; 102 if($(".dialog").length == 0){ 103 var dialog = $("<div class=‘dialog‘></div>"); 104 $("body").append(dialog); 105 } 106 var dg = $(".dialog"); 107 var txt = ["听说你最近搞专政啊","怎么可能，我这么民主","那上一个游戏设的那么单一，我不管，宝宝们今天要围剿你","好吧，既然这样就开战吧","废话这么多，开战！"]; 108 this.showTxt(txt,dg,0); 109 }, 110 showTxt:function(arr,item,i){ 111 var param = this.defaluts; 112 if(i%2 == 0){ 113 item.html(arr[i]).css({ 114 left:param.bpos[0].x, 115 top:param.bpos[0].y-param.pie 116 }).show(); 117 }else{ 118 item.html(arr[i]).css({ 119 left:param.apos[0].x, 120 top:param.apos[0].y-param.pie 121 }).show(); 122 } 123 124 setTimeout(function(){ 125 item.fadeOut(function(){ 126 ++i < arr.length ? game.showTxt(arr,item,i): game.move(); 127 }); 128 },2000); 129 }, 130 move:function(){ 131 game.defaluts.mtimer = setInterval(this.randomMove,1000); 132 game.heroMove(); 133 }, 134 heroMove:function(){ 135 var param = game.defaluts; 136 var hp = param.apos[0]; 137 var pie = param.pie; 138 var himg = param.hero; 139 $(document).on("keyup",function(e){ 140 var m_e = e || window.event; 141 var keycode = m_e.which; 142 if(keycode === 38){ 143 if(hp.y >pie){ 144 game.operate("y",false); 145 } 146 }else if(keycode === 40 ){ 147 if(hp.y < param.ch-2*pie){ 148 game.operate("y",true); 149 } 150 }else if(keycode === 37){ 151 if( hp.x > pie ){ 152 game.operate("x",false); 153 } 154 }else if(keycode === 39){ 155 if( hp.x < param.cw-2*pie ){ 156 game.operate("x",true); 157 } 158 }else if(keycode == 65){ 159 game.layBoom(); 160 } 161 }); 162 }, 163 operate:function(item,flag){ 164 var param = game.defaluts; 165 var apos = param.apos[0]; 166 var aim = flag ? param.pie : -param.pie; 167 param.ctx.clearRect(apos.x,apos.y,param.pie,param.pie); 168 game.coverBoom(); 169 item == "x" ? apos.x += aim : apos.y +=aim; 170 game.getNewHero(); 171 game.judgeHurt(); //是否坑了自己 172 //game.drawLine(apos,item,aim); 173 }, 174 coverBoom:function(){ 175 var param = game.defaluts; 176 var booms = param.boomPos; 177 var apos = param.apos[0]; 178 var ctx = param.ctx; 179 for(var i = 0 ; i< booms.length; i++){ 180 var cur = booms[i]; 181 if(apos.x == cur.x && apos.y == cur.y){ 182 ctx.drawImage(param.boom[0],apos.x,apos.y); 183 } 184 } 185 }, 186 layBoom:function(){ 187 var param = game.defaluts; 188 if(param.boomnum <66){ 189 var boom = param.boom[0]; 190 var ctx = param.ctx; 191 var x = param.apos[0].x; 192 var y = param.apos[0].y; 193 ctx.drawImage(boom,x,y); 194 param.boomPos.push({x:x,y:y}); 195 param.boomnum++; 196 game.stayTime(x,y); 197 }else{ 198 setTimeout(function(){ 199 game.finalResult("弹尽粮绝，战士赢了！！",true); 200 },6000); 201 } 202 }, 203 stayTime:function(x,y){ 204 var param = game.defaluts; 205 var boomPos = param.boomPos; 206 var flag = false; 207 var idx; 208 setTimeout(function(){ 209 for(var i = 0; i< boomPos.length; i++){ 210 if(boomPos[i].x == x && boomPos[i].y == y){ 211 flag = true; 212 idx = i; 213 } 214 } 215 if(flag){ 216 boomPos.splice(idx,1); 217 param.ctx.clearRect(x,y,param.pie,param.pie); 218 } 219 },6000); 220 }, 221 judgeHurt:function(){ 222 var apos = game.defaluts.apos[0]; 223 var bpos = game.defaluts.bpos; 224 for(var i = 0; i < bpos.length; i++){ 225 var cur = bpos[i]; 226 if(apos.x == cur.x && apos.y == cur.y){ 227 game.finalResult("自食其果了！！战士们赢了！",true); 228 } 229 } 230 }, 231 drawLine:function(apos,item,aim){ 232 var ctx = game.defaluts.ctx; 233 var startx,starty; 234 ctx.lineWidth = 1; 235 ctx.strokeStyle="#cf0f0f"; 236 ctx.beginPath(); 237 if(item == "x"){ 238 startx = apos.x-aim; 239 starty = apos.y; 240 }else{ 241 startx = apos.x; 242 starty = apos.y; 243 } 244 ctx.moveTo(startx,starty); 245 ctx.lineTo(apos.x,apos.y); 246 ctx.stroke(); 247 }, 248 getNewHero:function(){ 249 var param = game.defaluts; 250 var apos = param.apos[0]; 251 param.ctx.drawImage(param.hero,apos.x,apos.y); 252 }, 253 randomMove:function(){ 254 var param = game.defaluts; 255 var bpos = param.bpos; 256 for(var i = 0 ; i<param.imgs.length; i++){ 257 var oldx = bpos[i].x; 258 var oldy = bpos[i].y; 259 param.ctx.clearRect(oldx,oldy,param.pie,param.pie); 260 var tn = game.getMovePos(bpos[i]); 261 game.turnPos(tn,i); 262 game.judgeWin(tn,i); 263 game.drawRole(); 264 } 265 }, 266 judgeWin :function(pos,i){ 267 var hero = game.defaluts.apos[0]; 268 if(pos.x == hero.x && pos.y == hero.y){ 269 game.finalResult("团结就是力量，你们赢了！！",true); 270 }else{ 271 game.careBoom(pos,i); 272 } 273 }, 274 careBoom:function(pos,idx){ 275 var param = game.defaluts; 276 var booms = param.boomPos; 277 var imgs = param.imgs; 278 var bpos = param.bpos; 279 var ctx = param.ctx; 280 for(var i = 0 ; i< booms.length; i++){ 281 var cur = booms[i]; 282 if(cur.x == pos.x && cur.y ==pos.y){ 283 clearInterval(param.mtimer); 284 imgs.splice(idx,1); 285 booms.splice(i,1); 286 bpos.splice(idx,1); 287 ctx.clearRect(cur.x,cur.y,param.pie,param.pie); 288 param.mtimer = setInterval(game.randomMove,1000); 289 if(imgs.length == 0){ 290 game.finalResult("再磨练磨练后来挑战吧！",false); 291 $(document).unbind("keyup"); 292 } 293 } 294 } 295 }, 296 finalResult:function(txt,flag){ 297 var param = game.defaluts; 298 var apos = param.apos[0]; 299 clearInterval(game.defaluts.mtimer); 300 if(flag){ 301 param.ctx.clearRect(apos.x,apos.y,param.pie,param.pie); 302 }else{ 303 param.ctx.clearRect(0,0,param.cw,param.ch); 304 } 305 var div = $("<div class=‘win‘>"+txt+"</div>"); 306 $("body").append(div); 307 div.css({ 308 left:(param.cw-div.width())/2, 309 top:(param.ch-div.height())/2 310 }); 311 $(document).unbind("keyup"); 312 }, 313 turnPos:function(pos,idx){ 314 var pos_all = this.defaluts.bpos; 315 var flag = true; 316 for(var i = 0 ; i<pos_all.length; i++){ 317 var cur = pos_all[i]; 318 flag = cur.x == pos.x && cur.y == pos.y ? false : true; 319 } 320 if(flag){ 321 pos_all.splice(idx,1); 322 pos_all.splice(idx,0,pos); 323 }else{ 324 var tn = game.getMovePos(pos_all[idx]); 325 game.turnPos(tn,idx); 326 } 327 }, 328 getMovePos:function(item){ 329 //var ois; 330 var dir = Math.ceil(Math.random()*4); 331 var x = 0, y = 0; 332 switch(dir){ 333 case 1: x = -1;break; 334 case 2 :x = 1;break; 335 case 3 : y = -1;break; 336 case 4 : y = 1;break; 337 } 338 //判断是否越界 339 return game.judgeBounder(x,y,item); 340 }, 341 judgeBounder:function(x,y,item){ 342 var ois; 343 var pie = game.defaluts.pie; 344 var cw = game.defaluts.cw, 345 ch = game.defaluts.ch; 346 var xfl,yfl; 347 xfl = ( x*pie+item.x <= cw-2*pie ) && (x*pie + item.x >= pie) ; 348 yfl = ( y*pie+item.y <=ch-2*pie ) && ( y*pie +item.y >=pie); 349 if(xfl && yfl){ 350 var x = x*pie+item.x, 351 y = y*pie+item.y; 352 ois = {x:x,y:y}; 353 return ois; 354 }else{ 355 return game.getMovePos(item); 356 } 357 }, 358 addPos:function(pos,pos_cur){ 359 var pos_all = this.defaluts.bpos; 360 if(pos_all.length == 0 ){ 361 pos_cur.push(pos); 362 }else{ 363 var flag = true; 364 for(var i = 0 ; i<pos_all.length; i++){ 365 var cur = pos_all[i]; 366 flag = cur.x == pos.x && cur.y == pos.y ? false : true; 367 } 368 if(flag){ 369 pos_cur.push(pos); 370 }else{ 371 var new_p = this.getRandomPos(); 372 this.addPos(new_p,pos_cur); 373 } 374 } 375 }, 376 getRandomPos:function(){ 377 var x = Math.ceil(Math.random()*15)*this.defaluts.pie; 378 var y = Math.ceil(Math.random()*14)*this.defaluts.pie; 379 return {x:x,y:y}; 380 } 381 }; 382 383 $.fn.Game = function(param){ 384 return game.init.apply(this,arguments); 385 }; 386 })(window,document,jQuery);
针对之前的Canvas的一个小小的改版，算作canvas(二)吧
原文：http://www.cnblogs.com/lr-blog/p/5134600.html