一个js游戏

偶然翻到以前写的js游戏，由于本人对css很头痛，仅在chrome,firefox下测试通过，估计还有bug，放在硬盘上也浪费，有需要的同学就拿去:)

 

双向滚动通过left控制位置

 

单向滚动用了left，scrollleft，代码中包含的scrollleft

 

图1：双向滚动

图2：单向滚动

 

操作方法：

左边：←↑→↓：A W D S

右边：←↑→↓：方向键

几种方向键：

 

默认键

 

 

反向键：按箭头相反方向击键

 

 

顺时针旋转键：箭头会顺时针旋转n次，直到n==0

 

 

随机旋转键：箭头会随机方向旋转n次，直到n==0

 

 

复活键：复活前面n个箭头

 

 

滑动键：向后滑动一定距离，又叫拯救键

 

 

boss键：这个没有动作，有空加个连击的动作

 

部分代码：

代码

  1  /* behaviors */         
  2          
  3           /* 默认 */
  4           var  defaultBehavior  =  {
  5              name: "" ,
  6              element: null ,
  7              direction: null ,
  8              action: null ,
  9              className: "" ,
 10              li: null ,
 11              config: null ,
 12              _generatedirection: function (){
 13                   var  k  =  randomvalue( 0 , 3 );                    
 14                   var  className  =  arrow[k];
 15                   if (className  ==   " undefined " )
 16                      className  =   " up " ;
 17                   this .direction  =  className;
 18              },
 19              _generateaction: function (){
 20                   this .action = this .name;
 21              },
 22              _generatebehavior: function (){},
 23              _processbehavior: function (className,direction,type,num){ 
 24                   var  re  =   new  RegExp( " \s* "   +  className  +   " \s* " );
 25                   var  match  =  re.test(direction);
 26                   if (match){   
 27                       return   this ._Onprocessbehavior(className,direction,type,num);   
 28                  }
 29                   return   false ;
 30              },
 31              _Onprocessbehavior: function (className,direction,type,num){
 32                   this ._increase();
 33                   return   this .li.className + "  done " ;       
 34              },
 35              _increase: function (){
 36                  cur.obj.current ++ ;
 37                  msg( " msg_1 " ,cur.obj.current);
 38              },
 39              _dispose: function (){},
 40              create: function (ele,config){
 41                   // this.name="";
 42                   this .element = null ;
 43                   this .direction = null ;
 44                   this .action = null ;
 45                   this .className = "" ;
 46                   this .config  =  config;
 47              
 48                   this .element  =  ele;               
 49 
 50                   this ._generatedirection();
 51                   this ._generateaction();
 52                   this ._generatebehavior();
 53                  
 54                   this .className  =   this .direction  +   "   "   + this .action;
 55                   this .element.className  =   this .className ;
 56                   this .element.behavior  =   this ;
 57              },
 58              judge: function (className){
 59                   this .li  =  cur.childNodes[cur.obj.current];                    
 60                  
 61                   var  self  =   this ;
 62                   this .li.className  =   this .li.className.replace( / (left|up|right|down)\s*(aboutme|slide|revival|revert|transform|Atransform)?\s*(\[(\d)\])? / , function ($ 0 ,$ 1 ,$ 2 ,$ 3 ,$ 4 ){
 63                       var  direction  =  $ 1 ;
 64                       var  type  =  $ 2 ;
 65                       var  num  =  $ 4 ;
 66                      
 67                       return  self._processbehavior(className,direction,type,num)  ||  $ 0 ; 
 68                    
 69                  });          
 70              }             
 71          };          
 72      
 73           /* 反向 */
 74           var  revertBehavior  =  {
 75              name: " revert " ,
 76              _processbehavior: function (className,direction,type,num){ 
 77                  direction  =  arrow[arrow.nextVal(arrow.indexOf(direction), 2 )];
 78                   var  re  =   new  RegExp( " \s* "   +  className  +   " \s* " );
 79                   var  match  =  re.test(direction);
 80                   if (match){   
 81                       return   this ._Onprocessbehavior(className,direction,type,num);   
 82                  }
 83                   return   false ;
 84              },
 85              _Onprocessbehavior: function (className,direction,type,num){
 86                  this ._increase(); 
 87                  return   this .li.className  +   "  done " ;                
 88              }
 89          };
 90          
 91          merge(revertBehavior,defaultBehavior, true );
 92           /* 旋转 */
 93           var  transformBehavior  =  {
 94              name: " transform " ,
 95              _addspan :  function (k){
 96                   var  span  =  document.createElement( " span " );
 97                  span.style.position  = " absolute " ;
 98                  span.style.top  = " 3px "
 99                  span.style.right  =   " 3px " ;
100                  span.style.padding  =   " 2px " ;
101                  span.style.border  =   " 1px solid black " ;
102                  span.innerText  =  k;
103                   this .element.appendChild(span);
104              },
105              _generateaction: function (){
106                   var  k;
107                   // log((this.config || 0).K);
108                   if ( typeof (( this .config  ||   0 ).K)  !=   " undefined " )
109                      k = this .config.K;
110                   else
111                      k = randomvalue( 1 , 4 );
112                   this .action  = this .name  +   "  [ "   +  k  +   " ] " ;
113                   this ._addspan(k);
114              },
115              _Onprocessbehavior: function (className,direction,type,num){
116                  direction  =  arrow[arrow.nextVal(arrow.indexOf(direction), 1 )];
117                   var  arr  =   this .li.getElementsByTagName( " span " ); 
118                   if (num > 0 ){
119                      num -- ;
120                       if (arr.length  >   0 )
121                          arr[ 0 ].innerText  =  num;
122                       return  direction  +   "   "   +  type  +   "  [ "   +  num  +   " ] " ; 
123                  }  else  {
124                      arr[ 0 ].innerText  =   " 0 " ;
125                       this ._increase(); 
126                       return   this .li.className  +   "  done " ;
127                  }          
128                  
129              }
130          };
131          
132          merge(transformBehavior,defaultBehavior, true );
133           /* 随机旋转 */
134           var  AtransformBehavior  =  {
135              name: " Atransform " ,
136              _Onprocessbehavior: function (className,direction,type,num){
137                  direction  =  arrow[arrow.nextVal(arrow.indexOf(direction),randomvalue( 1 , 3 ))];
138                   var  arr  =   this .li.getElementsByTagName( " span " ); 
139                   if (num > 1 ){
140                      num -- ;
141                       if (arr.length  >   0 )
142                          arr[ 0 ].innerText  =  num;
143                       return  direction  +   "   "   +  type  +   "  [ "   +  num  +   " ] " ; 
144                  }  else  {
145                      arr[ 0 ].innerText  =   " 0 " ;
146                       this ._increase(); 
147                       return   this .li.className  +   "  done " ;
148                  }          
149                  
150              }
151          }; 
152          
153          merge(AtransformBehavior,transformBehavior, true );
154          
155           /* 复活 */
156           var  revivalBehavior  =  {
157              name: " revival " ,
158              _Onprocessbehavior: function (className,direction,type,num){
159                  direction  =  arrow[arrow.nextVal(arrow.indexOf(direction),randomvalue( 1 , 3 ))];
160                   var  arr  =   this .li.getElementsByTagName( " span " );
161                   if (num > 0   &&  cur.obj.current > 0 ){
162                      
163                       while (num --> 0   &&  cur.obj.current > 0 ){
164                          cur.obj.current -- ;
165                          cur.childNodes[cur.obj.current].className  =  cur.childNodes[cur.obj.current].className.replace( / \s*done\s* / , "" );
166                      }
167                      
168                       if (arr.length  >   0 )
169                          arr[ 0 ].innerText  =   " 0 " ;
170                       return  direction  +   "   "   +  type  +   "  [0] " ; 
171                  }  else  {
172                      arr[ 0 ].innerText  =   " 0 " ;
173                       this ._increase(); 
174                       return   this .li.className  +   "  done " ;
175                  }          
176                  
177              }
178          };
179          
180          merge(revivalBehavior,transformBehavior, true )
181          
182           /* 滑动 */
183           var  slideBehavior  =  {
184              name: " slide " ,
185              _Onprocessbehavior: function (className,direction,type,num){
186                 cur.scrollLeft -= 20 ;
187                 
188                  // log(num);
189                 
190                  this ._increase(); 
191                  return   this .li.className  +   "  done " ;                
192              }
193          }
194          
195          merge(slideBehavior,defaultBehavior, true )     
196          
197           var  aboutmeBehavior  =  {
198              name: " aboutme " ,
199              _generatebehavior: function (){
200                   var  img  =  document.createElement( " IMG " );
201                  img.src = " about-me.png " ;
202                  img.style.width = " 100px " ;
203                  img.style.height = " 100px " ;
204                  img.style.cssFloat  =   " left " ;
205                   this .element.appendChild(img);
206              },
207              _Onprocessbehavior: function (className,direction,type,num){               
208                  this ._increase(); 
209                  return   this .li.className  +   "  done " ;                
210              }
211          }
212          
213          merge(aboutmeBehavior,defaultBehavior, true )    
214          
215           var  behaviorConfig  =  {
216               "" :defaultBehavior,
217               " revert " :revertBehavior,
218               " transform " :transformBehavior,
219               " Atransform " :AtransformBehavior,
220               " revival " :revivalBehavior,
221               " slide " :slideBehavior,
222               " aboutme " :aboutmeBehavior
223          };
224          
225           var  levelConfig  =  [
226                  {
227                  quene:[{name: "" },{name: "" },{name: " transform " ,config:{K: 3 }},{name: "" },{name: "" },{name: "" },{name: "" },{name: "" },{name: "" },{name: "" },{name: "" },{name: "" }],
228                  levelUp: 5
229               },
230              {
231                  quene:[{name: "" },{name: " revert " },{name: " revert " },{name: " transform " ,config:{K: 3 }},{name: "" },{name: "" },{name: " slide " },{name: " revival " ,config:{K: 3 }},{name: "" },{name: "" },{name: "" },{name: "" }],
232                  levelUp: 10
233              },
234              {
235                  quene:[{name: "" },{name: "" },{name: "" },{name: " transform " ,config:{K: 3 }},{name: "" },{name: "" },{name: " revival " ,config:{K: 3 }},{name: " revival " ,config:{K: 3 }},{name: "" },{name: "" },{name: "" },{name: "" }],
236                  levelUp: 10
237              },
238              {
239                  quene:[{name: "" },{name: "" },{name: " revert " },{name: " transform " ,config:{K: 3 }},{name: " Atransform " ,config:{K: 3 }},{name: "" },{name: " revival " ,config:{K: 3 }},{name: " revival " ,config:{K: 3 }},{name: "" },{name: "" },{name: "" },{name: "" }],
240                  levelUp: 10
241              }
242          ];
243          

完整代码见附件

 

/Files/qqhe325/H1.rar