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游戏设计的学习有一定的借鉴价值。