本文实例讲述了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

for(var j=0; j

board = board + '

';

}

}

$('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[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 = '';

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

$('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

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

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