Skip to content

Commit 3d998c0

Browse files
no-naameno-naame
authored
Add files via upload
0 parents  commit 3d998c0

File tree

3 files changed

+366
-0
lines changed

3 files changed

+366
-0
lines changed

‎index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="style.css">
6+
<link href="https://fonts.cdnfonts.com/css/termina-test" rel="stylesheet">
7+
8+
<title>2048 Game Online</title>
9+
<style>
10+
@import url('https://fonts.cdnfonts.com/css/termina-test');
11+
</style>
12+
13+
</head>
14+
<body>
15+
<div class="container">
16+
<div class="info">
17+
<h1>2048</h1>
18+
<div class="score-container">
19+
<div class="score-title">score</div>
20+
<span id="score">0</span>
21+
</div>
22+
<button id="restart-button">Restart Game</button>
23+
</div>
24+
<span id="result">Join the numbers and get to the <b>2048</b> tile!</span>
25+
<div class="grid"></div>
26+
</div>
27+
<script src="index.js"></script>
28+
</body>
29+
</html>

‎index.js

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
function createBoard() {
2+
const gridContainer = document.querySelector(".grid");
3+
for (let i = 0; i < 16; i++){
4+
let tile = document.createElement('div');
5+
tile.setAttribute('id', `id_${i}`);
6+
tile.textContent = 0;
7+
gridContainer.appendChild(tile);
8+
}
9+
}
10+
createBoard();
11+
function generate(){
12+
let numArray = [2,2,2,2,2,2,2,2,2,4];
13+
let num = numArray[Math.floor(Math.random()*numArray.length)]
14+
let allBlocks = document.querySelectorAll('.grid>div');
15+
let filteredBlocks = [...allBlocks].filter((a) => a.textContent == 0);
16+
if (filteredBlocks == 0){
17+
return;
18+
}
19+
let finalBlock = filteredBlocks[Math.floor(Math.random()*filteredBlocks.length)]
20+
finalBlock.textContent = num;
21+
}
22+
generate()
23+
function shiftArrayLeft(values){
24+
let finalArray = values .filter((a) => a != 0)
25+
let index = finalArray.length;
26+
while (index < 4){
27+
finalArray.push(0);
28+
index++;
29+
}
30+
return finalArray
31+
}
32+
function shiftArrayRight(values){
33+
let finalArray = values .filter((a) => a != 0)
34+
let index = finalArray.length;
35+
while (index < 4){
36+
finalArray.unshift(0);
37+
index++;
38+
}
39+
return finalArray
40+
}
41+
function shiftRow(rowNumber, direction){
42+
let rowValues = [];
43+
for (let i = 4*(rowNumber-1); i < 4*rowNumber; i++){
44+
rowValues.push(document.querySelector(`#id_${i}`).textContent)
45+
}
46+
if (direction == "L"){
47+
rowValues = shiftArrayLeft(rowValues)
48+
rowValues = combineArrayLeft(rowValues)
49+
rowValues = shiftArrayLeft(rowValues)
50+
}
51+
else if (direction == "R"){
52+
rowValues = shiftArrayRight(rowValues)
53+
rowValues = combineArrayRight(rowValues)
54+
rowValues = shiftArrayRight(rowValues)
55+
}
56+
for (let i = 4*(rowNumber-1); i < 4*rowNumber; i++){
57+
document.querySelector(`#id_${i}`).textContent = rowValues[i%4];
58+
}
59+
}
60+
function shiftLeft(){
61+
shiftRow(1, "L");
62+
shiftRow(2, "L");
63+
shiftRow(3, "L");
64+
shiftRow(4, "L");
65+
66+
}
67+
function shiftRight(){
68+
shiftRow(1, "R");
69+
shiftRow(2, "R");
70+
shiftRow(3, "R");
71+
shiftRow(4, "R");
72+
73+
}
74+
75+
function shiftColumn(columnNumber, direction){
76+
let columnValues = [];
77+
for (let i = (columnNumber-1); i < 16; i+=4){
78+
columnValues.push(document.querySelector(`#id_${i}`).textContent)
79+
}
80+
if (direction == "U"){
81+
columnValues = shiftArrayLeft(columnValues)
82+
columnValues = combineArrayLeft(columnValues)
83+
columnValues = shiftArrayLeft(columnValues)
84+
}
85+
else if (direction == "D"){
86+
columnValues = shiftArrayRight(columnValues)
87+
columnValues = combineArrayRight(columnValues)
88+
columnValues = shiftArrayRight(columnValues)
89+
}
90+
let counter =0;
91+
for (let i =(columnNumber-1); i < 16; i+=4){
92+
document.querySelector(`#id_${i}`).textContent = columnValues[counter];
93+
counter++;
94+
}
95+
}
96+
97+
function shiftUp(){
98+
shiftColumn(1, "U");
99+
shiftColumn(2, "U");
100+
shiftColumn(3, "U");
101+
shiftColumn(4, "U");
102+
103+
}
104+
function shiftDown(){
105+
shiftColumn(1, "D");
106+
shiftColumn(2, "D");
107+
shiftColumn(3, "D");
108+
shiftColumn(4, "D");
109+
}
110+
111+
function combineArrayLeft(values){
112+
113+
let i = 1;
114+
115+
while (i<4){
116+
if (values[i-1]==values[i]){
117+
values[i-1]*=2
118+
values[i]=0
119+
}
120+
i++
121+
}
122+
return values
123+
}
124+
function combineArrayRight(values){
125+
126+
let i = 3;
127+
128+
while (i>0){
129+
if (values[i]==values[i-1]){
130+
values[i]*=2
131+
values[i-1]=0
132+
}
133+
i--
134+
}
135+
return values
136+
}
137+
function keyUpHandler(e){
138+
switch(e.keyCode){
139+
case 37:
140+
shiftLeft();
141+
break;
142+
case 38:
143+
shiftUp();
144+
break;
145+
case 39:
146+
shiftRight();
147+
break;
148+
case 40:
149+
shiftDown();
150+
break;
151+
}
152+
generate();
153+
}
154+
document.body.addEventListener("keyup",keyUpHandler)

‎style.css

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/*@import url('https://fonts.cdnfonts.com/css/termina-test');*/
2+
body {
3+
background-color: rgb(9, 105, 108);
4+
display: flex;
5+
justify-content: center;
6+
font-family: 'Termina Test', sans-serif;
7+
}
8+
9+
h1 {
10+
font-size: 80px;
11+
line-height: 0.7;
12+
color: #1f1d1b;
13+
margin: 0px;
14+
}
15+
16+
.container {
17+
width: 468px;
18+
margin-top: 10px;
19+
}
20+
21+
.info {
22+
display: flex;
23+
justify-content: space-between;
24+
margin-bottom: 20px;
25+
}
26+
27+
.grid{
28+
display: flex;
29+
flex-wrap: wrap;
30+
width: 456px;
31+
height: 456px;
32+
background-color: rgb(9, 105, 108);
33+
border: 7px solid #000000;
34+
border-radius: 6px;
35+
margin-top: 20px;
36+
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
37+
}
38+
39+
.grid div {
40+
width: 100px;
41+
height: 100px;
42+
margin: 7px;
43+
border-radius: 3px;
44+
background-color: rgb(24, 23, 23);
45+
color: rgb(9, 105, 108);
46+
font-weight: bold;
47+
text-align: center;
48+
font-size: 60px;
49+
line-height: 1.6;
50+
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
51+
}
52+
53+
.score-container, button{
54+
text-align: center;
55+
height: 60px;
56+
border-radius: 3px;
57+
background-color: #000000;
58+
color: rgb(9, 105, 108);
59+
}
60+
.score-container {
61+
width: 70px
62+
}
63+
64+
#score {
65+
font-size: 30px;
66+
}
67+
68+
.score-title, #restart-button {
69+
font-size: 16px;
70+
}
71+
72+
button{
73+
border: none;
74+
}
75+
76+
button {
77+
all: unset;
78+
width: 100px;
79+
height: 30px;
80+
font-size: 16px;
81+
background: transparent;
82+
border: none;
83+
position: relative;
84+
color: rgb(9, 105, 108);
85+
cursor: pointer;
86+
z-index: 1;
87+
padding: 10px 20px;
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
white-space: nowrap;
92+
user-select: none;
93+
-webkit-user-select: none;
94+
touch-action: manipulation;
95+
}
96+
97+
button::after,
98+
button::before {
99+
content: '';
100+
position: absolute;
101+
bottom: 0;
102+
right: 0;
103+
z-index: -99999;
104+
transition: all .4s;
105+
}
106+
107+
button::before {
108+
transform: translate(0%, 0%);
109+
width: 100%;
110+
height: 100%;
111+
background: #000000;
112+
border-radius: 10px;
113+
content: '';
114+
position: absolute;
115+
top: 0;
116+
left: 0;
117+
transition: .5s;
118+
z-index: -1;
119+
}
120+
121+
button::after {
122+
transform: translate(10px, 10px);
123+
width: 35px;
124+
height: 35px;
125+
background: #ffffff15;
126+
backdrop-filter: blur(5px);
127+
-webkit-backdrop-filter: blur(5px);
128+
border-radius: 50px;
129+
}
130+
131+
button:hover::before {
132+
transform: translate(5%, 20%);
133+
width: 110%;
134+
height: 110%;
135+
box-shadow: 0 0 15px #ffee10;
136+
}
137+
138+
button:hover::after {
139+
border-radius: 10px;
140+
transform: translate(0, 0);
141+
width: 100%;
142+
height: 100%;
143+
}
144+
145+
button:active::after {
146+
transition: 0s;
147+
transform: translate(0, 5%);
148+
}
149+
150+
.score-container{
151+
position: relative;
152+
display: block;
153+
width: 60px;
154+
height: 60px;
155+
background: rgb(0, 0, 0);
156+
font-size: 30px;
157+
color: rgb(9, 105, 108);
158+
transition: .5s;
159+
}
160+
161+
.score-container::before {
162+
content: '';
163+
position: absolute;
164+
top: 0;
165+
left: 0;
166+
width: 100%;
167+
height: 100%;
168+
border-radius: 50%;
169+
background: #ffee10;
170+
transition: .5s;
171+
transform: scale(.9);
172+
z-index: -1;
173+
}
174+
175+
.score-container:hover::before {
176+
transform: scale(1.1);
177+
box-shadow: 0 0 15px #ffee10;
178+
}
179+
180+
.score-container:hover,h1:hover,#result:hover,button:hover,.grid div:hover {
181+
color: #ffee10;
182+
text-shadow: 0 0 5px #ffee10;
183+
}

0 commit comments

Comments
 (0)