zoukankan      html  css  js  c++  java
  • 针对之前的Canvas的一个小小的改版,算作canvas(二)吧

    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);
  • 相关阅读:
    e621. Activating a Keystroke When Any Child Component Has Focus
    e587. Filling Basic Shapes
    e591. Drawing Simple Text
    e595. Drawing an Image
    e586. Drawing Simple Shapes
    e636. Listening to All Key Events Before Delivery to Focused Component
    在 PL/SQL 块的哪部分可以对初始变量赋予新值? (选择1项)
    Oracle数据库中,在SQL语句中连接字符串的方法是哪个?(选择1项)
    你判断下面语句,有什么作用?(单选)
    Oracle数据库表空间与数据文件的关系描述正确的是( )
  • 原文地址:https://www.cnblogs.com/lr-blog/p/5134600.html
Copyright © 2011-2022 走看看