Skip to content

Commit 15dbed6

Browse files
TheShubham-KTheShubham-K
committed
Game Play Flip Setup
1 parent 9f48da9 commit 15dbed6

File tree

1 file changed

+150
-0
lines changed

1 file changed

+150
-0
lines changed

‎Intermediate_JavaScript/GamePlay_setup_Values.html

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
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+
.btn {
12+
background-color: red;
13+
text-align: center;
14+
border-radius: 10px;
15+
font-size: 1em;
16+
padding: 15px;
17+
color: white;
18+
}
19+
20+
.btn:hover {
21+
background-color: crimson;
22+
}
23+
24+
.gameTile {
25+
display: inline-block;
26+
padding: 3px;
27+
}
28+
29+
.flipImage {
30+
max-width: 150px;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<br />
37+
<br />
38+
<center>
39+
<!-- <input type="text" id="item"> -->
40+
<br />
41+
<div id="wrapper">&#x1F4C3; &#x1F3EA; 👾</div>
42+
<br />
43+
<div id="output">Complete JavaScript Course </div>
44+
<div id="wrapper">
45+
<div id="start" class="btn">Start</div>
46+
<div id="score"></div>
47+
<div id="message"></div>
48+
<div id="gameboard"></div>
49+
</div>
50+
<!-- <input type="button" class="btn btn-outline-warning" onClick="lookUp()" value="Find Text"> -->
51+
52+
<br /><br />
53+
</center>
54+
<script>
55+
var playLockout = false;
56+
var gamePlay = false;
57+
var tileImages = [],
58+
tileArray = [],
59+
tileFlippedOver = [];
60+
var cardFlipped = -1;
61+
var timer;
62+
var sb = document.getElementById('start');
63+
var message = document.getElementById('message');
64+
var score = document.getElementById('score');
65+
var gameBoard = document.getElementById('gameboard');
66+
sb.addEventListener('click', startGame);
67+
68+
function startGame() {
69+
// hide start button
70+
sb.style.display = 'none';
71+
message.innerHTML = "Its working" + gamePlay;
72+
if (!gamePlay) {
73+
gamePlay = true;
74+
buildArray();
75+
tileArray = tileImages.concat(tileImages);
76+
shuffleArray(tileArray);
77+
buildBoard();
78+
}
79+
}
80+
81+
function buildBoard() {
82+
var html = "";
83+
var x = 0;
84+
tileArray.forEach(function (ele) {
85+
x++;
86+
html += '<div class="gameTile">';
87+
html += '<img id="cardz' + x +
88+
'" src="http://via.placeholder.com/250/000000/ffffff?text=click" onclick="pickCard(' + (x -
89+
1) +
90+
',this)" class="flipImage"></div>';
91+
});
92+
gameBoard.innerHTML = html;
93+
}
94+
95+
function pickCard(i, t) {
96+
console.log(event.target);
97+
if (cardFlipped >= 0) {
98+
cardFlip(i, t);
99+
if (checkSrc(tileFlippedOver[tileFlippedOver.length - 1]) == checkSrc(tileFlippedOver[tileFlippedOver
100+
.length -
101+
2])) {
102+
message.innerHTML = "Match Found";
103+
} else {
104+
message.innerHTML = "No Match";
105+
timer = setInterval(hideCard, 1000);
106+
}
107+
//check to see if its a match
108+
} else {
109+
cardFlipped = i;
110+
cardFlip(i, t);
111+
}
112+
}
113+
114+
function hideCard() {}
115+
116+
function checkSrc(a) {
117+
return document.getElementById(a).src;
118+
}
119+
120+
function cardFlip(i, t) {
121+
t.src = "http://via.placeholder.com/250/ffffff/000000?text=" + tileArray[i];
122+
tileFlippedOver.push(t.id);
123+
}
124+
125+
function buildArray() {
126+
for (var x = 1; x < 7; x++) {
127+
tileImages.push(x + '.jpg');
128+
}
129+
}
130+
131+
function shuffleArray(array) {
132+
for (var x = array.length - 1; x > 0; x--) {
133+
var holder = Math.floor(Math.random() * (x + 1));
134+
var itemValue = array[x];
135+
array[x] = array[holder];
136+
array[holder] = itemValue;
137+
}
138+
return array;
139+
}
140+
</script>
141+
142+
143+
144+
<script src="https://code.jquery.com/jquery-3.5.0.js"
145+
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
146+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
147+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
148+
</body>
149+
150+
</html>

0 commit comments

Comments
 (0)