Skip to content

Commit ab0c724

Browse files
yequanruiyequanrui
committed
update
1 parent f4b920c commit ab0c724

File tree

3 files changed

+815
-775
lines changed

3 files changed

+815
-775
lines changed

‎2048/css/style.css‎

Lines changed: 125 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,159 @@
11
@charset "UTF-8";
22
* {
3-
padding: 0;
4-
margin: 0;
5-
}
6-
html {
7-
font-size: 22px;
3+
margin: 0;
4+
padding: 0;
85
}
96
.my2048 {
10-
width: 100%;
11-
height: 100%;
12-
position: absolute;
13-
top: 0;
14-
left: 0;
15-
z-index: 10;
7+
width: 100%;
8+
height: 100%;
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
z-index: 10;
13+
}
14+
.button {
15+
display: block;
16+
margin: 8px auto;
17+
width: 100px;
18+
padding: 8px;
19+
background-color: #5e7ce0;
20+
font-family: Arial;
21+
font-size: 18px;
22+
color: #fff;
23+
border-radius: 8px;
24+
text-decoration: none;
25+
}
26+
.button:hover {
27+
background-color: #7693f5;
28+
}
29+
.button:active {
30+
background-color: #526ecc;
1631
}
1732
header {
18-
display: block;
19-
margin: 0 auto;
20-
width: 100%;
21-
text-align: center;
22-
}
23-
header h1 {
24-
font-family: Arial;
25-
font-size: 40px;
26-
font-weight: bold;
27-
margin: 0 auto;
28-
}
29-
header #newgamebutton {
30-
display: block;
31-
margin: 13px auto;
32-
width: 100px;
33-
padding: 10px 10px;
34-
background-color: #8f7a66;
35-
font-family: Arial;
36-
font-size: 18px;
37-
color: white;
38-
border-radius: 10px;
39-
text-decoration: none;
40-
}
41-
header #newgamebutton:hover {
42-
background-color: #9f8b77;
33+
width: 100%;
34+
margin: 0 auto;
35+
text-align: center;
36+
display: block;
4337
}
4438
header p {
45-
font-family: Arial;
46-
font-size: 25px;
47-
margin: 13px auto;
39+
margin: 12px auto;
40+
font-family: Arial, Microsoft YaHei;
41+
font-size: 24px;
4842
}
4943
#grid-container {
50-
width: 500px;
51-
height: 500px;
52-
margin: 10px auto;
53-
background-color: #bbada0;
54-
border-radius: 10px;
55-
position: relative;
44+
background-color: #bbada0;
45+
width: 500px;
46+
height: 500px;
47+
margin: 8px auto;
48+
border-radius: 8px;
49+
position: relative;
5650
}
5751
.grid-cell {
58-
width: 100px;
59-
height: 100px;
60-
border-radius: 6px;
61-
background-color: #ccc0b3;
62-
position: absolute;
63-
z-index: 9;
52+
background-color: #ccc0b3;
53+
width: 100px;
54+
height: 100px;
55+
border-radius: 4px;
56+
position: absolute;
57+
z-index: 9;
6458
}
6559
.number-cell {
66-
border-radius: 6px;
67-
font-family: Arial;
68-
font-weight: bold;
69-
font-size: 40px;
70-
line-height: 100px;
71-
text-align: center;
72-
position: absolute;
73-
z-index: 10;
60+
border-radius: 4px;
61+
font-family: Arial, Microsoft YaHei;
62+
font-weight: bold;
63+
font-size: 40px;
64+
line-height: 100px;
65+
text-align: center;
66+
position: absolute;
67+
z-index: 10;
7468
}
7569
footer {
76-
text-align: center;
77-
font-family: '微软雅黑';
78-
font-size: 16px;
79-
padding: 10px;
80-
margin: 10px auto
70+
margin: 8px auto;
71+
padding: 8px;
72+
text-align: center;
73+
font-family: Arial, Microsoft YaHei;
74+
font-size: 16px;
8175
}
8276
#my2048Alert {
83-
width: 100%;
84-
height: 100%;
85-
position: absolute;
86-
top: 0;
87-
left: 0;
88-
z-index: 0;
89-
opacity: 0;
90-
font-family: "微软雅黑";
91-
-webkit-transition: all 0.5s;
92-
-o-transition: all 0.5s;
93-
transition: all 0.5s;
94-
}
95-
#my2048Alert .mack {
96-
width: 100%;
97-
height: 100%;
98-
position: absolute;
99-
top: 0;
100-
left: 0;
101-
background: rgba(0, 0, 0, .4);
77+
width: 100%;
78+
height: 100%;
79+
font-family: Arial, Microsoft YaHei;
80+
position: absolute;
81+
top: 0;
82+
left: 0;
83+
z-index: 0;
84+
opacity: 0;
85+
transition: cubic-bezier(0, 0, 1, 1) 300ms;
86+
}
87+
#my2048Alert .mask {
88+
background-color: rgba(94, 124, 224, 0.3);
89+
width: 100%;
90+
height: 100%;
91+
position: absolute;
92+
top: 0;
93+
left: 0;
10294
}
10395
#my2048Alert .myAt {
104-
width: 13rem;
105-
height: 11rem;
106-
position: absolute;
107-
top: 50%;
108-
left: 50%;
109-
margin-top: -5.5rem;
110-
margin-left: -6.5rem;
111-
border-radius: 5px;
112-
background: #fff;
113-
-webkit-transition: all 0.5s;
114-
-o-transition: all 0.5s;
115-
transition: all 0.5s;
96+
background: #fff;
97+
width: 13rem;
98+
height: 11rem;
99+
margin-top: -5.5rem;
100+
margin-left: -6.5rem;
101+
border-radius: 4px;
102+
position: absolute;
103+
top: 50%;
104+
left: 50%;
105+
transition: cubic-bezier(0, 0, 1, 1) 300ms;
116106
}
117107
#my2048Alert .myAt .myAt-pic {
118-
width: 7rem;
119-
height: 7rem;
120-
background: url(../img/head.jpg) no-repeat;
121-
-webkit-background-size: cover;
122-
background-size: cover;
123-
background-position: -15px;
124-
border-radius: 50%;
125-
position: absolute;
126-
top: -22%;
127-
left: 50%;
128-
margin-left: -3.5rem;
129-
border: 3px solid #f87758;
108+
background: url(../img/head.jpg) no-repeat;
109+
background-size: cover;
110+
background-position: -15px;
111+
width: 7rem;
112+
height: 7rem;
113+
border-radius: 50%;
114+
margin-left: -3.5rem;
115+
border: 3px solid #5e7ce0;
116+
position: absolute;
117+
top: -22%;
118+
left: 50%;
130119
}
131120
#my2048Alert .myAt .myAt-text {
132-
width: 100%;
133-
font-size: 0.8rem;
134-
line-height: 1.4rem;
135-
text-align: center;
136-
position: absolute;
137-
left: 0;
138-
top: 45%;
139-
}
140-
#my2048Alert .myAt .myAt-text .myAt-text-title, #my2048Alert .myAt .myAt-text .myAt-text-subtitle {
141-
color: #999;
142-
}
143-
#my2048Alert .myAt .myAt-text .myAt-text-title span, #my2048Alert .myAt .myAt-text .myAt-text-subtitle span {
144-
color: #f86442;
121+
width: 100%;
122+
font-size: 0.8rem;
123+
line-height: 1.4rem;
124+
text-align: center;
125+
position: absolute;
126+
left: 0;
127+
top: 45%;
128+
}
129+
#my2048Alert .myAt .myAt-text .myAt-text-title,
130+
#my2048Alert .myAt .myAt-text .myAt-text-subtitle {
131+
color: #575d6c;
132+
}
133+
#my2048Alert .myAt .myAt-text .myAt-text-title span,
134+
#my2048Alert .myAt .myAt-text .myAt-text-subtitle span {
135+
color: #5e7ce0;
145136
}
146137
#my2048Alert .myAt .myAt-text .myAt-text-close {
147-
text-decoration: none;
148-
display: block;
149-
width: 7rem;
150-
height: 2rem;
151-
line-height: 2rem;
152-
color: #fff;
153-
background-color: #f76341;
154-
border-radius: 5px;
155-
margin: .3rem auto;
138+
width: 80px;
156139
}
157140
#my2048Alert.hide {
158-
opacity: 0;
159-
z-index: 0;
141+
opacity: 0;
142+
z-index: 0;
160143
}
161144
#my2048Alert.show {
162-
opacity: 1;
163-
z-index: 9999;
145+
opacity: 1;
146+
z-index: 9999;
164147
}
165148
#my2048Alert.hide .myAt {
166-
-webkit-transform: scale(.9, .9);
167-
-ms-transform: scale(.9, .9);
168-
-o-transform: scale(.9, .9);
169-
transform: scale(.9, .9);
149+
-webkit-transform: scale(0.9, 0.9);
150+
-ms-transform: scale(0.9, 0.9);
151+
-o-transform: scale(0.9, 0.9);
152+
transform: scale(0.9, 0.9);
170153
}
171154
#my2048Alert.show .myAt {
172-
-webkit-transform: scale(1, 1);
173-
-ms-transform: scale(1, 1);
174-
-o-transform: scale(1, 1);
175-
transform: scale(1, 1);
176-
}
155+
-webkit-transform: scale(1, 1);
156+
-ms-transform: scale(1, 1);
157+
-o-transform: scale(1, 1);
158+
transform: scale(1, 1);
159+
}

‎2048/index.html‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6-
<title>Document</title>
7-
<link rel="stylesheet" href="css/style.css" />
8-
<script type="text/javascript" src="../js/jquery-2.1.4.min.js" ></script>
9-
<script type="text/javascript" src="js/my2048.js" ></script>
10-
</head>
11-
<body>
12-
<div class="my2048">
13-
<header>
14-
<h1>my2048</h1>
15-
<a href="javascript:newgame();" id="newgamebutton">重新开始</a>
16-
<p>分数：<span id="score">0</span></p>
17-
</header>
18-
<div id="grid-container"> </div>
19-
<footer>游戏说明：PC端键盘方向键控制↑→↓←<br>手机端左右上下滑屏控制！！</footer>
20-
</div>
21-
<script>
22-
var my2048 = new my2048($("#grid-container"));
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport"
7+
content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8+
<link rel="stylesheet" href="css/style.css" />
9+
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
10+
<script type="text/javascript" src="js/my2048.js"></script>
11+
</head>
12+
13+
<body>
14+
<div class="my2048">
15+
<header>
16+
<a href="javascript:newgame();" id="newgamebtn" class="button">重新开始</a>
17+
<p>分数：<span id="score">0</span></p>
18+
</header>
19+
<div id="grid-container"></div>
20+
<footer>游戏说明：PC端键盘方向键控制↑→↓←<br>手机端左右上下滑屏控制！！</footer>
21+
</div>
22+
<script>
23+
var my2048 = new my2048($("#grid-container"));
24+
my2048.init();
25+
function newgame() {
2326
my2048.init();
27+
}
28+
</script>
29+
</body>
2430

25-
function newgame() {
26-
my2048.init();
27-
}
28-
</script>
29-
</body>
3031
</html>

0 commit comments

Comments
 (0)