<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Memory Game</title>
<script>
var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
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 + '" onclick="memoryFlipTile(this,\'' + memory_array[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;
//this main if checks if tiles are matches
if (memory_values.length == 0) {
//if the value is 0 push in value and id
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if (memory_values.length == 1) {
//if there already a card flipped over
memory_values.push(val);
memory_tile_ids.push(tile.id);
//if both cards are a match
if (memory_values[0] == memory_values[1]) {
//add 2 to the tiles flipped array
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) {
var res = confirm("Board cleared... Do you want to play again?");
if (res) {
document.getElementById('memory_board').innerHTML = "";
newBoard();
} else {
document.write("thx for playing");
}
}
//the else condition flips back the tiles if there weren't a match
} 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(https://tracky.com/track/52928/serve/stress.gif) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(https://tracky.com/track/52928/serve/stress.gif) no-repeat';
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
</script>
</head>
<body>
<h3 style="text-align:center">Memory Game</h3>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2lach/memory-game-qbWEmz */
body {
background: url(http://www.webdesignhot.com/wp-content/uploads/2011/08/Vector-Smooth-Waves-Background.jpg);
background-size: cover;
}
div#memory_board {
background: #ccc;
border: #999 1px solid;
width: 800px;
height: 540px;
padding: 24px;
margin: 0px auto;
}
div#memory_board > div {
background: url(http://icons.iconarchive.com/icons/umut-pulat/tulliana-2/128/memory-icon.png)
center no-repeat;
border: #000 1px solid;
width: 71px;
height: 71px;
float: left;
margin: 10px;
padding: 20px;
font-size: 64px;
cursor: pointer;
text-align: center;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
