the same to you!

Posted on

js做小游戏可有效的锻炼思维能力，以下是寻找房祖名和锅打灰太狼的小游戏：

寻找房祖名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.w{
	position: absolute;
	max-width: 600px;
	width: 100%;
	height: 800px;
	border: 5px solid black;
	background: cornflowerblue;
	left: 0;
	right: 0;
	margin: auto;
}
.timer,.score{
	width: 100%;
	font-size: 14px;
	color: white;
	text-align: center;
}
.btn{
	width: 20%;
	height: 40px;
	background: lavender;
	margin: 50px 40% 0;
	
}
.wrap{
	width: 90%;
	margin: 50px auto 0;
	background: wheat;
	overflow: hidden;
	border-radius: 5px;
}
.wrap img{
	width: 100%;
	float: left;
	border-radius: 5px;
	margin-bottom: 2px;
}
1
2
3
4
5
6
<div class="w">
	<div class="timer">剩余时间：0 秒</div>
	<div class="score">分数：0</div>
	<button class="btn">开始</button>
	<div class="wrap"><img src="img/2.png"/></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//获取标签
var time = document.querySelector('.timer');
var score = document.querySelector('.score');
var btn = document.querySelector('button');
var wrap = document.querySelector('.wrap');
//记录关数
var index = 1;
//记录分数
var s =0 ;
//记录颜色
var colors = 0;
var colorArr = ["pink","blue","yellow","green","red","orange"];
//记录游戏状态
var start_bol = false;
//开始按钮
btn.onclick = function(){
	if(start_bol){return}
	//游戏开始后禁止再次执行以下代码
	index = 1;
	start_bol = true;
	//游戏记录为开始
	index++;
	timerFn();
	//启动倒计时
	create(index*index)
	//创建初始 img
}
/*
 * 创建img，关卡升级函数
 * len 是创建几行几列
 */
function create(len){
	wrap.innerHTML = '';
	//创建前清空，防止叠加
	for(var i=0; i < len; i ++){
		var img = document.createElement('img'); 
		//创建 img
		img.src = 'img/1.png';
		//设置地址
		//初始化 img
		img.style.width = (wrap.offsetWidth - (index+1)*5)/index + "px"; 
		img.style.marginLeft = '5px';
		img.style.background = colorArr[colors];
		//添加到wrap
		wrap.appendChild(img);
	}
	//记录下一颜色
	colors ++;
	colors >= colorArr.length? colors = 0: colors;
	//随机改变一张图片
	change(); 
}
/*
 * 随机改变一张图片 并设置点击事件
 */
function change(){
	//随机获取 一个img的位置值
	var rnd = Math.floor(Math.random()*wrap.children.length);
	//修改图片路径
	wrap.children[rnd].src = 'img/2.png';
	//设置点击事件
	wrap.children[rnd].onclick = function(){
		//游戏未开始不可执行以下代码
		if(!start_bol){return}
		//关数增加
		index ++;
		//分数增加
		s += 10;
		//写入页面
		score.innerHTML = "分数：" + s;
		//判断是否通关
		if (index >= 12) {
			alert("你赢了！");
			//游戏状态为结束
			start_bol = false;
			return;
		}
		//进入下一关卡
		create(index*index);
	}
}
/*
 * 倒计时函数
 */
function timerFn(){
	var n = 80;//游戏时间
	var timer = setInterval(function(){
		n -=0.02;
		if (n<= 0) {
			//时间到，清除计时器
			clearInterval(timer);
			//游戏结束
			start_bol = false;
			//时间为0
			n = 0;
		}
		//写入页面
		time.innerHTML = "剩余时间："+ n.toFixed(2) +"秒";
	},20);
}

锅打灰太狼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
body,html{
	width: 100%;
	height: 100%;
}
.wrap{
	width: 100%;
	height: 100%;
	background: url(img/game_bg.jpg);
	background-size: 100% 100%;
	max-width: 640px;
	margin: auto;
	position: relative;
}
/*.wrap img{
	width: 33.75%;
	height: 21.0416667%;
	position: absolute;
	left: 31%;
	top: 24%;
}*/
.wrap .apper{
	width: 33.75%;
	height: 21.0416667%;
	position: absolute;
	/*left: 33%;
	top: 40%;*/
	background-image: url(img/h.png);
	background-size: 1000% 100%;
	background-position-y: 0px;
	cursor: url(img/att1.png),auto;
	display: none;
}
.wrap .progress{
	width: 56.25%;
	height: 3.333333%;
	position: absolute;
	top: 13.75%;
	left: 19.6075%;
	background: url(img/progress.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 10px;
	overflow: hidden;
}
.score{
	width: 80%;
	height: 4.166666%;
	position: absolute;
	top: 2.708333%;
	left: 18%;
	line-height: 20px;
	font-size: 130%;
	font-weight: bolder;
	color: #a6bbe8;
	text-shadow: 1px 1px 2px black;
}
.start{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.75);
	position: relative;
	/*display: none;*/
}
.btn{
	width: 25%;
	height: 10%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 140%;
	border-radius: 5px;
	background: rgba(255,255,255,0.5);
	margin: auto;
}
.end{
	width: 70%;
	height: 70%;
	overflow: hidden;
	background: rgba(0,0,0,0.75);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	color: white;
	border-radius: 10px;
	font-size: 150%;
	display: none;
}
.end div{
	width: 50%;
	height: 10%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.end p{
	width: 50%;
	height: 10%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 80% auto 0;
}
.end .btn{
	width: 40%;
	height: 15%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 90% auto 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="wrap">
	<div class="score">0</div>
	<div class="progress"></div>
	<!--<img src="img/h0.png"/>-->
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="apper"></div>
	<div class="start">
		<button class="btn">开始游戏</button>
	</div>
	<div class="end">
		<div>
			游戏结束！<br />
			您的得分是：
		</div>
		<p id="p">0</p>
		<button class="btn">开始游戏</button>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
//显示动画人物的div
var apper = document.querySelectorAll('.wrap .apper');
//时间进度条div
var progress = document.querySelector('.progress');
//分数div
var s = document.querySelector('.score');
//开始游戏按钮
var btn = document.querySelectorAll('.btn');
//显示结果分数
var p = document.querySelector('#p');
//定位显示动画人物的div
var lArr =['31.25%','59.625%','33.125%','62.8125%','65.625%','38.125%','10.3125%','5.9375%','6.5625%'];
var tArr =['23.958333%','29.583333%','40%','44.166666%','61.666666%','57.083333%','61.25%','46.25%','33.333333%'];
for (var i=0; i < apper.length; i++) {
	apper[i].style.top = tArr[i];
	apper[i].style.left = lArr[i];
	apper[i].bol = false;
}
//记录游戏状态
var play_bol = false;
//记录分数
var score = 0;
var rndtimer  = null;
	
for (var i=0;i < btn.length;i++) {
	btn[i].onclick = function(){
	//开始游戏
		score = 0;
		for (var i=0; i < apper.length; i++) {
			apper[i].style.display = 'none';
			apper[i].bol = false;
		}
		progress.style.backgroundSize = ' 100% 100%';
		var parent = this.parentNode;
		parent.style.display = 'none';
		timeFn(20,function(){
			p.innerHTML = s.innerHTML;
			p.parentNode.style.display = 'block';
		});
		rndUp();
		//随机上来
	}
}
//启动打
for (var i=0;i<apper.length;i++) {
	apper[i].onclick = function(){
		if (this.bol) {
			return;
		}
		att(this);
		if (this.flag == 'h') {
			score +=10;
		}else{
			score -=10;
		}
		s.innerHTML = score;
	}
}
	
//打函数
function att(obj){
	var i =6;
	obj.bol = true;
	obj.movebol = true;
	clearTimeout(obj.timer2);
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i++;
		if (i>=9) {
			clearInterval(obj.timer); 
			obj.timer2 = setTimeout(function(){
				down(obj);
			},50)
			return;
		}
		obj.style.backgroundPositionX = -i*100 +'%';
	},80)
}
//向上出来
function up(obj){
	var i =0;
	obj.movebol = true;
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i++;
		if (i>=5) {
			clearInterval(obj.timer); 
			obj.timer2 = setTimeout(function(){
				down(obj);
			},300)
			return;
		}
		obj.style.backgroundPositionX = -i*100 +'%';
		obj.style.display = 'block';
	},50)
}
//向下回去
function down(obj, fn){
	var i =5;
	clearInterval(obj.timer); 
	obj.timer = setInterval(function(){
		i--;
		if (i<=0) {
			clearInterval(obj.timer);
			obj.style.display = 'none';
			obj.movebol = false;
			obj.bol = false;
			fn && fn(obj);
		}
		obj.style.backgroundPositionX = -i*100 +'%';
	},50)
}
//计时
function timeFn(timeNum,fn){
	play_bol = true;
	var len = progress.offsetWidth;
	var speed = timeNum;
	var timers = setInterval(function(){
		speed -=0.05;
		if (speed <= 0) {
			rndtimer && clearInterval(rndtimer);
			speed = 0;
			clearInterval(timers);
			for (var i = 0; i < apper.length; i++) {
				clearInterval(apper[i].timer);
			}
			play_bol = false;
			fn && fn();
		}
		progress.style.backgroundSize = (speed/timeNum*100) + "% 100%";
	},50)
}
	
//随机出来
function rndUp(argument){
	rndtimer = setInterval(function(){
		var rnd = Math.floor(Math.random()*apper.length);
		
		if (!apper[rnd].movebol) {
			var str =(Math.random()-0.5>0)?"h":"x";
			apper[rnd].flag = str;
			apper[rnd].style.backgroundImage = "url(img/"+ str + ".png)";
			up(apper[rnd]);
		}
	},500)
}