chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix memory

Browse Source
This commit is contained in:
Chris Edwards 2021-02-21 19:19:46 -05:00
parent 4d6f76cda5
commit 0a5c22f313
56 changed files with 321 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
memory.html
View File

@ -1,282 +0,0 @@
<!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>

189
memory/index.html
View File

@ -5,41 +5,157 @@
<!--Card flip animation by Chris Theil--> <!--Card flip animation by Chris Theil-->
<title>Test YOUR Memory</title> <title>Test YOUR Memory</title>
<meta name="theme-color" content="#00FFAA"> <meta name="theme-color" content="#00FFAA">
<link rel="stylesheet" type="text/css" href="../menu.css" /> <link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="icon" type="image/ico" href="mem.ico"> <link rel="icon" type="image/ico" href="mem.ico">
<script src="menu.js"></script> <!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
<style> <style>
#mainboard{float:left;} #score{text-align:center; font-weight:bold; text-shadow: 25%;}
#score{float:right;} .cells:hover{-moz-box-shadow: 7px 9px 10px #000;
.cells:hover{-moz-box-shadow: 0 0 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; -webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;} box-shadow: 0 0 10px #000;}
img{height:150px; width:150px; } .pics3{opacity:1;
td{background-color:blue; height:80px; width:80px } -webkit-transform: translateZ(0);
body{background-color:#00FFAA} transform: translateZ(0)
.cells{height:150px; -webkit-backface-visibility: hidden;
width:150px; 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;}
} }
.pics{opacity:0;}
.pics2{opacity:1;}
.pics3{opacity:1;} /*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;}
#game{ margin: 0px auto;} }
/*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> </style>
</head> </head>
<body> <body>
<div id="nav_menu"> <div id="nav_menu">
</div> </div>
<script src="../menu.js"></script> <script src="menu.js"></script> 
<br /> <br />
<br /> <br />
<br /> <br />
<div id="score">Number of turns:</div> <div id="score">Number of turns: 0</div>
<br />
<div id="main_board"></div> <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"> <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 rows, columns, j, i, p
var board = new Array(); var board = new Array();
var num_squares = 0 var num_squares = 0
@ -50,23 +166,24 @@ var src1, src2
id1 = 0 id1 = 0
id2 = 0 id2 = 0
var k, game_end var k, game_end
var score =0 document.getElementById("changeme").style.opacity = "0"
for (i=0; i<=19; i++) { board[i] = new Array(2);} for (i=0; i<=19; i++) { board[i] = new Array(2);}
rows = 5 rows = 5
columns = 5 columns = 5
function drawboard(ary){ function drawboard(ary){
score = 0;
for( i=0, j=10; i<=9; i++, j++){board[i][0] = '<img class="pics" id="img'+i+'" src="mer/mem_img'+i+'.jpg" onclick="cSwap(this)" />'; board[i][1] = false; document.getElementById("score").innerHTML = "Number of turns: "+score;
board[j][0] = '<img class="pics" id="img'+j+'" src="mer/mem_img'+i+'.jpg" onclick="cSwap(this)" />'; board[j][1] = false;} 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); console.log(board);
board.shuffle(); board.shuffle();
console.log(board.length); console.log(board.length);
document.getElementById("main_board").innerHTML = "" document.getElementById("main_board").innerHTML = ""
str = "" str = ""
str += '<div id="game_div"><table id="game" style=" color:#1A1A1A" border="5px" ">' str += '<div id="game_div"><table id="game" ">'
for(p = 1, q=0; p < rows; p++){ for(p = 1, q=0; p < rows; p++){
@ -96,6 +213,7 @@ Array.prototype.shuffle = function() {
} }
function cSwap(cell){ function cSwap(cell){
if (cell.className != "pics3"){ if (cell.className != "pics3"){
if (cell.className == "pics" && num_squares <2 ) if (cell.className == "pics" && num_squares <2 )
{ cell.className = "pics2"; num_squares++ ; } { cell.className = "pics2"; num_squares++ ; }
@ -109,6 +227,7 @@ for(i=0; i<=board.length-1; i++) {
} }
if (num_squares == 2){ if (num_squares == 2){
score++
k = 0; k = 0;
for (i=0; i<board.length; i++){ for (i=0; i<board.length; i++){
@ -121,7 +240,7 @@ k++;console.log("k"+k)
document.getElementById('img'+id1).removeAttribute("onclick"); document.getElementById('img'+id1).removeAttribute("onclick");
document.getElementById('img'+id2).removeAttribute("onclick") document.getElementById('img'+id2).removeAttribute("onclick")
console.log(document.getElementById('img'+id2)) //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) {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) 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)
} }
@ -133,9 +252,25 @@ if (document.getElementById('img'+i).className == "pics3") game_end++;}
if (game_end == 20) alert("You Win!"); if (game_end == 20) alert("You Win!");
document.getElementById("score").innerHTML = "Number of turns: "+score document.getElementById("score").innerHTML = "Number of turns: "+score
//alert(game_end) //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); drawboard(board);
</script> </script>

0
mem_pics/kawaii/IMG_20150723_001456-02.jpeg → memory/mem_pics/kawaii/IMG_20150723_001456-02.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 3.1 MiB

0
mem_pics/kawaii/IMG_20150723_001508-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001508-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

0
mem_pics/kawaii/IMG_20150723_001523-01 (2).jpeg → memory/mem_pics/kawaii/IMG_20150723_001523-01 (2).jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

0
mem_pics/kawaii/IMG_20150723_001523-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001523-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

0
mem_pics/kawaii/IMG_20150723_001531-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001531-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 MiB

After

Width:  |  Height:  |  Size: 3.2 MiB

0
mem_pics/kawaii/IMG_20150723_001623-01 (2).jpeg → memory/mem_pics/kawaii/IMG_20150723_001623-01 (2).jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

0
mem_pics/kawaii/IMG_20150723_001623-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001623-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

0
mem_pics/kawaii/IMG_20150723_001633-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001633-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

0
mem_pics/kawaii/IMG_20150723_001640-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001640-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

0
mem_pics/kawaii/IMG_20150723_001703-01 (2).jpeg → memory/mem_pics/kawaii/IMG_20150723_001703-01 (2).jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

0
mem_pics/kawaii/IMG_20150723_001703-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001703-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

0
mem_pics/kawaii/IMG_20150723_001712-01.jpeg → memory/mem_pics/kawaii/IMG_20150723_001712-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 MiB

After

Width:  |  Height:  |  Size: 4.2 MiB

0
mem_pics/kawaii/mem_img0.jpeg → memory/mem_pics/kawaii/mem_img0.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
mem_pics/kawaii/mem_img1.jpeg → memory/mem_pics/kawaii/mem_img1.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
mem_pics/kawaii/mem_img2.jpeg → memory/mem_pics/kawaii/mem_img2.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

0
mem_pics/kawaii/mem_img3.jpeg → memory/mem_pics/kawaii/mem_img3.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
mem_pics/kawaii/mem_img4.jpeg → memory/mem_pics/kawaii/mem_img4.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
mem_pics/kawaii/mem_img5.jpeg → memory/mem_pics/kawaii/mem_img5.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
mem_pics/kawaii/mem_img6.jpeg → memory/mem_pics/kawaii/mem_img6.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
mem_pics/kawaii/mem_img7.jpeg → memory/mem_pics/kawaii/mem_img7.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
mem_pics/kawaii/mem_img8.jpeg → memory/mem_pics/kawaii/mem_img8.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
mem_pics/kawaii/mem_img9.jpeg → memory/mem_pics/kawaii/mem_img9.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
mem_pics/mer/IMG_20150708_002614-01.jpeg → memory/mem_pics/mer/IMG_20150708_002614-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

0
mem_pics/mer/IMG_20150708_002628-01.jpeg → memory/mem_pics/mer/IMG_20150708_002628-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

0
mem_pics/mer/IMG_20150708_002645-01.jpeg → memory/mem_pics/mer/IMG_20150708_002645-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

0
mem_pics/mer/IMG_20150708_002700-01.jpeg → memory/mem_pics/mer/IMG_20150708_002700-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

0
mem_pics/mer/IMG_20150708_002713-01.jpeg → memory/mem_pics/mer/IMG_20150708_002713-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

0
mem_pics/mer/IMG_20150708_002736-01.jpeg → memory/mem_pics/mer/IMG_20150708_002736-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

0
mem_pics/mer/IMG_20150708_002751-01.jpeg → memory/mem_pics/mer/IMG_20150708_002751-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

0
mem_pics/mer/IMG_20150708_002802-01.jpeg → memory/mem_pics/mer/IMG_20150708_002802-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

0
mem_pics/mer/IMG_20150708_002812-01.jpeg → memory/mem_pics/mer/IMG_20150708_002812-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

0
mem_pics/mer/IMG_20150708_002823-01.jpeg → memory/mem_pics/mer/IMG_20150708_002823-01.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

0
mem_pics/mer/mem_img0.jpeg → memory/mem_pics/mer/mem_img0.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
mem_pics/mer/mem_img1.jpeg → memory/mem_pics/mer/mem_img1.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
mem_pics/mer/mem_img2.jpeg → memory/mem_pics/mer/mem_img2.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
mem_pics/mer/mem_img3.jpeg → memory/mem_pics/mer/mem_img3.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

0
mem_pics/mer/mem_img4.jpeg → memory/mem_pics/mer/mem_img4.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
mem_pics/mer/mem_img5.jpeg → memory/mem_pics/mer/mem_img5.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

0
mem_pics/mer/mem_img6.jpeg → memory/mem_pics/mer/mem_img6.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
mem_pics/mer/mem_img7.jpeg → memory/mem_pics/mer/mem_img7.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

0
mem_pics/mer/mem_img8.jpeg → memory/mem_pics/mer/mem_img8.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
mem_pics/mer/mem_img9.jpeg → memory/mem_pics/mer/mem_img9.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
mem_pics/super/mem_img0.jpeg → memory/mem_pics/super/mem_img0.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
mem_pics/super/mem_img1.jpeg → memory/mem_pics/super/mem_img1.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
mem_pics/super/mem_img2.jpeg → memory/mem_pics/super/mem_img2.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

0
mem_pics/super/mem_img3.jpeg → memory/mem_pics/super/mem_img3.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
mem_pics/super/mem_img4.jpeg → memory/mem_pics/super/mem_img4.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
mem_pics/super/mem_img5.jpeg → memory/mem_pics/super/mem_img5.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
mem_pics/super/mem_img6.jpeg → memory/mem_pics/super/mem_img6.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
mem_pics/super/mem_img7.jpeg → memory/mem_pics/super/mem_img7.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
mem_pics/super/mem_img8.jpeg → memory/mem_pics/super/mem_img8.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
mem_pics/super/mem_img9.jpeg → memory/mem_pics/super/mem_img9.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

147
memory/memoryold.html Normal file
View File

@ -0,0 +1,147 @@
<!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">
<script src="menu.js"></script>
<style>
#mainboard{float:left;}
#score{float:right;}
.cells:hover{-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;}
img{height:150px; width:150px; }
td{background-color:blue; height:80px; width:80px }
body{background-color:#00FFAA}
.cells{height:150px;
width:150px;
}
.pics{opacity:0;}
.pics2{opacity:1;}
.pics3{opacity:1;}
#game{ margin: 0px auto;}
</style>
</head>
<body>
<div id="nav_menu">
</div>
<script src="../menu.js"></script>
<br />
<br />
<br />
<div id="score">Number of turns:</div>
<div id="main_board"></div>
<script type="text/javascript">
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
var score =0
for (i=0; i<=19; i++) { board[i] = new Array(2);}
rows = 5
columns = 5
function drawboard(ary){
for( i=0, j=10; i<=9; i++, j++){board[i][0] = '<img class="pics" id="img'+i+'" src="mer/mem_img'+i+'.jpg" onclick="cSwap(this)" />'; board[i][1] = false;
board[j][0] = '<img class="pics" id="img'+j+'" src="mer/mem_img'+i+'.jpg" 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" style=" color:#1A1A1A" border="5px" ">'
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){
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)
}
}
drawboard(board);
</script>
</body>
</html>

4
menu.js
View File

@ -22,8 +22,8 @@ function closemenu1() {
var sites = [ var sites = [
["/", "Home"], ["/", "Home"],
["/tictac/", "Tic Tac Touch"], ["/tictac/", "Tic Tac Touch"],
["/bingo/index.html", "Bingo!"], ["/bingo/", "Bingo!"],
["/memory/index.html", "Memory"], ["/memory/", "Memory"],
["/yatzee/", "Yatzee!"], ["/yatzee/", "Yatzee!"],
["/youtube_convert/", "Youtube Converter"], ["/youtube_convert/", "Youtube Converter"],
["/binary/", "Binary Converter"], ["/binary/", "Binary Converter"],