突然发觉自己好喜欢写一些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 //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 }
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 }
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 }
希望大家喜欢。。。有什么问题随时联系我。。。