![]() If it is tell the person the game is over and display the popup replay button Restart the game The checkWon function simply check if the value of cardsWon is equal to the length of the card divided by 2. After the if/else statement, we want to clear the arrays for the next time the user clicks on an image and add to the number of clicks If the images are not the same (else), we simply remove the flip Class and change the image back. If the images are the same we tell the person they got it and adds to the number of cardsWon, and then check if all the cards have been selected with the gameWon function. We will then checked if the first value in cardsArray is equal to the second and if it is not the same image that was clicked twice. The checkForMatch function first gets all the images on the board, then gets the Ids of the images clicked from the "cardsId" array ( This will allow us easily get access to their object). 5s (to give a nice user experience ), and then we call the checkForMatch function Once two images has been clicked, we wait for about. This process will be repeated when the second image is clicked and then we will check to see if they are the same image Check if the cards clicked is correct We add a class of flip to the img clicked to create a sort of flipping effect and then change the image to reveal the image beneath. The id of the image clicked will also be pushed into the cardsId array. ![]() So we get the id of the image clicked to a variable selected, we then use this variable to get the object clicked and then push the name property of that object into the cardsSelected array. The this keyword basically tells it to select the image that was clicked. Once an image is clicked, it gets the id (remember the attribute we set above data-id, we can access it via dataset.id or if it was data-name it would be dataset.name). The flipCard function looks out for click. The value of the id will be the index i.e from 0 etc. ![]() For each object, simply create an image element, set the src attribute to display the image and add a data attribute (data attribute are simply objects that holds values in the html5 which you can use in JS via dataset). Each object in the array and the index(optional) which is the position of that object in the array and starts from zero. The createBoard function removes the popup, loops over the image array with forEach, this receives two arguments. This eventListener will house some functions that will start the game The eventListener works immediately the DOM loads (hence the name). This will be done with an eventListener called DOMContentLoaded, which will be added to the document itself. While cardsWon and clicks will record the wins and no of clicks respectively Setting up the board on DOM load in JS Imgs is a variable that we will initialize from here and will hold the images created, cardsId and cardsSelected are arrays that will contain the cards clicked on. The grid, scoreboard, popup, playAgain and clickBoard are elements from the HTML that we are getting into the JS and will inject data into them. ![]() You will notice each object is actually double, and that is because you will be trying to compare two images on the board. The names will be used when we want to compare two images that were clicked. So we have a cardArray, which is just a list of objects containing images and their names. Enter fullscreen mode Exit fullscreen mode ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |