JS 小游戏

关注+2004-10-07作者：蓝点

//控制棋盘大小，应小于 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 used String.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 event document.onselectstart = new Function("return false"); document.oncontextmenu = new Function("return false"); //Draw the Chessboard with the parameters of num_row & num_col var 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>Force A <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>Force B <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(" <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 chessman var 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 chessman function 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, 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]); //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 attrib function 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 bar var 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 AI var 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; else useAI_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 chessman function 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 chessmen function 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"; else the_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'; else the_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 troop var 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 全部选择提示：你可先修改部分代码，再按运行]