强大的javascript写劲舞团

来源：互联网发布：linux怎么添加输入法编辑：程序博客网时间：2024/04/27 23:06

<html><head><title>Demo - 网页劲舞团 V0.1 By Xqin</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<body>
<FIELDSET id=Demo5 style="HEIGHT:500px">
<h3>Demo - 网页劲舞团 V1.0 By Xqin</h3>

<div id="ShowKeyMode" align="center" style="margin-top:200px;height:80;">
<div id="KeyMode" style="position:relative;font-size:12px;width:500px;height:70px;padding-top:5px;line-height:60px;background:#fafafa;border:solid 1px #ccc;filter:progid:DXImageTransform.microsoft.dropshadow(offX=3,offY=4,color=#eeeeee)"></div>
</div>

<div id="ShowUserPressKey" align="center" style="margin-top:20px;height:80;">
<div id="PressKey" style="position:relative;width:640px;height:70px;padding-top:5px;line-height:60px;background:#fafafa;border:solid 1px #ccc;filter:progid:DXImageTransform.microsoft.dropshadow(offX=3,offY=4,color=#eeeeee)"></div>
</div>

<div id="ShowProccess" align="center" style="margin-top:10px;height:30;">
<div id="Press" style="position:relative;width:250px;height:26px;padding-left:100px;padding-top:2px;line-height:60px;background:#fafafa url(http://test12.howvnet.cn/xiaoqin/jwt/bg.gif) no-repeat fixed 0px 1px;border:solid 1px #ccc;filter:progid:DXImageTransform.microsoft.dropshadow(offX=3,offY=4,color=#eeeeee)">
<img src="http://test12.howvnet.cn/xiaoqin/jwt/p.gif" style="position:absolute;margin-top:6px;">
</div>
<div id="sStatus" style="position:absolute;margin-right:0px;z-index:2"></div>
</div>

<div id="Status" style="position:absolute;bottom:0px;left:100px;right:100px;width:824px;height:150px;font-size:12px;color:#FF0000;border:1px solid #FF0000;overflow:auto;"></div>
</FIELDSET>
<script>
var keyNum,keyMode,myID,keyStr,debug,gSpeed,uScore;
keyNum = 0;  //用户所需按键按键记数器
uKeyNum = 0;  //用户按键记数器
keyMode = 5;  //按键模式
myID = "Xq"; //标记名字
keyStr = "";  //记录按键
uScore = 0;  //用户分数
//debug = true; //是否调试程序
debug = false; //是否调试程序
if(!debug)$("Status").style.display="none";
window.onload  = showKey;
document.onkeydown = CheckKey;
//---函数定义区域开始
//******************************************************************************
function $(ID){return document.getElementById(ID);}
function showKey(){
var ti;
for(ti=0;ti<keyMode;ti++){
  makeKey();
}
}
//******************************************************************************
function showStatus(){
$("KeyMode").innerHTML=("<span style=\"color:#FF0000;font-size:12px;\">现在的按键模式为："+keyMode+"键模式</span>");
}
//******************************************************************************
function makeKey(){
var kCode = parseInt(Math.random()*4)+37;
if(keyNum>=keyMode)return;
if(37==kCode){  // 37 左
  $("PressKey").innerHTML+=("<span id=\""+myID+keyNum+"\" style=\"color:#FF0000;font-size:35px;width:50;height:50;\">"+getKey(kCode)+"</span>");     //左
  keyStr += "1";
}
if(38==kCode){  // 38 上
  $("PressKey").innerHTML+=("<span id=\""+myID+keyNum+"\" style=\"color:#FF0000;font-size:35px;width:50;height:50;\">"+getKey(kCode)+"</span>");     //上
  keyStr += "2";
}
if(39==kCode){  // 39 右
  $("PressKey").innerHTML+=("<span id=\""+myID+keyNum+"\" style=\"color:#FF0000;font-size:35px;width:50;height:50;\">"+getKey(kCode)+"</span>");     //右
  keyStr += "3";
}
if(40==kCode){  // 40 下
  $("PressKey").innerHTML+=("<span id=\""+myID+keyNum+"\" style=\"color:#FF0000;font-size:35px;width:50;height:50;\">"+getKey(kCode)+"</span>");     //下
  keyStr += "4";
}
keyNum++;
if(debug)$("Status").innerText=$("PressKey").innerHTML+keyStr;
}
//******************************************************************************
function getKey(kCode){
if(40==kCode){
  return("↓");
}
if(39==kCode){
  return("→");
}
if(38==kCode){
  return("↑");
}
if(37==kCode){
  return("←");
}
}
//******************************************************************************
function CheckKey(){   //37 1; 38 2; 39 3; 40 4;
var kCode = event.keyCode;
if((kCode==32 || kCode==17) && uKeyNum>=keyMode){
  var uStatus;
  uStatus = parseInt($("Press").style.backgroundPosition);
  $("sStatus").innerHTML="";
  if(uStatus>190 && uStatus < 210){$("sStatus").innerHTML="<span style=\"font-size:18px;color:#F00;\">漂亮</span>";uScore+=parseInt(Math.random()*5+50);}
  if(uStatus>210 && uStatus < 230){$("sStatus").innerHTML="<span style=\"font-size:18px;color:#F00;\">好</span>";uScore+=parseInt(Math.random()*5+30);}
  if(uStatus>170 && uStatus < 190){$("sStatus").innerHTML="<span style=\"font-size:18px;color:#F00;\">一般</span>";uScore+=parseInt(Math.random()*5+10);}
  if(uStatus<170 || uStatus > 210){
   $("sStatus").innerHTML="<span style=\"font-size:18px;color:#F00;\">Miss</span>";
   uScore+=parseInt(Math.random()*5);
   $("PressKey").innerHTML="";
   $("Press").style.backgroundPosition=0;
   bPos = 0;
   uKeyNum = 0;
   keyNum = 0;
   keyStr = "";
   showKey();
  }
  $("sStatus").innerHTML+=("</br>你现在的分数是:"+uScore);
}
if(uKeyNum>=keyMode){
  $("PressKey").innerHTML="";
  uKeyNum=0;
  keyNum=0;
  keyStr="";
  showKey();
}
if(kCode>40 || kCode<37)return;  //空格的按键值为32 Ctrl键17
var tj,Tkey;      //Like KeyStr=32443333
  Tkey = keyStr.substring(uKeyNum,uKeyNum+1);
  if((parseInt(Tkey)+36).toString()==kCode){
   $(myID+uKeyNum).style.backgroundColor="#008000";
   uKeyNum++;
  }else{
   for(tj=0;tj<uKeyNum;tj++){
    $(myID+tj).style.backgroundColor="";
   }
   uKeyNum=0;
  }
}
//******************************************************************************
var bPos;
bPos = 0;
gSpeed = 100;  //小球移动速度
function runProcess(){
if(parseInt($("Press").style.backgroundPosition)>230)bPos=0;
$("Press").style.backgroundPosition=bPos;
bPos+=11;
if(uScore>1000){
  keyMode = 9;
  gSpeed=85;
  showKey();
}else{
  if(uScore>700){
   keyMode = 8;
   gSpeed=88;
   showKey();
  }else{
   if(uScore>500){
    keyMode = 7;
    gSpeed=92;
    showKey();
   }else{
    if(uScore>200){
     keyMode = 6;
     gSpeed=96;
     showKey();
    }
   }
  }
}
showStatus();
setTimeout("runProcess()",gSpeed);
}
setTimeout("runProcess()",2000);
</script>
</body>
</html>