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 |