Skip to content

Commit 4d50d68

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#408 from RAHULBAWA777/patch-78
Emoji Smasher Game (Smash Em' All 😈)
2 parents 98567a5 + 909f57f commit 4d50d68

9 files changed

+264
-0
lines changed

‎Smash em All/5862951a3796e30ac4468737.png

10 KB
Loading

‎Smash em All/586295b33796e30ac4468738.png

38.6 KB
Loading

‎Smash em All/58e8fe3beb97430e819064c4.png

42.9 KB
Loading

‎Smash em All/58e8ff10eb97430e819064cc.png

40.6 KB
Loading

‎Smash em All/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# Smash Em' All
3+
4+
## 🚀 About Me
5+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
6+
7+
8+
## Run Locally
9+
10+
Clone the project
11+
12+
13+
Start the live server
14+
15+
16+
## Used By
17+
18+
This project is used by the following companies:
19+
20+
-https://github.com/Dezenix/frontend-html-css-js

‎Smash em All/hammer.png

20.2 KB
Loading

‎Smash em All/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Smash Emoji</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Smash Em' All</h1>
12+
<button class="btn" id="startButt">Start</button>
13+
</div>
14+
15+
<div class="container">
16+
<h1>Choose the Emoji</h1>
17+
<ul class="starter">
18+
<li>
19+
<button class="selectOne">
20+
<p>1</p>
21+
<img src="http://assets.stickpng.com/thumbs/58e8fe3beb97430e819064c4.png" >
22+
</button>
23+
</li>
24+
<li>
25+
<button class="selectOne">
26+
<p>2</p>
27+
<img
28+
src="http://assets.stickpng.com/thumbs/5862951a3796e30ac4468737.png"
29+
30+
/>
31+
</button>
32+
</li>
33+
<li>
34+
<button class="selectOne">
35+
<p>3</p>
36+
<img
37+
src="http://assets.stickpng.com/thumbs/586295b33796e30ac4468738.png"
38+
39+
/>
40+
</button>
41+
</li>
42+
<li>
43+
<button class="selectOne">
44+
<p>4</p>
45+
<img
46+
src="http://assets.stickpng.com/thumbs/58e8ff10eb97430e819064cc.png"
47+
48+
/>
49+
</button>
50+
</li>
51+
</ul>
52+
</div>
53+
54+
<div class="container playground" id="playground">
55+
<h2 id="time" class="time">Time: 00:00</h2>
56+
<h2 id="score" class="score">Score: 0</h2>
57+
</div>
58+
59+
<script src="script.js"></script>
60+
</body>
61+
</html>

‎Smash em All/script.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
const playground = document.getElementById('playground')
2+
const Time = document.getElementById('time')
3+
const startButt = document.getElementById('startButt')
4+
const containers = document.querySelectorAll('.container');
5+
const Score = document.getElementById('score')
6+
const selectOne = document.querySelectorAll('.selectOne');
7+
let selected_emoji = {}
8+
let score = 0
9+
let sec = 0
10+
11+
12+
startButt.addEventListener('click', () => containers[0].classList.add('glide'))
13+
14+
selectOne.forEach(btn => {
15+
btn.addEventListener('click', () => {
16+
const img = btn.querySelector('img')
17+
const src = img.getAttribute('src')
18+
selected_emoji = { src }
19+
containers[1].classList.add('glide')
20+
setTimeout(makeEmoj, 1000)
21+
gameOn()
22+
})
23+
})
24+
25+
function gameOn() {
26+
setInterval(increaseTime, 2000)
27+
}
28+
29+
function increaseTime() {
30+
let m = Math.floor(sec / 60)
31+
let s = sec % 60
32+
m = m < 10 ? `0${m}` : m
33+
s = s < 10 ? `0${s}` : s
34+
Time.innerHTML = `Time: ${m}:${s}`
35+
sec++
36+
}
37+
38+
function makeEmoj() {
39+
const emoji = document.createElement('div')
40+
emoji.classList.add('trigger')
41+
const { x, y } = anyLocation()
42+
emoji.style.left = `${x}px`
43+
emoji.style.top = `${y}px`
44+
emoji.innerHTML = `<img src="${selected_emoji.src}"/>`
45+
46+
emoji.addEventListener('click', smash)
47+
48+
playground.appendChild(emoji)
49+
}
50+
51+
function anyLocation() {
52+
const width = window.innerWidth
53+
const height = window.innerHeight
54+
const x = Math.random() * (width - 200) + 100
55+
const y = Math.random() * (height - 200) + 100
56+
return { x, y }
57+
}
58+
59+
function smash() {
60+
increaseScore()
61+
this.classList.add('caught')
62+
setTimeout(() => this.remove(), 2000)
63+
emoAdded()
64+
}
65+
66+
function emoAdded() {
67+
setTimeout(makeEmoj, 1700)
68+
setTimeout(makeEmoj, 2000)
69+
}
70+
71+
function increaseScore() {
72+
score++
73+
Score.innerHTML = `Score: ${score}`
74+
}

‎Smash em All/style.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
background:url('https://www.color-hex.com/palettes/2639.png');
8+
color: rgb(0, 0, 0);
9+
text-align: center;
10+
height: 100vh;
11+
overflow: hidden;
12+
margin: 0;
13+
}
14+
15+
.container {
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
justify-content: center;
20+
height: 100vh;
21+
width: 100vw;
22+
transition: margin 0.5s ease-out;
23+
}
24+
25+
.container.glide {
26+
margin-top: -100vh;
27+
}
28+
29+
.starter {
30+
display: flex;
31+
flex-wrap: wrap;
32+
justify-content: center;
33+
list-style-type: none;
34+
padding: 0;
35+
}
36+
37+
.btn {
38+
border: 3px solid whitesmoke;
39+
border-radius: 7px;
40+
background-color: rgb(0, 0, 0);
41+
color: #ffffff;
42+
padding: 10px 20px;
43+
cursor: pointer;
44+
font-size: 1rem;
45+
}
46+
47+
.btn:hover {
48+
background-color: whitesmoke;
49+
color: black;
50+
}
51+
.selectOne {
52+
background-color: transparent;
53+
border: 2px solid rgb(0, 0, 0);
54+
cursor: pointer;
55+
font-weight: 900;
56+
width: 180px;
57+
height: 180px;
58+
border-radius: 50%;
59+
color: rgb(0, 0, 0);
60+
}
61+
62+
.selectOne:hover {
63+
background-color: #fff;
64+
}
65+
66+
.selectOne img {
67+
width: 100px;
68+
height: 100px;
69+
object-fit: contain;
70+
}
71+
72+
.playground {
73+
position: relative;
74+
}
75+
76+
.time,
77+
.score {
78+
position: absolute;
79+
top: 1px;
80+
}
81+
82+
.time {
83+
left: 20px;
84+
}
85+
86+
.score {
87+
right: 20px;
88+
}
89+
90+
.trigger {
91+
cursor: pointer;
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
width: 100px;
96+
height: 100px;
97+
position: absolute;
98+
transform: translate(-50%, -50%) scale(1);
99+
transition: transform 0.5s ease-in-out;
100+
}
101+
102+
.trigger.caught {
103+
transform: translate(-50%, -50%) scale(0);
104+
}
105+
106+
.trigger img {
107+
width: 100px;
108+
height: 100px;
109+
}

0 commit comments

Comments
 (0)