memory restore
This commit is contained in:
Chris Edwards
parent
d975f22bfd
commit
4d6f76cda5
282
memory.html
Normal file
282
memory.html
Normal file
@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--All artwork done by Angela Tabor. Not to be used or reproduced without permission. -->
|
||||
<!--Card flip animation by Chris Theil-->
|
||||
<title>Test YOUR Memory</title>
|
||||
<meta name="theme-color" content="#00FFAA">
|
||||
<link rel="stylesheet" type="text/css" href="menu.css" />
|
||||
<link rel="icon" type="image/ico" href="mem.ico">
|
||||
<!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
|
||||
<style>
|
||||
#score{text-align:center; font-weight:bold; text-shadow: 25%;}
|
||||
.cells:hover{-moz-box-shadow: 7px 9px 10px #000;
|
||||
-webkit-box-shadow: 7px 9px 10px #000;
|
||||
box-shadow:7px 9px 10px #000;}
|
||||
img{height:150px; width:150px; border-radius:12%; }
|
||||
|
||||
|
||||
body{background-color:#bc9ad4}
|
||||
.cells{ border-radius:12%; -moz-box-shadow: 5px 7px 10px #000;
|
||||
-webkit-box-shadow: 5px 7px 10px #000;
|
||||
box-shadow: 5px 7px 10px #000; background-color:#79addd;}
|
||||
.pics{opacity:0;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0)
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-perspective: 1000;
|
||||
perspective: 1000;
|
||||
-webkit-animation: unflip .3s; /* Chrome, Safari, Opera */
|
||||
animation: unflip .3s;
|
||||
height:150px;
|
||||
width:150px;
|
||||
position:relative;}
|
||||
.pics2{opacity:1;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0)
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-perspective: 1000;
|
||||
perspective: 1000;
|
||||
-webkit-animation: flip .3s; /* Chrome, Safari, Opera */
|
||||
animation: flip .3s;
|
||||
height:150px;
|
||||
width:150px;
|
||||
position:relative;
|
||||
-moz-box-shadow: 0 0 10px #000;
|
||||
-webkit-box-shadow: 0 0 10px #000;
|
||||
box-shadow: 0 0 10px #000;}
|
||||
.pics3{opacity:1;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0)
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-perspective: 1000;
|
||||
perspective: 1000;
|
||||
-webkit-animation: flip .3s; /* Chrome, Safari, Opera */
|
||||
animation: flip .3s;
|
||||
height:150px;
|
||||
width:150px;
|
||||
position:relative;}
|
||||
|
||||
|
||||
|
||||
.center{ text-align:center; border-radius:10px; }
|
||||
#restart{text-align:center; border-radius:10px; }
|
||||
|
||||
/* Chrome, Safari, Opera */
|
||||
@-webkit-keyframes flip {
|
||||
0% { width: 0px; left: 0px;}
|
||||
50% { width: 0px;left:75px;}
|
||||
51%{background:yellow;}
|
||||
100%{width:150;left:0px;}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*Standard*/
|
||||
@keyframes flip {
|
||||
0% { width: 0px; left: 0px;}
|
||||
50% { width: 0px;left:75px;}
|
||||
51%{background:}
|
||||
100%{width:150;left:0px;}
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Opera */
|
||||
@-webkit-keyframes unflip {
|
||||
0% {opacity:1; width: 150; left: 0px;}
|
||||
50% {opacity:1; width: 0px;left:75px;}
|
||||
51%{opacity:0;background:;}
|
||||
100%{opacity:0;width:150;left:0px;}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Standard */
|
||||
@keyframes unflip {
|
||||
0% { opacity:1;width: 150; left: 0px;}
|
||||
50% { opacity:1;width: 0px;left:75px;}
|
||||
51%{opacity:0;background:;}
|
||||
100%{opacity:0;width:150;left:0px;}
|
||||
}
|
||||
|
||||
#game{ margin: 0px auto; border-style:none; border-collapse: separate; border-spacing: 7px 7px;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="nav_menu">
|
||||
</div>
|
||||
<script src="menu.js"></script>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div id="score">Number of turns: 0</div>
|
||||
<br />
|
||||
<div id="main_board"></div>
|
||||
<br />
|
||||
<div id="restart"><button onclick='drawboard(board)'>RESET BOARD</button></div>
|
||||
<div class="center"><button onclick="change_back_button()">Change Card Back</button></div>
|
||||
<div id="changeme" class="center"> <input type="radio" name="back" id="merpic" onclick="cleari()" value="mer" checked="checked">Mermaids!</input>
|
||||
<input type="radio" name="back" id="kawaiipic" onclick="cleari()" value="kiwi">Kawaii</input>
|
||||
|
||||
<input type="radio" name="back" id="superpic" onclick="cleari()" value="super">Super Females!</input>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i);
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry/i);
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||
},
|
||||
Opera: function() {
|
||||
return navigator.userAgent.match(/Opera Mini/i);
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
|
||||
},
|
||||
any: function() {
|
||||
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
|
||||
}
|
||||
};
|
||||
if ( isMobile.any() ) {
|
||||
//document.location = "memorymobile.html"
|
||||
|
||||
}
|
||||
|
||||
|
||||
var score = 0
|
||||
var rows, columns, j, i, p
|
||||
var board = new Array();
|
||||
var num_squares = 0
|
||||
var checked1
|
||||
var checked2
|
||||
var count1 = 1
|
||||
var src1, src2
|
||||
id1 = 0
|
||||
id2 = 0
|
||||
var k, game_end
|
||||
document.getElementById("changeme").style.opacity = "0"
|
||||
for (i=0; i<=19; i++) { board[i] = new Array(2);}
|
||||
|
||||
|
||||
rows = 5
|
||||
columns = 5
|
||||
function drawboard(ary){
|
||||
score = 0;
|
||||
document.getElementById("score").innerHTML = "Number of turns: "+score;
|
||||
document.getElementById("merpic").checked = "checked";
|
||||
for( i=0, j=10; i<=9; i++, j++){board[i][0] = '<img class="pics" id="img'+i+'" src="mem_pics/mer/mem_img'+i+'.jpeg" onclick="cSwap(this)" />'; board[i][1] = false;
|
||||
board[j][0] = '<img class="pics" id="img'+j+'" src="mem_pics/mer/mem_img'+i+'.jpeg" onclick="cSwap(this)" />'; board[j][1] = false;}
|
||||
console.log(board);
|
||||
board.shuffle();
|
||||
console.log(board.length);
|
||||
document.getElementById("main_board").innerHTML = ""
|
||||
str = ""
|
||||
str += '<div id="game_div"><table id="game" ">'
|
||||
|
||||
for(p = 1, q=0; p < rows; p++){
|
||||
|
||||
str += '<tr>'
|
||||
for (j = 0; j < columns; q++,j++){
|
||||
str += '<td class="cells" id="cell'+q+'">' +ary[q][0]+'</td>';
|
||||
|
||||
}
|
||||
str += '</tr>'
|
||||
|
||||
}
|
||||
|
||||
str += '</table></div>'
|
||||
document.getElementById("main_board").innerHTML =str
|
||||
|
||||
}
|
||||
|
||||
Array.prototype.shuffle = function() {
|
||||
var input = this;
|
||||
for (var i = input.length-1; i >=0; i--) {
|
||||
var randomIndex = Math.floor(Math.random()*(i+1));
|
||||
var itemAtIndex = input[randomIndex];
|
||||
input[randomIndex] = input[i];
|
||||
input[i] = itemAtIndex; }
|
||||
|
||||
return input;
|
||||
|
||||
}
|
||||
function cSwap(cell){
|
||||
|
||||
if (cell.className != "pics3"){
|
||||
if (cell.className == "pics" && num_squares <2 )
|
||||
{ cell.className = "pics2"; num_squares++ ; }
|
||||
else if (cell.className == "pics2")
|
||||
{cell.className = "pics"; num_squares--;if (num_squares ==2) num_squares = 0; };
|
||||
for(i=0; i<=board.length-1; i++) {
|
||||
|
||||
if (document.getElementById('img'+i).className == "pics2") {board[i][1] = true; }
|
||||
if (document.getElementById('img'+i).className == "pics") board[i][1] = false;
|
||||
if (document.getElementById('img'+i).className == "pics3") board[i][1] = false;
|
||||
|
||||
}
|
||||
if (num_squares == 2){
|
||||
score++
|
||||
k = 0;
|
||||
for (i=0; i<board.length; i++){
|
||||
|
||||
if (board[i][1] == true) {
|
||||
if (k == 0) {src1 = document.getElementById('img'+i).src; id1= i ; console.log("src1 "+k)}
|
||||
if (k == 1) {src2 = document.getElementById('img'+i).src; id2 = i ;console.log("src2 "+k)}
|
||||
k++;console.log("k"+k)
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('img'+id1).removeAttribute("onclick");
|
||||
document.getElementById('img'+id2).removeAttribute("onclick")
|
||||
//console.log(document.getElementById('img'+id2))
|
||||
if (src1 == src2) {document.getElementById('img'+id1).className = 'pics3'; document.getElementById('img'+id2).className = 'pics3'; num_squares = 0; src1 = ""; src2 = ""; document.getElementById('img'+id1).setAttribute("onclick", "cSwap(this)");document.getElementById('img'+id2).setAttribute("onclick", "cSwap(this)")}
|
||||
if (src1 != src2) {setTimeout(function(){ if (document.getElementById('img'+id1).className == 'pics2' && document.getElementById('img'+id2).className == 'pics2' ){ document.getElementById('img'+id1).className = 'pics'; document.getElementById('img'+id2).className = 'pics'; num_squares = 0; src1 = ""; src2 = ""; document.getElementById('img'+id1).setAttribute("onclick", "cSwap(this)");document.getElementById('img'+id2).setAttribute("onclick", "cSwap(this)");}}, 750)
|
||||
}
|
||||
|
||||
}
|
||||
game_end = 0;
|
||||
for (i=0; i<board.length; i++){
|
||||
if (document.getElementById('img'+i).className == "pics3") game_end++;}
|
||||
if (game_end == 20) alert("You Win!");
|
||||
document.getElementById("score").innerHTML = "Number of turns: "+score
|
||||
//alert(game_end)
|
||||
|
||||
}
|
||||
}
|
||||
console.log(document.getElementById("changeme").style.opacity+" opacity")
|
||||
function change_back_button(){
|
||||
console.log(document.getElementById("changeme").style.opacity+" opacity")
|
||||
if (document.getElementById("changeme").style.opacity == "0") document.getElementById("changeme").style.opacity = "1"
|
||||
else document.getElementById("changeme").style.opacity = "0"}
|
||||
|
||||
function cleari(){
|
||||
if (document.getElementById("merpic").checked == true) {for( i=0, j=10; i<=9; i++, j++){
|
||||
document.getElementById('img'+i).src = 'mem_pics/mer/mem_img'+i+'.jpeg'; document.getElementById('img'+j).src = 'mem_pics/mer/mem_img'+i+'.jpeg'}}
|
||||
if (document.getElementById("kawaiipic").checked == true){for( i=0, j=10; i<=9; i++, j++){
|
||||
document.getElementById('img'+i).src = 'mem_pics/kawaii/mem_img'+i+'.jpeg'; document.getElementById('img'+j).src = 'mem_pics/kawaii/mem_img'+i+'.jpeg'}
|
||||
}
|
||||
if (document.getElementById("superpic").checked == true){for( i=0, j=10; i<=9; i++, j++){
|
||||
document.getElementById('img'+i).src = 'mem_pics/super/mem_img'+i+'.jpeg'; document.getElementById('img'+j).src = 'mem_pics/super/mem_img'+i+'.jpeg'}
|
||||
}
|
||||
}
|
||||
drawboard(board);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user