首页 / 脚本样式 / JavaScript / JS小游戏之象棋暗棋源码详解

/** 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）; }