-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame.js
225 lines (205 loc) · 8.05 KB
/
game.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
const cardArray = [
//* This array are the Cards or options that displays on game and can be fliped
{
name: 'Skyline R34 GTR',
img: 'images/cards/r34.jpg'
},
{
name: 'The Ultimate Drift Machine',
img: 'images/cards/180sx.jpg'
},
{
name: '86 in Retro Vibe',
img: 'images/cards/86retro.jpg'
},
{
name: '370z',
img: 'images/cards/370z.jpg'
},
{
name: 's12 with Pop-ups',
img: 'images/cards/s12.jpg'
},
{
name: 'Shinigami no skyline',
img: 'images/cards/shinigamiR32.jpg'
},
//* Repeating the same images after this point
{
name: 'Skyline R34 GTR',
img: 'images/cards/r34.jpg'
},
{
name: 'The Ultimate Drift Machine',
img: 'images/cards/180sx.jpg'
},
{
name: '86 in Retro Vibe',
img: 'images/cards/86retro.jpg'
},
{
name: '370z',
img: 'images/cards/370z.jpg'
},
{
name: 's12 with Pop-ups',
img: 'images/cards/s12.jpg'
},
{
name: 'Shinigami no skyline',
img: 'images/cards/shinigamiR32.jpg'
}
]
//* Sorting/Shuffling an array randomly
//* Generates a random value between -0.5 and 0.5 which can be positive negative zero that way it can sort the array in most random order everytime the page is refreshed
cardArray.sort(() => 0.5 - Math.random());
//! VARIABLES
//* Selects the element by the ID and put in the const
const grid_Display = $('#grid');
const resultDisplay = $('#result');
//* Setting the Header and span hiden by default so it' doesn't look sloppy be defualt
let chosenCard = []; //* Cards that are chosen by player
let chosenCardIDs = []; //* Chosen IDs of the cards that are chosen
let cardsWon = []; //* Number of Cards that a player picked and matched Score depends on this
//!FUNCTIONS
//* Creating the Board Game with the Cards by arranging them in order and covering them by the CoverImage
function createBoard() {
for (let i = 0; i < cardArray.length; i++) {
const card = $('<img>').attr({
'src': 'images/Cover.png',
'data-id': i
});
card.on('click', flip_card);
grid_Display.append(card);
}
}
//* Function to to check if the Player picked two same cards or other Matching Cards
function checkMatch() {
// cards is grabbing all the images present in the #grid section and storing it in the array
const cards = $('img');
//OptionID1 and OptionID2 are the Cards that is fliped by the user and setting up with a constant
const optionID1 = chosenCardIDs[0];
const optionID2 = chosenCardIDs[1];
if (optionID1 == optionID2) {
cards.eq(optionID1).attr('src', 'images/Cover.png');
cards.eq(optionID2).attr('src', 'images/Cover.png');
// alert('you clicked the same card');
$('#target').show();
resultDisplay.text("You Clicked the same card");
}
else if (chosenCard[0] === chosenCard[1]) {
// alert('you found a match');
$('#target').show();
resultDisplay.text("you found a match");
// cards.eq(optionID1).attr('src', 'images/white.png');
// cards.eq(optionID2).attr('src', 'images/white.png');
cards.eq(optionID1).attr('src', 'images/transparent.png');
cards.eq(optionID2).attr('src', 'images/transparent.png');
cards.eq(optionID1).off('click', flip_card);
cards.eq(optionID2).off('click', flip_card);
cardsWon.push(chosenCard);
if (cardsWon.length === (cardArray.length / 2)) {
// resultDisplay.textContent = 'Congratulations You found them all';
$('#target').show();
resultDisplay.text("Congratulations You found them all");
cardsWon = [];
setTimeout(() => {
$('#target').hide();
$('#t2').hide();
$('#cringe').mouseenter(function () {
$('#cringe button').removeClass('hide');
});
$('#cringe').mouseleave(function () {
$('#cringe button').addClass('hide');
});
}, 2000);
autoBG();
}
}
else {
cards.eq(optionID1).attr('src', 'images/Cover.png');
cards.eq(optionID2).attr('src', 'images/Cover.png');
// alert('sorry try again');
$('#target').show();
resultDisplay.text("Sorry Try again");
}
chosenCard = [];//* Resting the value of the array so it'll be ready for the next card
chosenCardIDs = [];//same thing
// resultDisplay.text("");
// resultDisplay.text(cardsWon.length);
}
//* This function will flip the cover Image and reveal the Hidden Card that is under the image
function flip_card() {
//Retrieving the Card by it's Data-ID which we set earlier to identify the Card and storing it in a Array
let cardID = this.getAttribute('data-id');
//Picking the Card that is fliped by the user and putting it's name in New Constant Array
chosenCard.push(cardArray[cardID].name);
//Pushing the CardID of the the card that is fliped by the player in the new Array
chosenCardIDs.push(cardID);
//The main function that display the the Picked Card basically flip the cover Card by using the setAttribute()
//It's replacing the Cover Image with that card underneath by grabbing it with the CardID that is with the Card itself
this.setAttribute('src', cardArray[cardID].img);
//This function invoked when Two cards get flipped it calls a function checkMatch()
if (chosenCard.length === 2) {
setTimeout(checkMatch, 100);
}
// Reseting the span so it don't display content all the time unless it have to
resultDisplay.text("");
}
createBoard();//calling the createBoard function to set up the Initial Game UI
function playAgain() {
$('#t2').show();
$('#grid img').remove();
cardArray.sort(() => 0.5 - Math.random());
createBoard();
}
//! Functions for Changing the background on clicks and auto background Changes
const BgArray = [
"url(images/bg/86blackandwhite.png) no-repeat center center/cover",
"url(images/bg/86illustration.jpg) no-repeat center center/cover",
"url(images/bg/86loli.jpg) no-repeat center center/cover",
"url(images/bg/86purple.jpg) no-repeat center center/cover",
"url(images/bg/86redwidebody.jpg) no-repeat center center/cover",
"url(images/bg/86sexy.jpg) no-repeat center center/cover",
"url(images/bg/86skid.jpg) no-repeat center center/cover",
"url(images/bg/86sun.png) no-repeat center center/cover",
"url(images/bg/86WP.jpg) no-repeat center center/cover",
"url(images/bg/carmeet.jpg) no-repeat center center/cover",
"url(images/bg/og.jpg) no-repeat center center/cover",
"url(images/bg/ogAngle.jpg) no-repeat center center/cover",
"url(images/bg/86goat.jpg) no-repeat center center/cover",
"url(images/bg/jdmBros.jpg) no-repeat center center/cover",
"url(images/bg/lambo86.jpg) no-repeat center center/cover",
"url(images/bg/nostalgia.jpg) no-repeat center center/cover",
"url(images/bg/ogGang.jpg) no-repeat center center/cover",
"url(images/bg/rx7&Nsx.jpg) no-repeat center center/cover",
"url(images/bg/default1.png) no-repeat center center/cover"
]
let clicks = 0;
function changeBackground() {
clicks++;
$('.container').css("background", BgArray[clicks]);
if (clicks == BgArray.length) {
clicks = 0;
console.log("Here we go again!")
}
}
function autoBG() {
setInterval(() => {
changeBackground();
}, 4000);
}
// autoBG();//! For Testing Purpose
//! Adding hotkeys for the website
$(document).keydown(function (e) {
if (e.which == 32) { // Check if 'r' or 'R' is pressed
// e.preventDefault(); // Prevent the default action of the key press
changeBackground(); // Call your function here
}
});
$(document).keydown(function (e) {
if (e.which == 82 || e.which == 114) { // Check if 'r' or 'R' is pressed
// e.preventDefault(); // Prevent the default action of the key press
playAgain(); // Call your function here
}
});