Day8--------gameEasyMaze 

 //----------使用前面所做的鼠标尾星完成迷宫类游戏，玩家需要在不断移动中找到出口，然而身体不能碰触到墙壁，否则游戏失败
 //----没有完成的------没有完成整个游戏的绘制，只做了基本的游戏机制，觉得没什么趣味性，等有好的idea的时候再把它完成
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>easyMaze</title>
 6 </head>
 7 <style type="text/css">
 8     div{width: 5px;height: 5px;position: absolute;background: red;left: 100px;top: 100px;}
 9 </style>
10 <script type="text/javascript">
11     window.onload=function(){
12         for(i=0;i<8;i++) document.body.innerHTML+=document.body.innerHTML;
13         oDiv=document.getElementsByTagName('div');
14         for(i=31;i<oDiv.length;i++){
15             if(i%2) oDiv[i].style.top=oDiv[i].offsetTop+60+'px';
16             oDiv[i].style.left=oDiv[i].offsetLeft+Math.ceil(i/2)*5+'px';
17             oDiv[i].onmouseover=function(){alert('Game Over.');};
18         }
19         document.onmousemove=function(ev){
20             oEvent=ev||event;        
21             for(i=0;i<31;i++){            
22                 oDiv[i].style.left=oDiv[i+1].offsetLeft+'px';
23                 oDiv[i].style.top=oDiv[i+1].offsetTop+'px';
24             }
25             oDiv[30].style.left=oEvent.clientX+'px';
26             oDiv[30].style.top=oEvent.clientY+'px';
27         }
28     }
29 </script>
30 <body>
31     <div></div>
32 </body>
33 </html>

 

posted on 2014-11-28 07:38  fleshy  阅读(141)  评论(0)    收藏  举报

导航