JS写的音乐游戏——JS音速V1.0.0


还是菜鸟，写Java写累了，写写Javascript。

JS我还是菜鸟，没受过正规教育。写的不好，大家请见谅。欢迎踊跃提出建议和意见。

不多说，先上图

下面是源码。有空我会加多一些效果：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <mce:style type="text/css"><!--   
  7. * {   
  8.     margin:0;   
  9.     padding:0   
  10. }   
  11. body {   
  12.     background:url(bg1.jpg) top center no-repeat;   
  13. }   
  14. #center {   
  15.     width:820px;   
  16.     height:602px;   
  17.     background:url(line.png) center 5px no-repeat;   
  18.     border-top:none;   
  19.     margin:0 225px;   
  20.     position:relative;   
  21.     overflow:hidden;   
  22. }   
  23. #touMing {   
  24.     width:800px;   
  25.     height:602px;   
  26.     filter:alpha(opacity=40);   
  27.     opacity:0.6;   
  28.     padding:10px;   
  29.     color:white;   
  30. }   
  31. #start {   
  32.     width:70px;   
  33.     height:28px;   
  34.     margin:40px 0 0 400px;   
  35. }   
  36. #pause {   
  37.     width:70px;   
  38.     height:28px;   
  39.     margin:40px 0 0 350px;   
  40. }   
  41. --></mce:style><style type="text/css" mce_bogus="1">* {   
  42.     margin:0;   
  43.     padding:0   
  44. }   
  45. body {   
  46.     background:url(bg1.jpg) top center no-repeat;   
  47. }   
  48. #center {   
  49.     width:820px;   
  50.     height:602px;   
  51.     background:url(line.png) center 5px no-repeat;   
  52.     border-top:none;   
  53.     margin:0 225px;   
  54.     position:relative;   
  55.     overflow:hidden;   
  56. }   
  57. #touMing {   
  58.     width:800px;   
  59.     height:602px;   
  60.     filter:alpha(opacity=40);   
  61.     opacity:0.6;   
  62.     padding:10px;   
  63.     color:white;   
  64. }   
  65. #start {   
  66.     width:70px;   
  67.     height:28px;   
  68.     margin:40px 0 0 400px;   
  69. }   
  70. #pause {   
  71.     width:70px;   
  72.     height:28px;   
  73.     margin:40px 0 0 350px;   
  74. }</style>  
  75. <mce:script type="text/javascript"><!--   
  76. var MAX_HEIGHT = 602;      //超过这个高度的方块不显示   
  77. var blocks = new Array();  //放置每个下落的方块   
  78. var speed = 5;    //每次下落速度   
  79. var timeMin = 1;  //最快1秒产生一个方块   
  80. var timeMax = 2;  //最慢2秒产生一个方块   
  81. var numMax  = 10;  //最多同时有6个方块   
  82.   
  83. var lastGenTime=0;  //上次产生方块的时间   
  84. var timeGrid = 800; //产生方块的时间间隔不能比这个短   
  85.   
  86. var clearRand = 60; //距离MAX_HEIGHT上下多少像素就能消去方块而且加分   
  87. var score = 0;   
  88.   
  89. var keyB  = new Array("url(w.png) no-repeat","url(s.png) no-repeat","url(a.png) no-repeat","url(d.png) no-repeat");   
  90. var KEY_W = 0;  //对应数组的位置   
  91. var KEY_S = 1;   
  92. var KEY_A = 2;   
  93. var KEY_D = 3;   
  94. var pageX = new Array("25px","105px","185px","265px","345px","425px","505px","585px","665px","745px");   
  95.   
  96. var TIP_WIDTH  = 100;   
  97. var TIP_HEIGHT = 30;   
  98. var TIP_IMAGES = new Array(   
  99.     new Array("images/l10001.png","images/l10002.png","images/l10003.png","images/l10004.png","images/l10005.png","images/l10006.png"),   
  100.     new Array("images/l20001.png","images/l20002.png","images/l20003.png","images/l20004.png","images/l20005.png","images/l20006.png"),   
  101.     new Array("images/l30001.png","images/l30002.png","images/l30003.png","images/l30004.png","images/l30005.png","images/l30006.png")   
  102. );   
  103.   
  104.   
  105. /*   
  106.  * 每隔一个时间就调用一个函数   
  107.  */   
  108. function doOnTime(func,time){   
  109.   return setInterval(func,time);   
  110. }   
  111. /*   
  112.  * 产生方块   
  113.  */   
  114. function generateBlock(){   
  115.   setTimeout(function(){   
  116.     var nowTime = new Date().getTime();   
  117.     if((blocks.length < numMax )&& (nowTime - lastGenTime > timeGrid)){   
  118.       lastGenTime = nowTime;   
  119.       var randPos=Math.floor(pageX.length*Math.random());   
  120.       var randPic=Math.floor(keyB.length*Math.random());   
  121.       var center=document.getElementById("center");   
  122.       var thing=document.createElement("div");   
  123.       center.appendChild(thing);   
  124.       thing.style.width="30px";   
  125.       thing.style.height="30px";   
  126.       thing.style.overflow="hidden";   
  127.       thing.style.position="absolute";   
  128.       thing.style.background=keyB[randPic];   
  129.       thing.style.left=pageX[randPos];   
  130.       thing.keyNum = randPic;               //为IE准备的   
  131.       thing.setAttribute("keyNum",randPic); //为FF准备的   
  132.       thing.style.top = "-30px";   
  133.       blocks.push(thing);  //将方块加入数组中   
  134.     }   
  135.   },Math.random()*(timeMax-timeMin+1)*1000+timeMin*1000);   
  136. }   
  137.   
  138. /*   
  139.  * 游戏入口，每隔一定时间被调用   
  140.  */   
  141. function game(){   
  142.   generateBlock();   
  143.   update();   
  144.   showScore("score",score);   
  145. }   
  146.   
  147. /*   
  148.  * 更新游戏数据，比如方块位置   
  149.  */   
  150. function update(){   
  151.   for(var i=0; i<blocks.length; i++){   
  152.     if(parseInt(blocks[i].style.top)>MAX_HEIGHT){   
  153.       blocks[i].style.display = "none";   
  154.       blocks.remove(i);   
  155.       i--;   
  156.     }else{   
  157.       blocks[i].style.top = parseInt(blocks[i].style.top)+speed+"px";   
  158.     }   
  159.   }   
  160. }   
  161.   
  162. /*   
  163.  * 显示分数   
  164.  */   
  165. function showScore(showId,score){   
  166.     document.getElementById(showId).innerHTML = parseInt(score);   
  167. }   
  168.   
  169. /*   
  170.  * 给Array添加移除的方法   
  171.  */   
  172. Array.prototype.remove=function(dx){   
  173.     if(isNaN(dx)||dx>this.length){return false;}   
  174.     for(var i=0,n=0;i<this.length;i++){   
  175.         if(this[i]!=this[dx]){   
  176.             this[n++]=this[i];   
  177.         }   
  178.     }   
  179.     this.length-=1;   
  180. }    
  181.   
  182. /*   
  183.  * 添加事件监听   
  184.  */   
  185. function addKeyListener(){   
  186.     document.onkeydown=function(evt){   
  187.         var evtevt=evt||window.event;   
  188.         var evtevtKey=evt.keyCode||evt.which||evt.charCode;   
  189.            
  190.       for(var u=0;u<blocks.length;u++){   
  191.         var blockKeyNum = blocks[u].keyNum || blocks[u].getAttribute("keyNum");   
  192.         if((evtKey==87 && blockKeyNum == KEY_W) ||    
  193.            (evtKey==83 && blockKeyNum == KEY_S) ||   
  194.            (evtKey==65 && blockKeyNum == KEY_A) ||   
  195.            (evtKey==68 && blockKeyNum == KEY_D)   
  196.         ){   
  197.             var top = parseInt(blocks[u].style.top);   
  198.             var height = parseInt(blocks[u].style.height);   
  199.             if(top>MAX_HEIGHT-clearRand-height && top<MAX_HEIGHT+clearRand){  //在消失高度范围内   
  200.                 var mid = top+height/2;   
  201.                 var temp = Math.abs(MAX_HEIGHT-mid);    //和目标线的距离   
  202.   
  203.                 var level = 0;   
  204.                 if(temp>0 && temp<= clearRand/3){   
  205.                   level = 2;   
  206.                 }else if(temp > clearRand*1/3 && temp <= clearRand*2/3){   
  207.                   level = 1;   
  208.                 }   
  209.   
  210.                 score+=level+1;    
  211.                 animate(parseInt(blocks[u].style.left)+TIP_WIDTH,top-TIP_HEIGHT,TIP_WIDTH,TIP_HEIGHT,TIP_IMAGES[level],0,90,"rid"+Math.random()+Math.random());   
  212.   
  213.                 blocks[u].style.display="none";   
  214.                 blocks.remove(u);   
  215.                 u--;   
  216.             }              
  217.         }   
  218.       }   
  219.     }   
  220. }   
  221.   
  222. /*   
  223.  * 动画函数   
  224.  * x -- 图片left   
  225.  * y -- 图片top   
  226.  * width -- 图片宽度   
  227.  * height -- 图片高度   
  228.  * imageArray -- 图片数组   
  229.  * index -- 当前播放到哪个图片   
  230.  * time -- 每个图片切换的时间   
  231.  * id -- 产生的div的id   
  232.  */   
  233. function animate(x,y,width,height,imageArray,index,time,id){   
  234.   if(index<imageArray.length){   
  235.     var d = document.getElementById(id);   
  236.     if(d==null){   
  237.       d = document.createElement("div");   
  238.       d.style.width = width+"px";   
  239.       d.style.height= height+"px";         
  240.       d.style.position = "absolute";   
  241.       d.style.top = y+"px";   
  242.       d.id = id;   
  243.       d.setAttribute("id",id);   
  244.       d.style.left= x+"px";   
  245.       document.getElementsByTagName("body")[0].appendChild(d);   
  246.     }   
  247.     d.style.background = "url(\""+imageArray[index]+"\")";   
  248.   
  249.     setTimeout(function(){return animate(x,y,width,height,imageArray,++index,time,id)},time);   
  250.   }else{   
  251.     var d = document.getElementById(id);   
  252.     if(d!=null){   
  253.       document.getElementsByTagName("body")[0].removeChild(d);   
  254.     }   
  255.   }   
  256. }   
  257.   
  258. window.onload=function(){   
  259.   var t;   
  260.   var pauseBtn = document.getElementById("pause");   
  261.   pauseBtn.onclick=function(){   
  262.     clearInterval(t);   
  263.     t=null;   
  264.   }   
  265.   
  266.   var startBtn = document.getElementById("start");   
  267.   startBtn.onclick=function(){   
  268.       if(!t){   
  269.             t = doOnTime(game,25);   
  270.       }   
  271.   }   
  272.   
  273.   addKeyListener();   
  274.   
  275. }   
  276. // --></mce:script>  
  277. </head>  
  278.   
  279. <body>  
  280. <div id="center">  
  281.   <div id="touMing">  
  282.     当前分数 ： <span id="score"></span>  
  283.   </div>  
  284. </div>  
  285. <input type="button" id="start" value="开始游戏"/>  
  286. <input type="button" id="pause" value="暂停游戏"/>  
  287. </body>  
  288. </html>  

相关内容