Question
I'm trying to do a memory game board of images but when I put in the images, it doesn't work. Here's my HTML code: Game
I'm trying to do a memory game board of images but when I put in the images, it doesn't work.
Here's my HTML code:
Matching Game!
Here is my javascript code (this is the part that isn't working):
var images = new Array(16); function initialize(){ images[0] = new Image(71, 71); images[0].src = "https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg?auto=compress&cs=tinysrgb&h=350"; images[1] = new Image(71, 71); images[1].src = "https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg?auto=compress&cs=tinysrgb&h=350"; images[2] = new Image(71, 71); images[2].src = "https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/d/domestic-dog_thumb.jpg"; images[3] = new Image(71, 71); images[3].src = "https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/d/domestic-dog_thumb.jpg"; images[4] = new Image(71, 71); images[4].src = "https://pbs.twimg.com/profile_images/846146544072101888/0sLpdiu1_400x400.jpg"; images[5] = new Image(71,71); images[5].src = "https://pbs.twimg.com/profile_images/846146544072101888/0sLpdiu1_400x400.jpg"; images[6] = new Image (71,71); images[6].src = "https://www.what-dog.net/Images/faces2/scroll0015.jpg"; images[7] = new Image (71,71); images[7].src = "https://www.what-dog.net/Images/faces2/scroll0015.jpg"; images[8] = new Image (71,71); images[8].src = "https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi"; images[9] = new Image (71,71); images[9].src = "https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi"; images[10] = new Image (71,71); images[10].src = "http://www.insidedogsworld.com/wp-content/uploads/2016/03/Dog-Pictures.jpg"; images[11] = new Image (71,71); images[11].src = "http://www.insidedogsworld.com/wp-content/uploads/2016/03/Dog-Pictures.jpg"; images[12] = new Image (71,71); images[12].src = "https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782"; images[13] = new Image (71,71); images[13].src = "https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782"; images[14] = new Image (71,71); images[14].src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKrarG6z-Wx-Jzy7QyDEf1ZVQCui6d8rFZdHkOD9utNJV8RmxE9g"; images[15] = new Image (71,71); images[15].src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKrarG6z-Wx-Jzy7QyDEf1ZVQCui6d8rFZdHkOD9utNJV8RmxE9g"; }
var memory_values = []; var memory_tile_ids = []; var tiles_flipped = 0; Array.prototype.memory_tile_shuffle = function(){ var i = this.length, j, temp; while(--i > 0){ j = Math.floor(Math.random() * (i+1)); temp = this[j]; this[j] = this[i]; this[i] = temp; } } function newBoard(){ tiles_flipped = 0; var output = ''; memory_array.memory_tile_shuffle(); for(var i = 0; i < memory_array.length; i++){ output += '
'; } document.getElementById('memory_board').innerHTML = output; } function memoryFlipTile(tile,val){ if(tile.innerHTML == "" && memory_values.length < 2){ tile.style.background = '#FFF'; tile.innerHTML = val; if(memory_values.length == 0){ memory_values.push(val); memory_tile_ids.push(tile.id); } else if(memory_values.length == 1){ memory_values.push(val); memory_tile_ids.push(tile.id); if(memory_values[0] == memory_values[1]){ tiles_flipped += 2; memory_values = []; memory_tile_ids = []; if(tiles_flipped == memory_array.length){ alert("New board."); document.getElementById('memory_board').innerHTML = ""; newBoard(); } }else { function flip2Back(){ var tile_1 = document.getElementById(memory_tile_ids[0]); var tile_2 = document.getElementById(memory_tile_ids[1]); tile_1.style.background = 'url(https://thumb1.shutterstock.com/display_pic_with_logo/670804/103533200/stock-vector-playing-card-back-side-x-mm-103533200.jpg) center'; tile_1.innerHTML = ""; tile_2.style.background = 'url(https://thumb1.shutterstock.com/display_pic_with_logo/670804/103533200/stock-vector-playing-card-back-side-x-mm-103533200.jpg)center'; tile_2.innerHTML = ""; memory_values = []; memory_tile_ids = []; } setTimeout(flip2Back, 700); } } } }
Thanks!
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started