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


Posted in Javascript onSeptember 25, 2014

本文实例讲述了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   目?似遄?ndex 
* @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游戏设计的学习有一定的借鉴价值。

Javascript 相关文章推荐
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 #Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 #Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 #Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 #Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 #Javascript
You might like
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
5 cool javascript apps
2007/03/24 Javascript
js的with语句使用方法
2007/09/21 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python非递归全排列实现方法
2017/04/10 Python
Python中一行和多行import模块问题
2018/04/01 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
《听鱼说话》教学反思
2014/02/15 职场文书
读书月活动方案
2014/05/22 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
Jsonp劫持学习
2021/04/01 PHP
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL