JavaScript游戏之仿劲舞团(简陋版)

突然发觉自己好喜欢写一些js小游戏，觉得蛮有意思。。。又可以娱乐，又可以学到东西。。。哈哈

这次带来的是仿劲舞团的小游戏。。。就是上下左右。。按后按空格。。。不过，没有人跳舞，也没有背景音乐。。。简陋版嘛

先来个预览玩玩吧：

连击： 0

时间：

 

 1：Direction类，方向类，就是显示上下左右那些，主要负责生成对应的dom元素。

Direction类

 1  // 方向类，生成上下左右的方向Dom
 2  // direction:方向
 3  var  Direction  =   function (direction){
 4      
 5       this .dom  =   null ;
 6      
 7       this .init(direction);
 8      
 9       return   this .dom;
10  }
11  Direction.prototype  =  {
12       // 方向对应的dom元素的类名
13      directionMap : {
14           " up " : " up " ,
15           " down " : " down " ,
16           " left " : " left " ,
17           " right " : " right "
18      },
19       // 初始化函数
20      init :  function (direction){
21           var  b  =  document.createElement( ' b ' );
22          b.className  =   this .directionMap[direction];
23           // 为方向dom元素扩展一个属性与方法
24          b.direction  =  direction;
25          b.bingo  =   this .bingo;
26          
27           this .dom  =  b;
28      },
29       // 命中之后事件
30      bingo :  function (){
31           this .className  +=   ' bingo ' ;
32      }
33  }

 

 

 2：Panel类，背景类，就是游戏区，主要处理方向的生成与键盘事件，还有连击数。

背景类

  1  // 背景类，处理方向的生成与键盘事件
  2  var  Panel  =   function (){
  3       // 背景dom元素
  4       this .dom  =   null ;
  5       // 生成的方向类集合
  6       this .directionList  =  [];
  7       // 目前输入到第几个方向
  8       this .inputNum  =   0 ;
  9       // 连击数
 10       this .actcount  =   0 ;
 11      
 12       this .init();
 13  }
 14  Panel.prototype  =  {
 15       // 数字对应方向
 16      map : {
 17           1 : " up " ,
 18           2 : " down " ,
 19           3 : " left " ,
 20           4 : " right "
 21      },
 22       // 每次出现多少个方向
 23      count :  4 ,
 24       // 初始化
 25      init :  function (){
 26          
 27           var  _this  =   this ;
 28          
 29           this .dom  =  document.getElementById( ' panel ' );
 30          
 31           this .dom.focus();
 32          
 33           this .dom.onkeydown  =   function (e){_this.keydown(e);};
 34      },
 35       // 显示所有方向
 36      showDirection :  function (){
 37          
 38           for ( var  i = 1 ;i  <=   this .count;i ++ ){
 39               this .add();
 40          }
 41      },
 42       // 清楚所有方向
 43      clearDirection :  function (){
 44          
 45           for ( var  i = 0 ,l = this .directionList.length;i  <  l;i ++ ){
 46               var  temp  =   this .directionList.pop();
 47              
 48               this .dom.removeChild(temp);
 49          }
 50      },
 51       // 添加一个方向
 52      add :  function (){
 53          
 54           var  random  =  parseInt(Math.random() * 4 + 1 , 10 );
 55          
 56           var  dir  =   new  Direction( this .map[random]);
 57          
 58           this .directionList.push(dir);
 59           this .dom.appendChild(dir);
 60      },
 61       // 按键事件
 62      keydown :  function (e){
 63          e  =  e ||  window.event;
 64           // 阻止浏览器默认事件
 65           if (e.keyCode  ==   32   ||  e.keyCode  ==   37   ||  e.keyCode  ==   38   ||  e.keyCode  ==   39   ||  e.keyCode  ==   40 ){
 66               if (e.preventDefault)e.preventDefault();
 67               else  e.returnValue  =   false ;
 68          }
 69           else   return ;
 70          
 71           var  direction;
 72           switch (e.keyCode){
 73               case   32 :direction  =   ' space ' ; this .inputNum -- ; break ;
 74               case   37 :direction  =   ' left ' ; break ;
 75               case   38 :direction  =   ' up ' ; break ;
 76               case   39 :direction  =   ' right ' ; break ;
 77               case   40 :direction  =   ' down ' ; break ;
 78               default :direction  =   null ; break ;
 79          }
 80          
 81           this .inputNum ++ ;
 82           this .checkInput(direction);
 83      },
 84       // 检测用户输入方向
 85      checkInput :  function (direction){
 86           // 检测是否输入完成
 87           if  (direction  ==   ' space '   &&   this .inputNum  ==   this .directionList.length) {
 88               this .finish();
 89          }
 90           else  {
 91               var  dir  =   this .directionList[ this .inputNum  -   1 ];
 92               // 检测是否按键正确
 93               if  ( this .inputNum  >   0   &&  direction  !=   null   &&  dir.direction  ==  direction) {
 94                  dir.bingo();
 95              }
 96               else   this .lose();
 97          }
 98      },
 99       // 完成一轮方向输入
100      finish :  function (){
101          
102           this .actcount  +=   1 ;
103          document.getElementById( ' actcount ' ).innerHTML  =   this .actcount;
104           this .actEffor();
105           // 随机下轮出现的方向数
106           this .count  =  parseInt(Math.random() * 4 + 5 , 10 );
107           // 重置
108           this .reset();
109           // 显示方向
110           this .showDirection();
111           // 清理一些手尾
112           this .onend();
113      },
114       // 用户输入错误或者时间到
115      lose :  function (){
116          alert( ' 您输了，战绩为： ' + this .actcount + " 连击 " );
117          
118           this .count  =   4 ;
119           this .actcount  =   0 ;
120          document.getElementById( ' actcount ' ).innerHTML  =   this .actcount;
121           this .reset();
122          
123           this .onend();
124           this .onlose();
125      },
126       // 用户正确输入一轮方向后，连击数的效果
127      actEffor :  function (){
128          
129           var  flag  =   0 ,
130          colorMap  =  {
131               0 : " Red " ,
132               1 : " Blue " ,
133               2 : " Orange " ,
134               3 : " White "
135          };
136          
137           var  process  =   function (){
138              
139              document.getElementById( ' actcount ' ).style.color  =  colorMap[flag];
140              flag ++ ;
141              
142               if (flag  <=   3 ){
143                  setTimeout(process, 100 );
144              }
145          }
146          process();
147      },
148       // 重置
149      reset :  function (){
150          
151           this .clearDirection();
152           this .inputNum  =   0 ;
153      },
154      onend :  function (){},
155      onlose:  function (){}
156  }

 

 

 3：Game类，游戏控制类，控制游戏的开始结束，以及倒计时等。 

游戏控制类

 1  // 游戏控制类
 2  var  Game  =  {
 3       // 背景类的dom
 4      panel :  null ,
 5       // 时间进度条dom
 6      range :  null ,
 7       // 每轮时间，毫秒
 8      rangetime :  3000 ,
 9       // 目前进度
10      nowrange :  0 ,
11       // 时间进度循环ID
12      rangid :  null ,
13       // 开始按钮
14      startbtn :  null ,
15       // 初始化
16      init :  function (){
17           // 获取进度条
18           this .range  =  document.getElementById( ' range ' );
19           // 新建游戏背景
20           this .panel  =   new  Panel();
21           // 清理手尾事件
22           this .panel.onend  =   function (){
23                      
24              Game.nowrange  =   0 ;
25              Game.range.style.width  =   0   +   ' px ' ;
26          };
27           // 游戏输了触发事件
28           this .panel.onlose  =   function (){
29              clearInterval(Game.rangid);
30              
31              Game.startbtn.disabled  =   '' ;
32              Game.startbtn.focus();
33          };
34           // 显示方向
35           this .panel.showDirection();
36           // 开始计时
37           this .startTime();
38      },
39       // 计时
40      startTime :  function (){
41          
42           var  per  =   10 ,ftime  =   this .rangetime / 20,_this = this;
43          
44           var  process  =   function (){
45              
46              _this.nowrange  +=   5 ;
47               if (_this.nowrange  <=   100 ){
48                  _this.range.style.width  =  _this.nowrange  *   2   +   ' px ' ;
49              }
50               else  {
51                  _this.panel.lose();
52              }
53          }
54           this .rangid  =  setInterval(process,ftime);
55      },
56       // 开始
57      start :  function (obj){
58          
59           this .startbtn  =  obj;
60           this .startbtn.disabled  =   ' true ' ;
61          
62           if ( ! this .panel){
63               this .init();
64          }
65           else  {
66               this .startTime();
67               this .panel.showDirection();
68               this .panel.dom.focus();
69          }
70      }
71  }

 

 

 完整源码地址>>

希望大家喜欢。。。有什么问题随时联系我。。。 

转载于:https://www.cnblogs.com/floyd/archive/2010/10/19/1855599.html