javascirpt (need one file: html with <script></script>) Instructions: Create a t
ID: 3913686 • Letter: J
Question
javascirpt (need one file: html with <script></script>)
Instructions: Create a table that will store a total of 8, 10, 12 pictures that are of pairs (2 of each). Please allow user to select their choice. All pictures should be distributed randomly for each start of game. You are given 3 levels of difficulty 3, 5, 8 seconds to memorize the locations, after then the pictures will be hidden. Your goal is to match each of the 8 pictures with its copy, Click the two matching images to reveal them. Please wait for images to disappear, and then allow the user to make the next attempt. Game should be timed for both solving of the puzzle show some time of java script animation award and time frame allowed which should be set at 120 seconds for 8 photos, 150 seconds for 10 photos, and 180 seconds for 12 photos. Please provide user with guidelines on how to play game and have a ready or start button to proceed.
Explanation / Answer
//Program
<!DOCTYPE html>
<style>
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 120s;
-webkit-animation-play-state: paused;
animation: mymove 120s;
animation-play-state: paused;
}
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 100px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 100px;}
}
</style>
<html>
<body>
<p>Memory game</p>
<button id="myBtn1">play</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn1").addEventListener("click", displayInfo);
function displayInfo() {
document.getElementById("demo").innerHTML = "welcome to memory game you will have to choose and match the pictures accordingly to win the game click on the pictures";
}
var memory_array = ['1','1','2','2','3','3','4','4','5','5','6','6','7','7','8','8','9','9','10','10','11','11','12','12'];
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 += '<div id="tile_'+i+'"></div>';
}
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;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("Board cleared... generating new board");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);}}}}
</script>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.