本文实例讲述了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
';
}
}
$('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
';
this.chess[index]['status'] = 1; // opened
if(this.selected!=null){ // 清空�x中
$(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