Skip to content

Commit 06908f6

Browse files
thinkswellthinkswell
authored
Merge pull request thinkswell#168 from Deep1Shikha/memorize-deep1shikha-branch
memorize
2 parents 395785c + ace82e4 commit 06908f6

File tree

3 files changed

+290
-0
lines changed

3 files changed

+290
-0
lines changed

‎memorize/deep1shikha/app.js

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
function memoryGame(targetEle) {
2+
targetEle.addEventListener("click", _verifyClick);
3+
4+
let boxLength = 5;
5+
let lastLimit = 1;
6+
let highscore = localStorage.getItem("highScore") || 0;
7+
let currentScore = 0;
8+
let lastOrder = [];
9+
let btnele = "";
10+
let isRunning = false;
11+
12+
/**
13+
*
14+
* @returns random value for highlight
15+
* */
16+
17+
function _RandomValues() {
18+
let min = 0;
19+
let max = boxLength;
20+
return Math.floor(Math.random() * (max - min)) + min;
21+
}
22+
23+
function _updateHighScore() {
24+
highscore = Math.max(currentScore, highscore);
25+
let highscoreEle = document.getElementById("highscore");
26+
highscoreEle.innerText = Number(highscore);
27+
localStorage.setItem("highScore", highscore);
28+
}
29+
30+
function _updateScore() {
31+
let scoreEle = document.getElementById("score");
32+
scoreEle.innerHTML = currentScore;
33+
}
34+
35+
/**
36+
*
37+
* @param {*} eleId
38+
* @param {*} duration
39+
*/
40+
41+
function _blink(eleId, duration, idx = -1) {
42+
setTimeout(function () {
43+
let ele = document.getElementById(eleId);
44+
ele.classList.add("box__item--highlight");
45+
46+
/**
47+
* remove the old class
48+
*/
49+
50+
setTimeout(function () {
51+
ele.classList.remove("box__item--highlight");
52+
if (idx == -1) {
53+
isRunning = false;
54+
}
55+
if (idx == lastOrder.length - 1) {
56+
isRunning = false;
57+
}
58+
}, 500);
59+
}, duration);
60+
}
61+
62+
function _verifyClick(event) {
63+
if (
64+
!event.target.classList.contains("box__item") ||
65+
lastOrder.length == 0 ||
66+
isRunning
67+
) {
68+
return;
69+
}
70+
71+
let ele = event.target;
72+
73+
if (Number(ele.dataset.idx) == lastOrder[0]) {
74+
_blink(Number(ele.dataset.idx), 0);
75+
lastOrder.shift();
76+
77+
/**
78+
* caling the next time
79+
*/
80+
if (lastOrder.length == 0) {
81+
currentScore++;
82+
_updateScore();
83+
_updateHighScore();
84+
lastLimit++;
85+
setTimeout(start, 2000);
86+
}
87+
return;
88+
}
89+
90+
/**
91+
* incase selection is wrong
92+
*/
93+
ele.classList.add("box__item--highlightwrong");
94+
setTimeout(function () {
95+
ele.classList.remove("box__item--highlightwrong");
96+
}, 500);
97+
targetEle.classList.add("moveanimation");
98+
99+
/**
100+
* reset the variables
101+
*
102+
*/
103+
104+
lastLimit = 1;
105+
currentScore = 0;
106+
_updateScore();
107+
lastOrder = [];
108+
btnele.classList.remove("start__btn--disable");
109+
}
110+
111+
function start(ele) {
112+
isRunning = true;
113+
if (ele) {
114+
btnele = ele;
115+
btnele.classList.add("start__btn--disable");
116+
targetEle.classList.remove("moveanimation");
117+
}
118+
119+
for (let limit = 0; limit < lastLimit; limit++) {
120+
lastOrder.push(_RandomValues());
121+
}
122+
console.log(lastOrder);
123+
124+
for (let idx = 0; idx < lastOrder.length; idx++) {
125+
_blink(lastOrder[idx], idx * 1000, idx);
126+
}
127+
}
128+
129+
function render() {
130+
let tmpl = "";
131+
132+
tmpl += `<div class= "flex justify-spacebetween m-b-10">
133+
<div class="flex">
134+
Score :
135+
<span id="score">
136+
0
137+
</span>
138+
</div>
139+
140+
<div class="flex">
141+
High Score :
142+
<span id="highscore">
143+
0
144+
</span>
145+
</div>
146+
</div>`;
147+
148+
tmpl += '<div class ="box">';
149+
for (let idx = 0; idx < boxLength; idx++) {
150+
tmpl += `<div class="box__item" id=${idx} data-idx = ${idx}></div>`;
151+
}
152+
tmpl += "</div>";
153+
targetEle.innerHTML = tmpl;
154+
_updateHighScore();
155+
}
156+
157+
return {
158+
render: render,
159+
start: start,
160+
};
161+
}
162+
163+
let container = document.getElementById("container");
164+
let mg = new memoryGame(container);
165+
mg.render();
166+
167+
let btn = document.querySelector(".start__btn");
168+
btn.addEventListener("click", function () {
169+
mg.start(btn);
170+
});

‎memorize/deep1shikha/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<meta name="description" content="memory Game" />
8+
<meta name="keywords" content="game, memorize, javascript" />
9+
<link rel="stylesheet" href="style.css" type="text/css" />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@600&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<title>Memorize</title>
15+
</head>
16+
17+
<body>
18+
<h1 id="title">Remember it</h1>
19+
<main>
20+
<div id="container"></div>
21+
<br />
22+
<button class="start__btn">Start</button>
23+
</main>
24+
<script type="text/javascript" src="app.js"></script>
25+
</body>
26+
</html>

‎memorize/deep1shikha/style.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
* {
2+
padding: 0px;
3+
margin: 0px;
4+
font-family: Verdana, Geneva, Tahoma, sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
html,
9+
body {
10+
height: 100vh;
11+
width: 100%;
12+
font-size: 14px;
13+
color: #333;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
flex-direction: column;
18+
}
19+
20+
#title {
21+
position: fixed;
22+
height: 30px;
23+
top: 0;
24+
color: blueviolet;
25+
}
26+
#container {
27+
position: relative;
28+
}
29+
30+
.moveanimation {
31+
animation: shake 0.2s;
32+
transform: translate3d(0, 0, 0);
33+
}
34+
35+
.m-b-10 {
36+
margin-bottom: 10px;
37+
}
38+
39+
.start__btn {
40+
padding: 3px 5px;
41+
}
42+
.start__btn--disable {
43+
pointer-events: none;
44+
opacity: 0.5;
45+
}
46+
47+
.flex {
48+
display: flex;
49+
}
50+
51+
.justify-spacebetween {
52+
justify-content: space-between;
53+
}
54+
.box {
55+
display: flex;
56+
width: auto;
57+
border: 1px solid #ccc;
58+
}
59+
60+
.box__item {
61+
height: 100px;
62+
width: 100px;
63+
border-right: 1px solid #ccc;
64+
cursor: pointer;
65+
background-color: #eceaec;
66+
}
67+
68+
.box__item--highlight {
69+
background-color: #2a5acf;
70+
}
71+
72+
.box__item--highlightwrong {
73+
background-color: #ff0000;
74+
}
75+
76+
@keyframes shake {
77+
0% {
78+
transform: translateX(0);
79+
}
80+
10%,
81+
30%,
82+
50%,
83+
70%,
84+
90% {
85+
transform: translateX(-8px);
86+
}
87+
20%,
88+
40%,
89+
60%,
90+
80%,
91+
100% {
92+
transform: translateX(8px);
93+
}
94+
}

0 commit comments

Comments
 (0)