268 lines
8.8 KiB
HTML
268 lines
8.8 KiB
HTML
<!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/menu.css" />
|
||
<link rel="icon" type="image/ico" href="mem.ico">
|
||
<script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||
|
||
<!--<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%; }
|
||
|
||
img {
|
||
user-drag: none;
|
||
user-select: none;
|
||
-moz-user-select: none;
|
||
-webkit-user-drag: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
}
|
||
|
||
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="navContainer"></div>
|
||
<script defer src="/menu/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 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>
|