JS小游戏之象棋暗棋源码详解

/** chinese chess *  Author: fdipzone *  Date:  2012-06-24 *  Ver:  1.0 */  var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','images/a7.gif','images/b1.gif','images/b2.gif','images/b3.gif','images/b4.gif','images/b5.gif','images/b6.gif','images/b7.gif','images/bg.gif','images/bg_over.gif','images/bg_sel.gif']; var chess_obj = new ChessClass();  window.onload = function(){   $('init_btn').onclick = function(){     chess_obj.init();   }   var callback = function(){     chess_obj.init();   }   img_preload(gameimg, callback); }  // chess class function ChessClass(){   this.chess = [];   this.boardrows = 4;   this.boardcols = 8;   this.area = 82;   this.player = 1;  // 1:red 2:green   this.selected = null;  // selected chess   this.chesstype = ['', 'a', 'b'];   this.isover = 0; }  // init ChessClass.prototype.init = function(){   this.reset_grade();    this.create_board();   this.create_chess();   this.create_event();   this.player = 1;   this.selected = null;   this.isover = 0;   disp('init_div','hide'); }  // create board ChessClass.prototype.create_board = function(){   var board = '';   for(var i=0; i<this.boardrows; i++){     for(var j=0; j<this.boardcols; j++){       board = board + '<div id="' + i + '_' + j + '"><img src="images/chessbg.gif" /></div>';     }   }   $('board').innerHTML = board;   $('board').style.width = this.boardcols * (this.area + 2) + 'px';   $('board').style.height = this.boardrows * (this.area + 2) + 'px'; }  // create random chess ChessClass.prototype.create_chess = function(){   // 32 chesses   var chesses = ['a1','b7','a2','b7','a2','b7','a3','b7','a3','b7','a4','b6','a4','b6','a5','b5',            'a5','b5','a6','b4','a6','b4','a7','b3','a7','b3','a7','b2','a7','b2','a7','b1'];   this.chess = [];   while(chesses.length>0){     var rnd = Math.floor(Math.random()*chesses.length);     var tmpchess = chesses.splice(rnd, 1).toString();     this.chess.push({'chess':tmpchess, 'type':tmpchess.substr(0,1), 'val':tmpchess.substr(1,1), 'status':0});   } }  // create event ChessClass.prototype.create_event = function(){   var self = this;   var chess_area = $_tag('div', 'board');   for(var i=0; i<chess_area.length; i++){     chess_area[i].onmouseover = function(){ // mouseover       if(this.className!='onsel'){         this.className = 'on';       }     }     chess_area[i].onmouseout = function(){ // mouseout       if(this.className!='onsel'){         this.className = '';       }     }     chess_area[i].onclick = function(){ // onclick       self.action(this);     }   } }  // id change index ChessClass.prototype.getindex = function(id){   var tid = id.split('_');   return parseInt(tid[0])*this.boardcols + parseInt(tid[1]); }  // index change id ChessClass.prototype.getid = function(index){   return parseInt(index/this.boardcols) + '_' + parseInt(index%this.boardcols); }  // action ChessClass.prototype.action = function(o){   if(this.isover==1){ // game over     return false;   }      var index = this.getindex(o.id);    if(this.selected == null){ // 未选过棋子     if(this.chess[index]['status'] == 0){  // not opened       this.show(index);       }else if(this.chess[index]['status'] == 1){ // opened       if(this.chess[index]['type'] == this.chesstype[this.player]){         this.select(index);       }     }       }else{ // 已选过棋子     if(index != this.selected['index']){        // selected不是同一位置       if(this.chess[index]['status'] == 0){      // 未打开的棋子         this.show(index);       }else if(this.chess[index]['status'] == -1){  // 空白位置         this.move(index);       }else{                     // 其他棋子         if(this.chess[index]['type']==this.chesstype[this.player]){           this.select(index);         }else{                this.kill(index);         }       }     }   } }  // show chess ChessClass.prototype.show = function(index){   $(this.getid(index)).innerHTML = '<img src="images/' + this.chess[index]['chess'] + '.gif" />';   this.chess[index]['status'] = 1;  // opened   if(this.selected!=null){      // 清空中     $(this.getid(this.selected.index)).className = '';     this.selected = null;   }     this.change_player();   this.gameover(); }  // select chess ChessClass.prototype.select = function(index){   if(this.selected!=null){     $(this.getid(this.selected['index'])).className = '';   }   this.selected = {'index':index, 'chess':this.chess[index]};   $(this.getid(index)).className = 'onsel'; }  // move chess ChessClass.prototype.move = function(index){   if(this.beside(index)){     this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']};     this.remove(this.selected['index']);     this.show(index);   } }  // kill chess ChessClass.prototype.kill = function(index){   if(this.beside(index)==true && this.can_kill(index)==true){     this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']};     this.remove(this.selected['index']);     var killed = this.player==1? 2 : 1;     $('grade_num' + killed).innerHTML = parseInt($('grade_num' + killed).innerHTML)-1;      this.show(index);   } }  // remove chess ChessClass.prototype.remove = function(index){   this.chess[index]['status'] = -1;  // empty   $(this.getid(index)).innerHTML = '';   $(this.getid(index)).className = ''; }  /* check is beside * @param index   目棋子index * @param selindex  执行的棋子index，可为空, 为空则读取选中的棋子 */ ChessClass.prototype.beside = function(index,selindex){   if(typeof(selindex)=='undefined'){     if(this.selected!=null){       selindex = this.selected['index'];     }else{       return false;     }   }    if(typeof(this.chess[index])=='undefined'){     return false;   }    var from_info = this.getid(selindex).split('_');   var to_info = this.getid(index).split('_');   var fw = parseInt(from_info[0]);   var fc = parseInt(from_info[1]);   var tw = parseInt(to_info[0]);   var tc = parseInt(to_info[1]);    if(fw==tw && Math.abs(fc-tc)==1 || fc==tc && Math.abs(fw-tw)==1){  // row or colunm is same and interval=1     return true;   }else{     return false;   } }  /* check can kill * @param index   被消灭的棋子index * @param selindex  执行消灭的棋子index，可为空, 为空则读取选中的棋子 */ ChessClass.prototype.can_kill = function(index,selindex){   if(typeof(selindex)=='undefined'){ // 没有指定执行消灭的棋子     if(this.selected!=null){    // 有选中的棋子       selindex = this.selected['index'];     }else{       return false;     }   }   if(this.chess[index]['type']!=this.chesstype[this.player]){     if(parseInt(this.chess[selindex]['val'])==7 && parseInt(this.chess[index]['val'])==1){ // 7 can kill 1       return true;     }else if(parseInt(this.chess[selindex]['val'])==1 && parseInt(this.chess[index]['val'])==7){ // 1 can't kill 7       return false;     }else if(parseInt(this.chess[selindex]['val']) <= parseInt(this.chess[index]['val'])){  // small kill big       return true;     }   }   return false; }  // change player ChessClass.prototype.change_player = function(){   if(this.player == 1){     this.player = 2;  // to green     $('grade_img2').className = 'img_on';     $('grade_img1').className = 'img';   }else{     this.player = 1;  // to red     $('grade_img1').className = 'img_on';     $('grade_img2').className = 'img';   } }  // reset grade ChessClass.prototype.reset_grade = function(){   $('grade_img1').className = 'img_on';   $('grade_img2').className = 'img';   $('grade_num1').innerHTML = $('grade_num2').innerHTML = 16;   $('grade_res1').className = $('grade_res2').className = 'none';   $('grade_res1').innerHTML = $('grade_res2').innerHTML = ''; }  // game over ChessClass.prototype.gameover = function(){   if($('grade_num1').innerHTML==0 || $('grade_num2').innerHTML==0){  // 任一方棋子为0     this.isover = 1;     this.show_grade();     disp('init_div','show');   }else{     if(this.can_action()==false){       this.isover = 1;       this.show_grade();       disp('init_div','show');     }   } }  // show grade ChessClass.prototype.show_grade = function(){   var num1 = parseInt($('grade_num1').innerHTML);   var num2 = parseInt($('grade_num2').innerHTML);   if(num1>num2){ // 红方胜     $('grade_res2').innerHTML = 'LOSS';     $('grade_res2').className = 'loss';     $('grade_res1').innerHTML = 'WIN';     $('grade_res1').className = 'win';   }else if(num1<num2){ // 黑方胜     $('grade_res1').innerHTML = 'LOSS';     $('grade_res1').className = 'loss';     $('grade_res2').innerHTML = 'WIN';     $('grade_res2').className = 'win';   }else{ // 平局     $('grade_res1').innerHTML = $('grade_res2').innerHTML = 'DRAW';     $('grade_res1').className = $('grade_res2').className = 'draw';   } }  // check chess can action ChessClass.prototype.can_action = function(){   var chess = this.chess;   for(var i=0,max=chess.length; i<max; i++){   if(chess[i].status==0){ // 有未翻开的棋子     return true;   }else{     if(chess[i].status==1 && chess[i].type==this.chesstype[this.player]){  // 己方已翻开的棋子       if(this.beside(i-this.boardcols, i) && (chess[i-this.boardcols].status==-1 || this.can_kill(i-this.boardcols,i) )){ // 上         return true;       }       if(this.beside(i+this.boardcols, i) && (chess[i+this.boardcols].status==-1 || this.can_kill(i+this.boardcols,i) )){ // 下         return true;       }       if(this.beside(i-1, i) && (chess[i-1].status==-1 || this.can_kill(i-1,i) )){  // 左         return true;       }       if(this.beside(i+1, i) && (chess[i+1].status==-1 || this.can_kill(i+1,i) )){  // 右         return true;       }     }   }   }   return false; }  /** common function */  // get document.getElementBy(id) function $(id){   this.id = id;   return document.getElementById(id); }  // get document.getElementsByTagName function $_tag(name, id){   if(typeof(id)!='undefined'){     return $(id).getElementsByTagName(name);   }else{     return document.getElementsByTagName(name);    } }  /* div show and hide * @param id dom id * @param handle show or hide */ function disp(id, handle){   if(handle=='show'){     $(id).style.display = 'block';   }else{     $(id).style.display = 'none';     } }  /* img preload * @param img    要加载的图片数组 * @param callback  图片加载成功后回调方法 */ function img_preload(img, callback){   var onload_img = 0;   var tmp_img = [];   for(var i=0,imgnum=img.length; i<imgnum; i++){     tmp_img[i] = new Image();     tmp_img[i].src = img[i];     if(tmp_img[i].complete){       onload_img ++;     }else{       tmp_img[i].onload = function(){         onload_img ++;       }     }   }   var et = setInterval(     function(){       if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback         clearInterval(et);         callback();       }     },200); }