Memory Game Template
Memory Game Template
This is a fun game to share with friends while building your Programming Skills.
Source Code
HTML5 CSS and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Memory Game</title>
<style>
/*change board bg color and size in top section */
/*change box and font size in bottom section */
div#board{
background: #00ff7f;
border:#0000FF 1px solid;
width:320px;
height:340px;
padding:15px;
margin:0px auto;
}
div#board > div{
border:#00838F 1px solid;
width:70px;
height:70px;
float:left;
margin:2px;
padding:2px;
font-size:37px;
cursor:pointer;
text-align:center;
}
</style>
</head>
<!-–change background color here -–>
<body bgcolor="gold">
<div id="title" class="text-center">
<!–-change title here-–>
<h1 style="text-align: center">Memory Game</h1>
</div>
<div id="board"></div>
<script>
//add matching object or words to this array
//simply add more matching objects for larger game
var array = ["🙂","🙂","😍","😍","😎","😎","🤓","🤓","😀","😀","😂","😂","🤗","🤗","🤣","🤣"];
var values = [];
var ids = [];
var flipped = 0;
Array.prototype.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 = '';
array.shuffle();
for(var i = 0; i < array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+array[i]+'\')"></div>';
}
document.getElementById('board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(values.length == 0){
values.push(val);
ids.push(tile.id);
} else if(values.length == 1){
values.push(val);
ids.push(tile.id);
if(values[0] == values[1]){
tiles_flipped += 2;
values = [];
ids = [];
if(tiles_flipped == array.length){
//change alert message here
alert("Great Job!!! 🙂 Play again?");
document.getElementById('board').innerHTML = "";
newBoard();
} } else {
function flip2Back(){
var tile_1 = document.getElementById(ids[0]);
var tile_2 = document.getElementById(ids[1]);
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "";
tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
values = [];
ids = [];
}
setTimeout(flip2Back, 800);
}}}}
</script>
<script>newBoard();</script>
<!--adapted from original https://github.com/mavi888/memory_game_js-->
</body>
</html>
Share with Friends
Background position bottom center
ReplyDelete