Skip to content

Commit 035785c

Browse files
TheShubham-KTheShubham-K
committed
Bug Fixes And TWeaks
1 parent 48fe576 commit 035785c

File tree

1 file changed

+139
-0
lines changed

1 file changed

+139
-0
lines changed

‎Built_in_JavaScript/Color_Matching_Game.html

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>&#x1F3F4;&#x200D;&#x2620;&#xFE0F; Complete Javascripts Course</title>
8+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
9+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
10+
<style>
11+
#output {
12+
width: 400px;
13+
height: 400px;
14+
display: block;
15+
border: 1px solid black;
16+
}
17+
18+
#cButtons>div {
19+
width: 100px;
20+
display: inline-block;
21+
height: 50px;
22+
text-align: center;
23+
border: 1px solid black;
24+
}
25+
26+
.box {
27+
width: 100px;
28+
height: 100px;
29+
display: block;
30+
border: 1px solid black;
31+
display: inline-block;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<br />
38+
<br />
39+
<center>
40+
<!-- <input type="text" id="item"> -->
41+
<br />
42+
<div id="wrapper">&#x1F4C3; &#x1F3EA; 👾</div>
43+
<br />
44+
<input type="button" class="btn btn-outline-danger" onClick="start()" value="Start Game">
45+
<div id="message">Complete JavaScript Course</div>
46+
<div id="message1"></div>
47+
<div id="output"></div>
48+
<div id="cButtons"></div>
49+
<div id="guess"></div>
50+
<br /><br />
51+
</center>
52+
<script>
53+
var message = document.getElementById("message");
54+
var guess = document.getElementById("guess");
55+
var message1 = document.getElementById("message1");
56+
var output = document.getElementById("output");
57+
58+
var arr1 = [];
59+
var arr2 = [];
60+
var myT;
61+
var loop = 0;
62+
var gameplay = false;
63+
64+
function start() {
65+
var colorArr = ["red", "blue", "yellow", "black", "pink", "orange", "gray", "green", "purple", "indigo"];
66+
var html = "";
67+
arr1 = [];
68+
arr2 = [];
69+
guess.innerHTML = "";
70+
gameplay = true;
71+
message.innerHTML = "GAME Started";
72+
for (var x = 0; x < colorArr.length; x++) {
73+
html += '<div class="' + colorArr[x] + '" style="background-color:' + colorArr[x] +
74+
'" onClick="oGuess()">' + colorArr[x] +
75+
'</div>';
76+
}
77+
78+
document.getElementById("cButtons").innerHTML = html;
79+
80+
for (var x = 0; x < colorArr.length; x++) {
81+
var r = colorArr[Math.floor(Math.random() * colorArr.length)];
82+
arr1.push(r);
83+
}
84+
loop = 0;
85+
console.log(loop);
86+
myT = setTimeout(goWhite, 200);
87+
}
88+
89+
function oGuess() {
90+
if (gameplay) {
91+
var g = event.target.className;
92+
var d = document.createElement('div');
93+
d.className = 'box';
94+
d.style.backgroundColor = g;
95+
d.dataset.v = arr2.length;
96+
d.onclick = function () {
97+
if (gameplay) {
98+
var iRemove = event.target.getAttribute('data-v');
99+
arr2.splice(iRemove, 1);
100+
event.target.parentNode.removeChild(event.target);
101+
console.log(iRemove);
102+
}
103+
}
104+
guess.appendChild(d);
105+
arr2.push(g);
106+
if (arr2.length == arr1.length) {
107+
gameplay = false;
108+
if (arr1.toString() == arr2.toString()) {
109+
message.innerText = "you were correct :)";
110+
} else {
111+
message.innerHTML = "you were wrong <br> Your guess " + arr2 + "<br>correct order was " + arr1;
112+
}
113+
}
114+
}
115+
}
116+
117+
118+
function goWhite() {
119+
output.style.backgroundColor = "white";
120+
myT = setTimeout(goColor, 200);
121+
}
122+
123+
function goColor() {
124+
output.style.backgroundColor = arr1[loop];
125+
loop++;
126+
if (loop >= arr1.length) {
127+
clearTimeout(myT);
128+
}
129+
myT = setTimeout(goWhite, 1000);
130+
}
131+
</script>
132+
133+
<script src="https://code.jquery.com/jquery-3.5.0.js"
134+
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
135+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
136+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
137+
</body>
138+
139+
</html>

0 commit comments

Comments
 (0)