JS 小游戏

//控制棋盘大小，应小于 26*50
var num_row = 11;
var num_col = 15;

//控制单元个大小
var unit_width = 35;
var unit_height = 35;

//定制棋子属性
function chessman(img,name,speed,life,att,def,luck)

//自定义棋子
var chessman_list = new Array();
//Attrib list (20): img,name,speed,life,att,def,luck
chessman_list.push(["icon10.gif","general",3,100,4, 9,4]);
chessman_list.push(["icon11.gif","Colonel",4, 90,6, 9,1]);
chessman_list.push(["icon12.gif","Major", 1, 80,9, 1,9]);
chessman_list.push(["icon6.gif","Captain",2, 60,4, 6,8]);
chessman_list.push(["icon7.gif","Sergeant",6, 40,7, 2,5]);
chessman_list.push(["icon8.gif","Corporal",5, 25,3, 9,3]);
chessman_list.push(["icon9.gif","Private", 8, 10,2, 2,8]);

//生成棋子，并安放位置
function Build_troop()

//读取棋子（址传递，可直接修改属性）
function Get_chessman(the_chessman)

//AI 函数
function AI_move(the_chessman)

//吃子规则
function Att_rule()

以上仅仅列举了主要的可定制成分，欢迎修改，其他的过程函数请参见程序内注释，不太清楚的话直接问我。运行代码框
<script Language="JavaScript1.2">/* This following code are designed and writen by Windy_sk <seasonx@163.net> You can use it freely, but u must held all the copyright items!*/function reportError(msg,url,line) {var str = "You have found an error as below: \n\n";str += "Err: " + msg + " on line: " + line;alert(str);return true;}window.onerror = reportError;//some function shall be usedString.prototype.left = function(num,mode){if(!/\d+/.test(num))return(this);var str = this.substr(0,num);if(!mode) return str;var n = str.Tlength() - str.length;num = num - parseInt(n/2);return this.substr(0,num);}Array.prototype.copy = function(){var copy=new Array();for (var i=0;i<this.length;i++)copy[i]=this[i];return copy;};function GetRandomNum(Min,Max){var Range = Max - Min;var Rand = Math.random();return(Min + Math.round(Rand * Range));}function get_Pos(the_obj){the_top = the_obj.offsetTop; the_left = the_obj.offsetLeft; while(the_obj=the_obj.offsetParent){ the_top += the_obj.offsetTop; the_left += the_obj.offsetLeft; }this.top = the_top; this.left = the_left; }//initialize the document eventdocument.onselectstart = new Function("return false");document.oncontextmenu = new Function("return false");//Draw the Chessboard with the parameters of num_row & num_colvar num_row = 11;var num_col = 15;if(num_row>26)num_row=26;if(num_col>50)num_col=50;function Draw_chessboard(num_x,num_y){var writer = document.write;var unit_width = 35;var unit_height = 35;writer("<table align=center>");writer("<tr><td align=center width=100><b>Force A</b><br><br><span id=alive_A></span><br><br><input type=checkbox id=autoA onclick=autoRun('A')> <label for=autoA>Auto</label> </td>");writer("<td><table id=chessboard width="+(unit_width*num_y)+" height="+(unit_height*num_x)+" align=center border=1 cellpadding=0 cellspacing=0 style='border-collapse:collapse;cursor:default' onclick='table_Click()' onmouseover='table_Over()' onmouseout='table_Out()'>");for(var i=1;i<=num_x;i++){writer("<tr valign=middle align=center>");for(var j=1;j<=num_y;j++){writer("<td width="+unit_width+" height="+unit_height+" onmouseover=\"this.runtimeStyle.backgroundColor='#eeeeee';window.status='当前坐标：'+this.id\" onmouseout=\"this.runtimeStyle.backgroundColor='';window.status=''\" id="+String.fromCharCode(64+i)+j+"></td>");}writer("</tr>");}writer("</table></td>");writer("<td align=center width=100><b>Force B</b><br><br><span id=alive_B></span><br><br><input type=checkbox id=autoB onclick=autoRun('B')> <label for=autoB>Auto</label> </td></tr>");writer("</table>");}Draw_chessboard(num_row,num_col);document.write("<br><br><div align=center id=showStatus style='font-size:14px;FONT-WEIGHT:bold;color:red'>Current Turn : Force A </div>");//Create the movable layer of the chessmanvar move_chessman = document.createElement("DIV");move_chessman.innerHTML= "";move_chessman.style.cssText= "position:absolute; border:0px solid black; display:none; zindex:999";chessboard.insertAdjacentElement("AfterEnd",move_chessman);//struction of the chessmanfunction chessman(img,name,speed,life,att,def,luck){this.img= img;this.name= name;this.speed= speed;this.life= life;this.maxlife= life;this.att= att;this.def= def;this.luck= luck;}var chessman_list = new Array();//Attrib list (20): img,name,speed,life,att,def,luckchessman_list.push(["icon10.gif","general",3,100,4,9,4]);chessman_list.push(["icon11.gif","Colonel",4, 90,6,9,1]);chessman_list.push(["icon12.gif","Major", 1, 80,9,1,9]);chessman_list.push(["icon6.gif","Captain",2, 60,4,6,8]);chessman_list.push(["icon7.gif","Sergeant",6, 40,7,2,5]);chessman_list.push(["icon8.gif","Corporal",5, 25,3,9,3]);chessman_list.push(["icon9.gif","Private", 8, 10,2,2,8]);//build troop & set chessman (two sides against)var Force_A = new Array();var Force_B = new Array();function Build_troop(){var i=0,tmp=null,tmp_rnd = 0;for(i=1;i<=num_row;i++){tmp_rnd = chessman_list.length-Math.floor(GetRandomNum(0,chessman_list.length)*Math.pow(Math.random(),2))-1;tmp = chessman_list[tmp_rnd];Force_A.push([new chessman("http://www.blueidea.com/bbs/icon/"+tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6]),String.fromCharCode(64+i)+(i%2+1),null]);Force_B.push([new chessman("http://www.blueidea.com/bbs/icon/"+tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6]),String.fromCharCode(65+num_row-i)+(num_col-(i%2+1)+1),null]);tmp = null;}for(i=0;i<Force_A.length;i++){Force_A[i][2]=document.createElement("IMG");Force_A[i][2].src = Force_A[i][0].img;Force_A[i][2].id = "A_img_" + i;Force_A[i][2].alt = Force_A[i][0].name + "\nSpeed : " + Force_A[i][0].speed + "\nLife : " + Force_A[i][0].life + "\nAttack : " + Force_A[i][0].att + "\nDefence: " + Force_A[i][0].def + "\nLuck : " + Force_A[i][0].luck;Force_A[i][2].onclick= new Function("chessman_Click(this)");Force_A[i][2].onmousedown= new Function("if(event.button==2 && this!=cur_chessman)Get_area(this,1)");Force_A[i][2].onmouseup= new Function("Clear_area(1)");Force_A[i][2].onmouseout= new Function("Clear_area(1)");Force_A[i][2].onmouseover= new Function("img_over(this)");document.all[Force_A[i][1]].innerHTML = "";document.all[Force_A[i][1]].insertBefore(Force_A[i][2]);}for(i=0;i<Force_B.length;i++){Force_B[i][2]=document.createElement("IMG");Force_B[i][2].style.cssText = "filter: Glow(Color:red, Strength:3)";Force_B[i][2].src = Force_B[i][0].img;Force_B[i][2].id = "B_img_" + i;Force_B[i][2].alt = Force_A[i][0].name + "\nSpeed : " + Force_A[i][0].speed + "\nLife : " + Force_A[i][0].life + "\nAttack : " + Force_A[i][0].att + "\nDefence: " + Force_A[i][0].def + "\nLuck : " + Force_A[i][0].luck;Force_B[i][2].onclick = new Function("chessman_Click(this)");Force_B[i][2].onmousedown= new Function("if(event.button==2 && this!=cur_chessman)Get_area(this,1)");Force_B[i][2].onmouseup= new Function("Clear_area(1)");Force_B[i][2].onmouseout= new Function("Clear_area(1)");Force_B[i][2].onmouseover= new Function("img_over(this)");document.all[Force_B[i][1]].innerHTML = "";document.all[Force_B[i][1]].insertBefore(Force_B[i][2]);}}Build_troop();var troop_A = Force_A.length;var troop_B = Force_B.length;alive_A.innerText = "Soldier:" + troop_A;alive_B.innerText = "Soldier:" + troop_B;//u can use this function to get or set chessmen's attribfunction Get_chessman(the_chessman){var the_id = the_chessman.id;var tmp = the_id.split("_");return eval("Force_"+tmp[0]+"["+tmp[2]+"]");}//parameters for process (focus chessman & attacked chessman)var cur_chessman = null;var aim_chessman = null;//shadow of a chessman can arrive (focus chessman & RightClick chessman)var area_arr1 = null;var area_arr2 = null;function Clear_area(mode){if(mode){if(area_arr1 == null) return;for(var i=0;i<area_arr1.length;i++)document.all[area_arr1[i]].runtimeStyle.backgroundColor="";area_arr1 = null;}else{if(area_arr2 == null) return;for(var i=0;i<area_arr2.length;i++)document.all[area_arr2[i]].style.backgroundColor="";area_arr2 = null;}}function Get_area(the_chessman,mode){var the_td = the_chessman.offsetParent;var col_idx = the_td.cellIndex;var row_idx = the_td.parentElement.rowIndex;var speed = Get_chessman(the_chessman)[0].speed;var tmp_arr = new Array();var col_1,col_2,row_1,row_2;for(var i=0;i<=speed;i++){for(var j=0;j<=speed-i;j++){row_1 = row_idx + j;row_2 = row_idx - j;col_1 = col_idx + i;col_2 = col_idx - i;if(col_1<num_col){if(row_1<num_row)tmp_arr.push(chessboard.rows[row_1].cells[col_1].id);if(row_2>=0)tmp_arr.push(chessboard.rows[row_2].cells[col_1].id);}if(col_2>=0 && i!=0){if(row_1<num_row)tmp_arr.push(chessboard.rows[row_1].cells[col_2].id);if(row_2>=0)tmp_arr.push(chessboard.rows[row_2].cells[col_2].id);}}}if(mode){area_arr1 = new Array();}else{area_arr2 = new Array();area_arr2.push(the_td.id);document.all[the_td.id].style.backgroundColor="#BEC5DE";}for(i=0;i<tmp_arr.length;i++){if(!document.all[tmp_arr[i]].hasChildNodes()
document.all[tmp_arr[i]].children[0].id.left(6)!=the_chessman.id.left(6)){if(mode){area_arr1.push(tmp_arr[i]);document.all[tmp_arr[i]].runtimeStyle.backgroundColor="#CFD6EF";}else{area_arr2.push(tmp_arr[i]);document.all[tmp_arr[i]].style.backgroundColor="#BEC5DE";}}}}//information barvar info_bar = document.createElement("DIV");info_bar.innerHTML= "";info_bar.style.cssText= "background-color: #eeeeee; width:200px; height:40px; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); position:absolute; text-align: center; border:0px solid black; display:none; zindex:999"chessboard.insertAdjacentElement("AfterEnd",info_bar);function show_info(str){info_bar.filters.revealTrans.transition=GetRandomNum(1,23);info_bar.style.left=(document.body.offsetWidth-200)/2;info_bar.style.top =(document.body.offsetHeight-40)/2; info_bar.innerHTML="<table border=0 width=100% height=100%><tr><td align=center valign=middle style='font-size:16px; FONT-WEIGHT:bold;'>" + str + "</td></tr></table>"; info_bar.filters.revealTrans.apply(); info_bar.style.display = ""; info_bar.filters.revealTrans.play(); setTimeout("info_bar.style.display='none'",2000);}//function about AIvar useAI_A = true;var useAI_B = true;autoA.checked = useAI_A;autoB.checked = useAI_B;function autoRun(the_force){if(the_force=="A")useAI_A = event.srcElement.checked;elseuseAI_B = event.srcElement.checked;//eval("useAI_"+the_force)=event.srcElement.checked;if(area_arr2!=null && the_force==cur_side) AI_move(cur_chessman);}function AI_move(the_chessman){var the_td;var aim_td;for(var i=0;i<area_arr2.length;i++){the_td = document.all[area_arr2[i]];if(the_td.hasChildNodes()){if(the_td.children[0].id.left(1)!=the_chessman.id.left(1)){aim_td=the_td;aim_chessman = aim_td.children[0];break;}}}if(i==area_arr2.length){aim_td = document.all[area_arr2[GetRandomNum(0,area_arr2.length-1)]];}moveIt(aim_td);}//function when click a chessmanfunction chessman_Click(the_chessman){if(cur_side=="A" && useAI_A) return;if(cur_side=="B" && useAI_B) return;event.cancelBubble=true;if(timer!=null
cur_chessman==null)return;if(cur_chessman.id.left(1)!=the_chessman.id.left(1)){if(area_arr2 == null) return;var the_td=the_chessman.offsetParent;if((","+area_arr2.toString()+",").indexOf(","+the_td.id+",")!=-1){aim_chessman = the_chessman;moveIt(the_td);}}else if(the_chessman==cur_chessman){Clear_area();cur_chessman.style.filter = cur_chessman.style.filter.replace(" Gray","");cur_chessman = null;show_next();}}//function when the events of grids and chessmenfunction table_Click(){if(cur_side=="A" && useAI_A) return;if(cur_side=="B" && useAI_B) return;event.cancelBubble=true;if(timer!=null) return;if(area_arr2 != null){if(event.srcElement.tagName.toLowerCase()=="td"){var the_td=event.srcElement;if(the_td.innerHTML=="" && cur_chessman != null)if((","+area_arr2.toString()+",").indexOf(","+the_td.id+",")!=-1)moveIt(the_td);}}}function table_Over(){event.cancelBubble=true;if(area_arr2 != null){if(event.srcElement.tagName.toLowerCase()=="td"){var the_td=event.srcElement;if(the_td.innerHTML==""){if((","+area_arr2.toString()+",").indexOf(","+the_td.id+",")==-1 && the_td.innerHTML=="")the_td.runtimeStyle.cursor = "not-allowed";elsethe_td.runtimeStyle.cursor = "hand";}}}}function table_Out(){event.cancelBubble=true;if(area_arr2 != null){if(event.srcElement.tagName.toLowerCase()=="td"){var the_td=event.srcElement;if(the_td.innerHTML=="")the_td.runtimeStyle.cursor = "";}}}function img_over(the_img){if(cur_side==the_img.id.left(1))the_img.style.cursor=the_img==cur_chessman?'hand':'not-allowed';else if(area_arr2!=null)the_img.style.cursor=(","+area_arr2.toString()+",").indexOf(","+the_img.offsetParent.id+",")==-1?'not-allowed':'hand';elsethe_img.style.cursor='default';}//to make a chessman move to anther grid (also include the against event)var timer = null;var MoveObj = null;function moveIt(the_target){if(timer!=null) return;var start_pos= new get_Pos(cur_chessman);var end_pos= new get_Pos(the_target);var step= 5;var step_x= Math.floor((start_pos.left-end_pos.left)/step);var step_y= Math.floor((start_pos.top-end_pos.top)/step);move_chessman.style.top = start_pos.top;move_chessman.style.left = start_pos.left;move_chessman.appendChild(cur_chessman);move_chessman.style.display="";MoveObj=[cur_chessman,step_x,step_y,5,the_target];the_target.runtimeStyle.backgroundColor = "#cccccc";timer=setInterval("step_move()",100);}function step_move(){if(MoveObj==null){if(timer!=null)clearInterval(timer);timer=null;return;}MoveObj[4].runtimeStyle.backgroundColor = MoveObj[3]%2?"#cccccc":"";if(MoveObj[3]-->0){with(move_chessman.style){top=parseInt(top)-MoveObj[2];left=parseInt(left)-MoveObj[1]}}else{clearInterval(timer);timer=null;if(aim_chessman!=null){Att_rule();}else{MoveObj[4].innerHTML= ""MoveObj[4].appendChild(cur_chessman);cur_chessman.style.filter = cur_chessman.style.filter.replace(" Gray","");}MoveObj[4].runtimeStyle.backgroundColor = "";MoveObj=null;move_chessman.style.display="none";cur_chessman = null;Clear_area();show_next();}}//who will alive when two chessmen from different troops meet ( u can set the rule here )function Att_rule(){var c1 = Get_chessman(cur_chessman)[0];var c2 = Get_chessman(aim_chessman)[0];var c1_luck = GetRandomNum(1,c1.luck);var c2_luck = GetRandomNum(1,c2.luck);var c1_damage = (c2.att-c1.def)*5;var c2_damage = (c1.att-c2.def)*5;if(c1_damage<0)c1_damage=0;if(c2_damage<0)c2_damage=0;var rest = (c1.life + c1_luck*Math.random()*5 - c1_damage) - (c2.life + c2_luck*Math.random()*5 - c2_damage);if(rest>0){cur_chessman.id.left(1)=="A"?troop_B--:troop_A--;rest = Math.ceil(Math.abs(rest));c1.life = c1.life>rest?rest:Math.round(c1.life*0.7);c2.life = 0;aim_chessman.removeNode(aim_chessman);cur_chessman.alt = cur_chessman.alt.replace(/Life : [\d]+/gm,"Life : " + c1.life);aim_chessman.alt = "";MoveObj[4].appendChild(cur_chessman);cur_chessman.style.filter = cur_chessman.style.filter.replace(" Gray","");}else if(rest<0){cur_chessman.id.left(1)=="A"?troop_A--:troop_B--;rest = Math.ceil(Math.abs(rest));c2.life = c2.life>rest?rest:Math.round(c2.life*0.7);c1.life = 0;cur_chessman.removeNode(cur_chessman);aim_chessman.alt = aim_chessman.alt.replace(/Life : [\d]+/gm,"Life : " + c2.life);cur_chessman.alt = "";}else{troop_A--;troop_B--;aim_chessman.removeNode(aim_chessman);cur_chessman.removeNode(cur_chessman);cur_chessman.alt = "";aim_chessman.alt = "";}aim_chessman = null;alive_A.innerText = "Soldier:" + troop_A;alive_B.innerText = "Soldier:" + troop_B;}//functions about turns of the troopvar cur_side = "A";var cur_turn_idx = 0;var cur_turn = null;var the_turn = 1;function init_turn(){cur_turn_idx = 0;cur_turn = new Array();var tmp = Force_A.copy().concat(Force_B);tmp = tmp.sort(function(a,b){return(GetRandomNum(-1,1))});tmp = tmp.sort(function(a,b){return(b[0].speed-a[0].speed)});for(i=0;i<tmp.length;i++){if(tmp[i][0].life>0) cur_turn.push(tmp[i]);}tmp = null;}function show_next(){if(troop_A+troop_B==0){show_info("Double Kick Out !");showStatus.innerText = "Double Kick Out !";Clear_area();return;}else if(troop_A==0){show_info("Force A Has Been Defeated !");showStatus.innerText = "Force A Has Been Defeated !";Clear_area();return;}else if(troop_B==0){show_info("Force B Has Been Defeated !");showStatus.innerText = "Force B Has Been Defeated !";Clear_area();return;}if(cur_turn_idx==0){show_info("Turn " + (the_turn++));setTimeout("show_next_go()",2000);}else{show_next_go();}}function show_next_go(){if(cur_turn[cur_turn_idx][0].life==0){if(++cur_turn_idx==cur_turn.length)init_turn();show_next()return;}cur_chessman = cur_turn[cur_turn_idx++][2];if(cur_chessman.id.left(1)!=cur_side){cur_side = cur_side=="A"?"B":"A";showStatus.innerText = "Current Turn : Force "+cur_side;}cur_chessman.style.filter+=' Gray';Get_area(cur_chessman);if(cur_turn_idx==cur_turn.length)init_turn();if(cur_side=="A" && useAI_A)AI_move(cur_chessman);if(cur_side=="B" && useAI_B)AI_move(cur_chessman);}init_turn();show_next();</script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]