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);