Memory Card Game P’Getty Edition

✨ นายบารเมษฐ สายจันยูร

<!DOCTYPE html>
<html>
<head>
<style>
  body{
    background-image: url("https://images.wallpapersden.com/image/download/4k-league-of-legends-2020_a21qbmqUmZqaraWkpJRmbmdlrWZlbWU.jpg")
  }
  h1{
    font-family: 'Russo One', sans-serif;
    text-align: center;
  }
  h3{
    font-family: 'Russo One', sans-serif;
    text-align: center;
  }
  div#memory_board{
	width:800px;
	height:540px;
	padding:24px;
	margin:0px auto;
}
div#memory_board > div{
	background: url(https://cdn.discordapp.com/attachments/806508680715042837/806511755975065640/P_get_fix_smaller.png) no-repeat;
	border:gold 1px solid;
	width:71px;
	height:71px;
	float:left;
	margin:10px;
	padding:20px;
	font-size:64px;
	cursor:pointer;
	text-align:center;
}
  
</style>
<script>
// Scripted By Adam Khoury in connection with the following video tutorial:
// http://www.youtube.com/watch?v=c_ohDPWmsM0
var memory_array = ['$','$','%','%','!','!','#','#','&','&','<>','<>','^','^','+','+','?','?','*','*','|','|','W','W'];
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 = '#79FDFF';
		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(https://cdn.discordapp.com/attachments/806508680715042837/806511755975065640/P_get_fix_smaller.png) no-repeat';
            	    tile_1.innerHTML = "";
				    tile_2.style.background = 'url(https://cdn.discordapp.com/attachments/806508680715042837/806511755975065640/P_get_fix_smaller.png) no-repeat';
            	    tile_2.innerHTML = "";
				    // Clear both arrays
				    memory_values = [];
            	    memory_tile_ids = [];
				}
				setTimeout(flip2Back, 700);
			}
		}
	}
}
</script>
</head>
<body>
  <h1>Memory Card Game</h1>
  <h3>P'Getty Pocket Edition</h3>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>