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

 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 }

 完整源码地址>>

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