上一篇：CCTV视频里的全屏播放功能实现 >>

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 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><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 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 chessmens 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 全部选择提示：你可先修改部分代码，再按运行]

（）

返回顶部

下一篇：检测屏幕的分辨率 >>