<html>
<head>
<title>Canvas HTML Element Memories Game Tutorial ... RJM Programming ... June 2014 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<script language="JavaScript">
var score = 0.0;
var goes = 0.0;
var realgoes = 0;
var to1 = "";
var to2 = "";

var eventname = 'click';

var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /Safari/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /Andrxoid/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

//if (isiPad) eventname = 'touchdown';

var numcorrect = 0;
var alreadypickedlist = ";";

var to1i = -1;
var to1o = null;
var to1x = 0;
var to1y = 0;

var spareto1x = 0;
var spareto1y = 0;
var sparegoodx = 0;
var sparegoody = 0;
var sparei = 0;
var spareto1o = null;

var playerturn = 0;
var numplayers = 2;

var pnames = ["Player1", "Player2"];

var ptricks = [0, 0];
var pscores = [0, 0];

function andthen() {
if (isiPad) {
context.drawImage(spareto1o, spareto1x, spareto1y);
context.drawImage(imgsover[sparei], sparegoodx, sparegoody);
}
}

function alertmaybe(txt) {
if (isiPad) {
document.getElementById('myh1').innerHTML = txt;
if (txt.indexOf("Bad luck") != -1) {
setTimeout(andthen, 1000);
}
} else {
alert(txt);
}
}

</script>
</head>
<body align='center'>
<h1 align='center' id='myh1'>Select player names & click anywhere on card to shuffle & start the memories card game.</h1>
<div id='oldidea' style='display:none;' align='center'>
<p>Score <span style='color:green;' id="score">0</span> achieved via <span style='color:red;' id="goes">0</span> goes and your current card criteria guess is <select style='background-color: pink;' id="guess"><option value="">Your guess selection below ...</option><option value="hdr.">Red</option><option value="h"> Hearts</option><option value="d"> Diamonds</option><option value="csb.">Black</option><option value="s"> Spades</option><option value="c"> Clubs</option><option value="01">  Ace</option><option value="02">  2</option><option value="03">  3</option><option value="04">  4</option><option value="05">  5</option><option value="06">  6</option><option value="07">  7</option><option value="08">  8</option><option value="09">  9</option><option value="10">  10</option><option value="11">  Jack</option><option value="12">  Queen</option><option value="13">  King</option></select></p>
</div>
<div id='pnames' align='center' >
<table border=2 cellpadding=5 cellspacing=5 align='center'>
<tr style="background-color: pink;" id='trh'>
<th>Player1 Name</th><th>Player1 "Tricks"</th><th>Player1 Games Won</th><th> ... Vs ...</th><th>Player2 Name</th><th>Player2 "Tricks"</th><th>Player2 Games Won</th>
</tr>
<tr id='trd'>
<td><input id='i0' type="text" onchange=" pnames[0] = this.value; " value="Player1" style=' background-color: white;'></input></td><td id='p1t'>0</td><td id='p1s'>0</td><td> ... Vs ...</td><td><input id='i1' type="text" onchange=" pnames[1] = this.value; " value="Player2" style=' background-color: white;'></input></td><td id='p2t'>0</td><td id='p2s'>0</td><td id="status" style="display:none;"></td>
</tr
</table>
</div>
<div id='myc' align='center'>
<br>
<canvas align='center' style='border: 5px solid green; background: url("images/back01.gif") #ffffff repeat; opacity: 0.3;' title='Select player names & click anywhere on card table to shuffle the cards & start the memories card game.' id="canvaselement" width="1150" height="470" style="border: 1px solid green;" />
</div>
<script language="JavaScript">

var toggle = 1;
var goodx = 10;
var goody = 10;
var inidone = 0;
var curcard = 0;

var imgs = new Array(52);
var imgsover = new Array(52);

var worthof = new Array(0.0, 4.0, 13.0, 52.0, 2.0);

var scoretoget = 200;
var guessvalue = 0.0;
var usedcards = [];
var deckcards = [];
var sdeckcards = [];
var defcard = "images/back01.gif";
var mypictures = new Array("images/01c.gif",
"images/01d.gif",
"images/01h.gif",
"images/01s.gif",
"images/02c.gif",
"images/02d.gif",
"images/02h.gif",
"images/02s.gif",
"images/03c.gif",
"images/03d.gif",
"images/03h.gif",
"images/03s.gif",
"images/04c.gif",
"images/04d.gif",
"images/04h.gif",
"images/04s.gif",
"images/05c.gif",
"images/05d.gif",
"images/05h.gif",
"images/05s.gif",
"images/06c.gif",
"images/06d.gif",
"images/06h.gif",
"images/06s.gif",
"images/07c.gif",
"images/07d.gif",
"images/07h.gif",
"images/07s.gif",
"images/08c.gif",
"images/08d.gif",
"images/08h.gif",
"images/08s.gif",
"images/09c.gif",
"images/09d.gif",
"images/09h.gif",
"images/09s.gif",
"images/10c.gif",
"images/10d.gif",
"images/10h.gif",
"images/10s.gif",
"images/11c.gif",
"images/11d.gif",
"images/11h.gif",
"images/11s.gif",
"images/12c.gif",
"images/12d.gif",
"images/12h.gif",
"images/12s.gif",
"images/13c.gif",
"images/13d.gif",
"images/13h.gif",
"images/13s.gif"
);
var thispicture = 0;

var elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
var context = elem.getContext('2d');
var elements = [];
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

shuffle();

// Add event listener for `click` events.
elem.addEventListener(eventname, function(event) {
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
var x = event.pageX - elemLeft;
var y = event.pageY - elemTop;

if (toggle == 0) {
curcard = -99;
goodx=10;
goody=10;
for (var iijk=0; iijk<imgsover.length; iijk++) {
if (curcard == -99 && alreadypickedlist.indexOf(";" + iijk + ";") == -1) {
//alert("iijk=" + iijk + " goodx+=" + (goodx + imgsover[iijk].width) + " goody+=" + (goody + imgsover[iijk].height) + " x=" + x + " y=" + y);
if (iijk != to1i && (x >= goodx && x <= eval(goodx + imgsover[iijk].width)) && (y >= goody && y <= eval(goody + imgsover[iijk].height))) {
curcard = eval(0 - iijk);
context.drawImage(imgs[iijk],goodx,goody);
//alert(sdeckcards[iijk]);
if (to1 == "") {
to1o = imgsover[iijk];
to1 = sdeckcards[iijk];
to1x = goodx;
to1y = goody;
to1i = iijk;
} else if (to2 == "") {
if (to1.substring(0,2) == sdeckcards[iijk].substring(0,2)) { // is a match
if (playerturn == 0) {
document.getElementById('p1t').innerHTML = 1 + eval(document.getElementById('p1t').innerHTML);
} else {
document.getElementById('p2t').innerHTML = 1 + eval(document.getElementById('p2t').innerHTML);
}
alreadypickedlist = alreadypickedlist + iijk + ";" + to1i + ";";
alertmaybe("Great, " + pnames[playerturn] + "! Still your go.");
to1 = "";
to1i = -98;
numcorrect = eval(numcorrect + 2);
if (numcorrect >= 52) {
if (eval(document.getElementById('p1t').innerHTML) > eval(document.getElementById('p2t').innerHTML)) {
document.getElementById('p1s').innerHTML = 1 + eval(document.getElementById('p1s').innerHTML);
alertmaybe("And the winner is " + pnames[0]);
} else if (eval(document.getElementById('p2t').innerHTML) > eval(document.getElementById('p1t').innerHTML)) {
document.getElementById('p2s').innerHTML = 1 + eval(document.getElementById('p2s').innerHTML);
alertmaybe("And the winner is " + pnames[1]);
} else {
document.getElementById('p1s').innerHTML = 1 + eval(document.getElementById('p1s').innerHTML);
document.getElementById('p2s').innerHTML = 1 + eval(document.getElementById('p2s').innerHTML);
alertmaybe("And the winners are " + pnames[0] + " and " + pnames[1]);
}
document.getElementById('p1t').innerHTML = "0";
document.getElementById('p2t').innerHTML = "0";
alreadypickedlist = ";";
toggle = 1;
elem.width = elem.width;
elements = [];
curcard = 0;
deckcards = [];
usedcards = [];
shuffle();
playerturn = 0;
}
} else {
if (playerturn == 0) {
document.getElementById('i0').style.backgroundColor = 'white';
document.getElementById('i1').style.backgroundColor = 'yellow';
playerturn = 1;
} else {
document.getElementById('i1').style.backgroundColor = 'white';
document.getElementById('i0').style.backgroundColor = 'yellow';
playerturn = 0;
}
if (isiPad) {
spareto1o = to1o;
spareto1x = to1x;
spareto1y = to1y;
sparei = iijk;
sparegoodx = goodx;
sparegoody = goody;
}
alertmaybe("Bad luck, " + pnames[eval(1 - playerturn)] + "! Now it's " + pnames[playerturn] + "'s go.");
if (!isiPad) {
context.drawImage(to1o, to1x, to1y);
context.drawImage(imgsover[iijk], goodx, goody);
}
to1 = "";
to1i = -97;
}
}
}
}

if ((goodx + imgsover[iijk].width + imgsover[iijk].width + 10) > 1150) {
goodx = 10;
goody = goody + imgsover[iijk].height + 10;
} else {
goodx = goodx + imgsover[iijk].width + 10;
}
}

}

if (curcard != -99) {

x = goodx;
y = goody;

var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;

var img=document.getElementById(deckcards[curcard].replace("images/","").replace(".gif",""));
var imgover=document.getElementById(defcard.replace("images/","").replace(".gif",""));

for (var kji=0; kji<52; kji++) imgsover[kji] = imgover;

imgs[0] = img;
//try {
sdeckcards[0] = deckcards[curcard].replace("images/","").replace(".gif","");
//} catch (exx) {
//sdeckcards[0] = deckcards[Math.abs(curcard)].replace("images/","").replace(".gif","");
//}
var sofar = ";" + curcard + ";";
var rd = Math.floor((Math.random()*52)+0);
for (var kjki=1; kjki<52; kjki++) {
while (sofar.indexOf(";" + rd + ";") != -1) {
rd = Math.floor((Math.random()*52)+0);
}
imgs[kjki] = document.getElementById(deckcards[rd].replace("images/","").replace(".gif",""));
sdeckcards[kjki] = deckcards[rd].replace("images/","").replace(".gif","");
sofar = sofar + rd + ";";
}

if (toggle == 0) {
document.getElementById('myh1').innerHTML = 'Select player names & click anywhere on card to shuffle & start the memories card game ... ';
//context.drawImage(imgover,x,y);
} else {
document.getElementById('myh1').innerHTML = 'Double click cards and try to match denomination to accumulate "tricks"... most tricks wins';
//goes = goes + 1.0;
//realgoes = realgoes + 1.0;
//score = score + assess(curcard);
//updatescore();
//if (score >= 200) {
// alert('Congratulations! You got there in ' + goes + ' goes. Is this your best?');
// elem.width = elem.width;
// elements = [];
// curcard = 0;
// deckcards = [];
// usedcards = [];
// window.location = './memories.html';
//}

if (1 == 2) {
// Add card
context.drawImage(img,x,y);

if ((goodx + img.width + img.width + 10) > 1150) {
goodx = 10;
goody = goody + img.height + 10;
} else {
goodx = goodx + img.width + 10;
}
} else {
for (var ijk=0; ijk<imgsover.length; ijk++) {
//alert("imgsover.length=" + imgsover.length + " and ijk=" + ijk);
// Add card
context.drawImage(imgsover[ijk],x,y);
//context.drawImage(imgs[ijk],x,y);

if ((goodx + imgsover[ijk].width + imgsover[ijk].width + 10) > 1150) {
goodx = 10;
goody = goody + imgsover[ijk].height + 10;
} else {
goodx = goodx + imgsover[ijk].width + 10;
}
x = goodx;
y = goody;
}
}

goodx = 10;
goody = 10;
playerturn = Math.floor((Math.random()*2)+0);
if (playerturn == 1) {
document.getElementById('i0').style.backgroundColor = 'white';
document.getElementById('i1').style.backgroundColor = 'yellow';
} else {
playerturn = 0;
document.getElementById('i1').style.backgroundColor = 'white';
document.getElementById('i0').style.backgroundColor = 'yellow';
}

if (isiPad && 1 == 2) {
if (document.getElementById('trh').innerHTML.indexOf('thstatus') == -1) {
document.getElementById('trh').innerHTML = document.getElementById('trh').innerHTML + "<th id='thstatus'> ... and ... Status</th>";
document.getElementById('trd').innerHTML = document.getElementById('trd').innerHTML + "<td id='status'></td>";
}
}
alertmaybe("It's first turn to " + pnames[playerturn]);

usedcards[curcard] = deckcards[curcard];

curcard = curcard + 1;
if (curcard >= 52) {
elem.width = elem.width;
elements = [];
curcard = 0;
deckcards = [];
usedcards = [];
var wl='';
if (score.toString().indexOf(".") == -1) {
if (goes.toString().indexOf(".") == -1) {
wl = wl + './memories.html?score=' + score + '.0&goes=' + goes + '.0';
} else {
wl = wl + './memories.html?score=' + score + '.0&goes=' + goes;
}
} else {
if (goes.toString().indexOf(".") == -1) {
wl = wl + './memories.html?score=' + score + '&goes=' + goes + '.0';
} else {
wl = wl + './memories.html?score=' + score + '&goes=' + goes;
}
}
window.location = wl;
}
}
if (curcard >= 0) toggle = 1 - toggle;
}

goodx = 10;
goody = 10;

}, false);

function longname(inn) {
var outn=inn;
outn = outn.replace("s", " of Spades");
outn = outn.replace("h", " of Hearts");
outn = outn.replace("c", " of Clubs");
if (outn.length <= 3) outn = outn.replace("d", " of Diamonds");
outn = outn.replace("01", "Ace");
outn = outn.replace("02", "Two");
outn = outn.replace("03", "Three");
outn = outn.replace("04", "Four");
outn = outn.replace("05", "Five");
outn = outn.replace("06", "Six");
outn = outn.replace("07", "Seven");
outn = outn.replace("08", "Eight");
outn = outn.replace("09", "Nine");
outn = outn.replace("10", "Ten");
outn = outn.replace("11", "Jack");
outn = outn.replace("12", "Queen");
outn = outn.replace("13", "King");
return outn;
}

function shuffle() {
// Shuffle cards
var ii, jj, kk=0, mm, found;
var ourgs = document.getElementById('guess');

for (ii=0; ii<52; ii++) {
found = true;
while (found) {
mm = Math.floor((Math.random()*52)+0);
found = false;
for (jj=0; jj<usedcards.length; jj++) {
if (usedcards[jj] == mypictures[mm]) found = true;
}
}
deckcards[kk] = mypictures[mm];
usedcards[kk] = mypictures[mm];
if (inidone == 0) {
ourgs.innerHTML = ourgs.innerHTML + '<option value="' + mypictures[ii].replace("images/","").replace(".gif","") + '">   ' + longname(mypictures[ii].replace("images/","").replace(".gif","")) + '</option>';
document.write('<img src="' + mypictures[mm] + '" id="' + mypictures[mm].replace("images/","").replace(".gif","") + '" style="display:none;" title="' + mypictures[mm].replace("images/","").replace(".gif","") + '"></img>');
}
kk = kk+1;
}
usedcards = [];
if (inidone == 0) document.write('<img src="' + defcard + '" id="' + defcard.replace("images/","").replace(".gif","") + '" style="display:none;" title="' + defcard.replace("images/","").replace(".gif","") + '"></img>');

inidone = 1;
}

//updatescore();
</script>

</body>
</html>