本文实例讲述了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" / alt="JS小游戏之象棋暗棋源码详解_javascript技巧" ></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" / alt="JS小游戏之象棋暗棋源码详解_javascript技巧" >';
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游戏设计的学习有一定的借鉴价值。
