HTML5 help : - no shuffle needed - i need to track images with id and source Her

ID: 3590636 • Letter: H

Question

HTML5 help :

- no shuffle needed

- i need to track images with id and source

Here are the useful lines:

window.addEventListener("load",myfunction,false);
obj.addEventListener("click",function(){myfunction();},false);
var vars=document.getElementById(" ");
var1.setAttribute("src",mysource);
var1.setAttribute("name",myname);
Len=array1.length
array1=["elm1","elm2"...];
array2=[["elm1","elm2"],["elm2","elm4"]];
newArray[i]=array2[i][0];
array2[i][1];
....;

For images, can you indicate where the images go? so i can replace with other images. Thank you very much.

Objectives Create a Memory Game using HTML, CSS and JavaScript (Part 1). Create a webpage called Lab6_MemoryGame.html Create at least 6 pairs of cards (or images) laid out in 3 or more rows. Your images (or cards) should all have width and height of at least 200px Create a New Game button, and place it above or next to the pairs. The New Game button must be clicked first. If a user clicks on any of the cards before clicking the New Game button, prompt him/her to do so first. Use a JavaScript ALERT. The game is played by clicking on the cards. Initially the cards are all face down (Figure 1). Clicking on one card will turn it up, allowing the user to see what card it is . Figure 1 Cards are face down . Clicking on a second card will also turn it up. If the two cards are identical, the user has discovered a pair. The pair will remain face If the cards are different, they will automatically flip face down after a short delay. The game is won by turning up all of the cards. If the user wins, display a JavaScript alert * to congratulate him/her.

Explanation / Answer

Setup:

--------------------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<title>Lab6_memoryGame</title>
<style>
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>

<table>
<tr>
<td><img src="imgs/blank.PNG" id="img-1"></td>
<td><img src="imgs/blank.PNG" id="img-2"></td>
<td><img src="imgs/blank.PNG" id="img-3"></td>
<td><img src="imgs/blank.PNG" id="img-4"></td>
</tr>
<tr>
<td><img src="imgs/blank.PNG" id="img-5"></td>
<td><img src="imgs/blank.PNG" id="img-6"></td>
<td><img src="imgs/blank.PNG" id="img-7"></td>
<td><img src="imgs/blank.PNG" id="img-8"></td>
</tr>
<tr>
<td><img src="imgs/blank.PNG" id="img-9"></td>
<td><img src="imgs/blank.PNG" id="img-10"></td>
<td><img src="imgs/blank.PNG" id="img-11"></td>
<td><img src="imgs/blank.PNG" id="img-12"></td>
</tr>
</table>




<script>
gameStarted = false; // for checking game started or not

pairsMatched = 0; // for counting number of pairs matched

imgPos = ['imgs/c.PNG','imgs/b.PNG','imgs/c.PNG','imgs/d.PNG','imgs/f.PNG','imgs/e.PNG','imgs/a.PNG','imgs/f.PNG','imgs/a.PNG','imgs/b.PNG','imgs/d.PNG','imgs/e.PNG']; // based on the index of this array, the images in Grid will arrange

// For Storing the last picked up card
prevImgNumber = "";
prevImgElement = "";

// When user picks, wrong cards then move those cards to this array to hide after sometime
ImagesToHide = [];

// New Game Button Handler
btnNewGame = document.getElementById('btn-new-game');
// when clicked on New Game Button, starts the game
btnNewGame.addEventListener("click",function(){
gameStarted = true;
}, false);

// Attaching event listeners to all the images
images = document.getElementsByTagName('img');
for(i=0; i<images.length; i++){
images[i].addEventListener("click", playGame, false);
}

// Logic of the Game
function playGame(el){
// Check if New Game button clicked or not
if(gameStarted){
imgEl = el.target; // Clicked Card Image element
imgID = imgEl.id; // ID of the clicked Card Image

index = imgID.split("-")[1]-1; // Deriving index of 'imgPos' array based upon the ID

imgNumber = imgPos[index]; // Source of the clicked card image

imgEl.src = imgNumber; // Updating the image source

// when choosing first card of pair
if(prevImgNumber == ""){
// Saving the current card for checking with next card
prevImgNumber = imgNumber;
prevImgElement = imgEl;
}
// when choosing second card of pair
else if(prevImgNumber != imgNumber){
// if pair mis-matched
ImagesToHide.push(prevImgElement); // add previous card into ImageToHide array
ImagesToHide.push(imgEl); // add current card into ImagesToHide array

// reseting the pair selection
prevImgNumber = "";
prevImgElement = "";

// waiting for 2 seconds to hide old picked cards
setTimeout(function(){
for(j=0; j<ImagesToHide.length; j++){
ImagesToHide[j].src = "imgs/blank.PNG"; // hiding all old cards
}
ImagesToHide = [];
}, 2000);
}
// when choosing second card of pair
else{
// if matches the pair

// reseting the pair selection
prevImgNumber = "";
prevImgElement = "";

// Increasing the count of matched pairs
pairsMatched++;

// Checking if Game is completed or not
if(pairsMatched == 6){
// if completed, then congratulating the player
alert("Congratulations! You Won the Game");
}
}
}
// if game not started
else{
alert("Please click on 'New Game' Button to start Playing");
}
}
</script>

</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------

Thank you!

Navigate

HTML5 as a software, programmatic technology has evolved immensely over the year

HTML5 help : I have done up to this : <html> <head> <title>Shopping Order Form</

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

HTML5 help : - no shuffle needed - i need to track images with id and source Her

Question

Explanation / Answer

Related Questions

Navigate