Skip to content

Commit 9886509

Browse files
ayushseth07ayushseth07
committed
2 parents 091ddbf + d40cf32 commit 9886509

32 files changed

+1441
-7
lines changed

‎2048 Game/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# 2048 Game
2+
3+
An easy 2048 Game on website where you can have fun!!
4+
5+
# Instructions of the game
6+
7+
1. Follow the steps on root repository to clone this whole project.
8+
2. Click on the folder 2048 Game.
9+
3. Click on the index.html inside the folder.
10+
4. Use arrow keys to play.
11+
5. Have fun!
12+
13+
# Stack used
14+
- HTML
15+
- Javascript
16+
- CSS
17+
18+
# Credits
19+
I coded this game by following the tutorial from [Code with Ania Kubów](https://www.youtube.com/watch?v=aDn2g8XfSMc). Check it out!
20+
21+
# Screenshot
22+
23+
![screenshot](https://github.com/Gyynnn/Web-dev-mini-projects/blob/2048game/2048%20Game/screenshot.PNG)

‎2048 Game/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="style.css">
4+
<script src ="script.js"></script>
5+
<title>2048 Game</title>
6+
</head>
7+
<body>
8+
<div class = "header">2048 Game</div>
9+
10+
<div class = "instructions">Instructions: Use arrow key to play. Refresh the page to restart.</div>
11+
12+
<div class = "scoreContainer">
13+
<div class="scoreTitle">score</div>
14+
<span id="score">0</span>
15+
</div>
16+
17+
<div class ="grid"></div>
18+
</body>
19+
</html>

‎2048 Game/screenshot.PNG

36.4 KB
Loading

‎2048 Game/script.js

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const gridDisplay = document.querySelector('.grid')
3+
const scoreDisplay = document.getElementById('score')
4+
5+
let squares = []
6+
let score = 0
7+
8+
function createBoard() {
9+
for (let i=0; i< 16; i++){
10+
square = document.createElement('div')
11+
square.innerHTML = 0
12+
gridDisplay.appendChild(square)
13+
squares.push(square)
14+
}
15+
generateTwo()
16+
generateTwo()
17+
}
18+
createBoard()
19+
20+
function generateTwo(){
21+
let random = Math.floor(Math.random() * squares.length)
22+
if (squares[random].innerHTML == 0){
23+
squares[random].innerHTML = 2
24+
checkLose()
25+
}
26+
else generateTwo()
27+
}
28+
29+
//swipe right
30+
function moveRight(){
31+
for (let i = 0; i<16; i++){
32+
if(i%4 == 0 ){
33+
let totalOne = parseInt(squares[i].innerHTML)
34+
let totalTwo = parseInt(squares[i+1].innerHTML)
35+
let totalThree = parseInt(squares[i+2].innerHTML)
36+
let totalFour = parseInt(squares[i+3].innerHTML)
37+
let row = [totalOne,totalTwo,totalThree,totalFour]
38+
39+
//console.log(row)
40+
41+
let filteredRow = row.filter(x => x != 0)
42+
//console.log(filteredRow)
43+
let missing = 4 - filteredRow.length
44+
let zeros = Array(missing).fill(0)
45+
//console.log(zeros)
46+
let newRow = zeros.concat(filteredRow)
47+
//console.log(newRow)
48+
49+
//insert new row into the squares
50+
squares[i].innerHTML = newRow[0]
51+
squares[i+1].innerHTML = newRow[1]
52+
squares[i+2].innerHTML = newRow[2]
53+
squares[i+3].innerHTML = newRow[3]
54+
}
55+
}
56+
}
57+
58+
//swipe left
59+
function moveLeft(){
60+
for (let i = 0; i<16; i++){
61+
if(i%4 == 0 ){ //first column
62+
let totalOne = parseInt(squares[i].innerHTML)
63+
let totalTwo = parseInt(squares[i+1].innerHTML)
64+
let totalThree = parseInt(squares[i+2].innerHTML)
65+
let totalFour = parseInt(squares[i+3].innerHTML)
66+
let row = [totalOne,totalTwo,totalThree,totalFour]
67+
68+
69+
let filteredRow = row.filter(x => x != 0)
70+
let missing = 4 - filteredRow.length
71+
let zeros = Array(missing).fill(0)
72+
let newRow = filteredRow.concat(zeros)
73+
74+
75+
//insert new row into the squares
76+
squares[i].innerHTML = newRow[0]
77+
squares[i+1].innerHTML = newRow[1]
78+
squares[i+2].innerHTML = newRow[2]
79+
squares[i+3].innerHTML = newRow[3]
80+
}
81+
}
82+
}
83+
84+
function sumRow(){
85+
for (let i=0; i <15; i++){ //end before index 15 because is has no "right neighbour"
86+
if(squares[i].innerHTML == squares[i+1].innerHTML){
87+
let combineNum = parseInt(squares[i].innerHTML) + parseInt(squares[i+1].innerHTML)
88+
squares[i].innerHTML = combineNum
89+
squares[i+1].innerHTML = 0
90+
score += combineNum
91+
scoreDisplay.innerHTML = score
92+
}
93+
}
94+
}
95+
96+
checkWin()
97+
98+
function moveDown(){
99+
//get column
100+
for(let i=0; i<4; i++){
101+
let totalOne = parseInt(squares[i].innerHTML)
102+
let totalTwo = parseInt(squares[i+4].innerHTML)
103+
let totalThree = parseInt(squares[i+4*2].innerHTML)
104+
let totalFour = parseInt(squares[i+4*3].innerHTML)
105+
let column = [totalOne,totalTwo,totalThree,totalFour]
106+
107+
let filteredColumn = column.filter(x => x!=0 )
108+
let missing = 4 - filteredColumn.length
109+
let zeros = Array(missing).fill(0)
110+
let newColumn = zeros.concat(filteredColumn)
111+
112+
squares[i].innerHTML = newColumn[0]
113+
squares[i+4].innerHTML = newColumn[1]
114+
squares[i+4*2].innerHTML = newColumn[2]
115+
squares[i+4*3].innerHTML = newColumn[3]
116+
}
117+
}
118+
119+
function moveUp(){
120+
//get column
121+
for(let i=0; i<4; i++){
122+
let totalOne = parseInt(squares[i].innerHTML)
123+
let totalTwo = parseInt(squares[i+4].innerHTML)
124+
let totalThree = parseInt(squares[i+4*2].innerHTML)
125+
let totalFour = parseInt(squares[i+4*3].innerHTML)
126+
let column = [totalOne,totalTwo,totalThree,totalFour]
127+
128+
let filteredColumn = column.filter(x => x!=0 )
129+
let missing = 4 - filteredColumn.length
130+
let zeros = Array(missing).fill(0)
131+
let newColumn = filteredColumn.concat(zeros)
132+
133+
squares[i].innerHTML = newColumn[0]
134+
squares[i+4].innerHTML = newColumn[1]
135+
squares[i+4*2].innerHTML = newColumn[2]
136+
squares[i+4*3].innerHTML = newColumn[3]
137+
}
138+
}
139+
140+
function sumColumn(){
141+
for (let i=0; i <12; i++){ //end before index 12 because is has no "below neighbour"
142+
if(squares[i].innerHTML == squares[i+4].innerHTML){
143+
let combineNum = parseInt(squares[i].innerHTML) + parseInt(squares[i+4].innerHTML)
144+
squares[i].innerHTML = combineNum
145+
squares[i+4].innerHTML = 0
146+
score += combineNum
147+
scoreDisplay.innerHTML = score
148+
}
149+
}
150+
151+
checkWin()
152+
}
153+
154+
//Assign keys
155+
function control(event){
156+
if(event.keyCode === 39){
157+
keyRight()
158+
}else if (event.keyCode === 37){
159+
keyLeft()
160+
}else if (event.keyCode === 38){
161+
keyUp()
162+
}else if (event.keyCode === 40){
163+
keyDown()
164+
}
165+
166+
}
167+
document.addEventListener('keyup',control)
168+
169+
function keyRight(){
170+
moveRight() //move all to right
171+
sumRow() //combine neighbour if same number
172+
moveRight() //move all to right again
173+
generateTwo() //generate new numbers
174+
}
175+
176+
function keyLeft(){
177+
moveLeft()
178+
sumRow()
179+
moveLeft()
180+
generateTwo()
181+
}
182+
183+
function keyDown(){
184+
moveDown()
185+
sumColumn()
186+
moveDown()
187+
generateTwo()
188+
}
189+
190+
function keyUp(){
191+
moveUp()
192+
sumColumn()
193+
moveUp()
194+
generateTwo()
195+
}
196+
197+
function checkWin(){
198+
for(let i=0; i < 16; i++){
199+
if (squares[i].innerHTML == 2048){
200+
alert('Congratulations!! Refresh the page to play again.')
201+
document.removeEventListener('keyup', control)
202+
}
203+
}
204+
}
205+
206+
function checkLose(){
207+
let numZeros = 0
208+
for(let i = 0; i<16; i++){
209+
if(squares[i].innerHTML==0){
210+
numZeros++
211+
}
212+
}
213+
if(numZeros===0){
214+
alert('Game Over!! Refresh the page to play again.')
215+
document.removeEventListener('keyup', control)
216+
}
217+
}
218+
})

‎2048 Game/style.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body{
2+
background-color: rgb(250, 242, 242);
3+
}
4+
5+
.grid {
6+
display:flex;
7+
flex-wrap: wrap;
8+
height: 420px;
9+
width: 420px;
10+
background-color: rgb(0, 0, 0);
11+
margin: auto;
12+
justify-content: center;
13+
align-content: center;
14+
}
15+
16+
.grid div{
17+
border: solid rgb(68, 65, 65) 2px;
18+
width: 100px;
19+
height: 100px;
20+
background-color: rgb(167, 154, 154);
21+
text-align: center;
22+
vertical-align: middle;
23+
line-height: 100px;
24+
font-weight: bold;
25+
font-size: 52px;
26+
}
27+
28+
.scoreContainer {
29+
margin-top: 60px;
30+
font-weight: bold;
31+
text-align: center;
32+
font-size: 30px;
33+
}
34+
35+
.header {
36+
font-size: 60px;
37+
margin-top: 50px;
38+
text-align: center;
39+
font-weight: bold;
40+
}
41+
42+
.instructions{
43+
text-align: center;
44+
margin: auto;
45+
}
46+
47+
#result{
48+
text-align: center;
49+
margin: auto;
50+
}

0 commit comments

Comments
 (0)