Skip to content

Commit 31d4e71

Browse files
author
Lucas CHARVOLIN
committed
add tetris
1 parent 16b9322 commit 31d4e71

File tree

9 files changed

+1505
-2
lines changed

9 files changed

+1505
-2
lines changed

‎2048/2048.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>2048_lcharvol</title>
5+
<link href="css/main.css" type="text/css" rel="stylesheet" />
6+
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
7+
</head>
8+
<body>
9+
<div id="entete">
10+
<div id="score"></div>
11+
<div onclick="restart_game()" id="btn_restart">
12+
<p>Restart</p>
13+
</div>
14+
</div>
15+
<div id="fond"></div>
16+
<div id="lose_box">
17+
<div id="lose_screen" >
18+
<p>Game over !</p>
19+
<div onclick="restart_game()" id="btn_tryagain">
20+
<p>Try Again</p>
21+
</div>
22+
</div>
23+
</div>
24+
</body>
25+
<script type="text/javascript" src="js/main.js"></script>
26+
<script type="text/javascript" src="js/move.js"></script>
27+
</html>

‎2048/css/main.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
body
2+
{
3+
background-color:rgb(243,243,243);
4+
font-family: 'Oswald', sans-serif;
5+
margin:0;
6+
-webkit-user-select: none; // For Webkit
7+
-khtml-user-select: none;
8+
-moz-user-select: none; // For Mozilla
9+
}
10+
#fond
11+
{
12+
position:relative;
13+
width:475px;
14+
height:475px;
15+
margin:auto;
16+
background-color:rgb(187,173,160);
17+
padding:10px;
18+
margin-top:70px;
19+
border-radius: 4px;
20+
-moz-box-shadow: 1px 1px 10px 0px #c0c0c0;
21+
-webkit-box-shadow: 1px 1px 10px 0px #c0c0c0;
22+
-o-box-shadow: 1px 1px 10px 0px #c0c0c0;
23+
box-shadow: 1px 1px 10px 0px #c0c0c0;
24+
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=10);
25+
}
26+
27+
#lose_box
28+
{
29+
position:absolute;
30+
width:100%;
31+
height:495px;
32+
margin-top:270px;
33+
border-radius: 4px;
34+
top:0;
35+
left:0;
36+
visibility: hidden;
37+
}
38+
39+
#lose_screen
40+
{
41+
position: relative;
42+
width:495px;
43+
height:495px;
44+
background-color: rgba(255,255,255,0.3);
45+
margin:auto;
46+
border-radius: 4px;
47+
text-align: center;
48+
}
49+
#lose_screen p
50+
{
51+
color:rgb(118,110,101);
52+
margin:auto;
53+
font-size:5em;
54+
padding-top:150px;
55+
}
56+
57+
#entete
58+
{
59+
position: relative;
60+
height:200px;
61+
background-color: white;
62+
width:100%;
63+
}
64+
65+
#btn_restart
66+
{
67+
position:relative;
68+
width:120px;
69+
height:50px;
70+
background-color:white;
71+
margin:auto;
72+
top:100px;
73+
text-align: center;
74+
border-radius: 4px;
75+
-moz-box-shadow: 1px 1px 10px 0px #c0c0c0;
76+
-webkit-box-shadow: 1px 1px 10px 0px #c0c0c0;
77+
-o-box-shadow: 1px 1px 10px 0px #c0c0c0;
78+
box-shadow: 1px 1px 10px 0px #c0c0c0;
79+
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=10);
80+
}
81+
82+
#btn_restart:hover
83+
{
84+
cursor: pointer;
85+
}
86+
87+
#btn_restart p
88+
{
89+
color:rgb(187,173,160);
90+
font-size: 1.7em;
91+
padding-top:4px;
92+
}
93+
94+
#btn_tryagain
95+
{
96+
position:relative;
97+
width:120px;
98+
height:50px;
99+
background-color:white;
100+
margin:auto;
101+
top:50px;
102+
text-align: center;
103+
border-radius: 4px;
104+
-moz-box-shadow: 1px 1px 10px 0px #c0c0c0;
105+
-webkit-box-shadow: 1px 1px 10px 0px #c0c0c0;
106+
-o-box-shadow: 1px 1px 10px 0px #c0c0c0;
107+
box-shadow: 1px 1px 10px 0px #c0c0c0;
108+
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=10);
109+
}
110+
111+
#btn_tryagain:hover
112+
{
113+
cursor: pointer;
114+
}
115+
116+
#btn_tryagain p
117+
{
118+
color:rgb(187,173,160);
119+
font-size: 1.7em;
120+
padding-top:4px;
121+
}
122+
123+
#score
124+
{
125+
position:relative;
126+
width:200px;
127+
height:50px;
128+
margin:auto;
129+
top:55px;
130+
text-align: center;
131+
background-color:white;
132+
border-radius: 4px;
133+
-moz-box-shadow: 1px 1px 10px 0px #c0c0c0;
134+
-webkit-box-shadow: 1px 1px 10px 0px #c0c0c0;
135+
-o-box-shadow: 1px 1px 10px 0px #c0c0c0;
136+
box-shadow: 1px 1px 10px 0px #c0c0c0;
137+
filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=10);
138+
}
139+
140+
#score h1
141+
{
142+
color:rgb(245,149,99);
143+
margin:0;
144+
}
145+
146+
.carre
147+
{
148+
position:absolute;
149+
width:115px;
150+
height:115px;
151+
opacity: 0%;
152+
background-color:rgb(238,228,218);
153+
border-radius: 4px;
154+
transition:left 0.3s ease-in-out,top 0.3s ease-in-out;
155+
}
156+
157+
.carre_fond
158+
{
159+
position:relative;
160+
display:inline-block;
161+
width:115px;
162+
height:115px;
163+
margin-right:1.5px;
164+
margin-left:1.5px;
165+
background-color:rgb(205,193,180);
166+
border-radius: 4px;
167+
}
168+
169+
.carre h1
170+
{
171+
position: absolute;
172+
right:0;
173+
left:0;
174+
text-align: center;
175+
color:white;
176+
font-size: 3em;
177+
margin:0;
178+
margin-top:17px;
179+
}
180+
181+
.colored
182+
{
183+
background-color:rgb(228, 76, 60);
184+
}

0 commit comments

Comments
 (0)