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

本文实例讲述了JS小游戏的象棋暗棋源码，分享给大家供大家参考。具体如下：

游戏运行后如下图所示：

Javascript 部分：

/** 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);
}

完整实例代码点击此处本站下载。

相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。