<html>
<head>
<title>Canvas HTML Element Memories (Drag and Drop) Game Tutorial ... RJM Programming ... June 2015 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<script language="JavaScript">

var dotext='.gif';
if (document.URL.toLowerCase().indexOf('=frog') != -1 || document.URL.toLowerCase().indexOf('=toad') != -1) {
dotext='.jpeg';
}

var score = 0.0;
var goes = 0.0;
var realgoes = 0;
var to1 = "";
var to2 = "";

var rectc=null;

var cfttoggle=0;
var kermitisms=["It's not easy " + String.fromCharCode(10) + " being green.","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","Life's like a movie, write your own ending. Keep believing, keep pretending.","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","Just because you haven't found your talent yet, doesn't mean you don't have one.","If you have to eat two frogs, eat the ugliest one first.","Here's one other thing that I think every person or frog needs to be creative: friends.","I promised " + String.fromCharCode(10) + " me.","Time's fun when you're having " + String.fromCharCode(10) + " flies!","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"It's not easy " + String.fromCharCode(10) + " being green","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","Life's like a movie, write your own ending. Keep believing, keep pretending","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","Just because you haven't found your talent yet, doesn't mean you don't have one","If you have to eat two frogs, eat the ugliest one first","Here's one other thing that I think every person or frog needs to be creative: friends","I promised " + String.fromCharCode(10) + " me","Time's fun when you're having " + String.fromCharCode(10) + " flies","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","life's like a movie, write your own ending. Keep believing, keep pretending","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","just because you haven't found your talent yet, doesn't mean you don't have one","if you have to eat two frogs, eat the ugliest one first","here's one other thing that I think every person or frog needs to be creative: friends","i promised " + String.fromCharCode(10) + " me","time's fun when you're having " + String.fromCharCode(10) + " flies","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green.","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","life's like a movie, write your own ending. Keep believing, keep pretending.","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","just because you haven't found your talent yet, doesn't mean you don't have one.","if you have to eat two frogs, eat the ugliest one first.","here's one other thing that I think every person or frog needs to be creative: friends.","i promised " + String.fromCharCode(10) + " me.","time's fun when you're having " + String.fromCharCode(10) + " flies!","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green.","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","- Life's like a movie, write your own ending. Keep believing, keep pretending.","- Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","- Just because you haven't found your talent yet, doesn't mean you don't have one.","- If you have to eat two frogs, eat the ugliest one first.","- Here's one other thing that I think every person or frog needs to be creative: friends.","- I promised " + String.fromCharCode(10) + " me.","- Time's fun when you're having " + String.fromCharCode(10) + " flies!","- May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green. -","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here! -"
];
var kermitismowners=[];
var kermitismidxs=[];

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 notfirst=false;

var wasx=-1, wasy=-1, wascard='', wascardo=null, wascmd=['','','','','',''];

var uwasx=-1, uwasy=-1

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);
if (dotext.indexOf('.jp') == 0 && eval('' + imgsover[sparei].id.length) == 3) {
cft(imgsover[sparei].id,sparegoodx,sparegoody);
eval(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[sparei].id + '",' + eval(20 + sparegoodx) + ',' + eval(20 + sparegoody) + '); ');
//alert(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[sparei].id + '",' + sparegoodx + ',' + sparegoody);
}
}
}

function alertmaybe(txt) {
if (isiPad) {
if (txt.indexOf("first turn") != -1) {
document.getElementById('myh1').innerHTML = txt + " ... click/touch or drag and drop okay";
} else {
document.getElementById('myh1').innerHTML = txt;
}
if (txt.indexOf("Bad luck") != -1) {
setTimeout(andthen, 1000);
}
} else {
alert(txt);
}
}

function cft(inw,xz,yz) {
var ihuh=-1, jhuh=-1;
// cfttoggle=0 onediv =1 twodiv
// https://www.rjmprogramming.com.au/cowsay.php?inwords=well%20yes
// kermitisms[] via kermitismowners[]
if (!rectc) {
rectc=document.getElementById('canvaselement').getBoundingClientRect();
}
//alert('xz=' + xz + ' and yz=' + yz + ' ' + eval(rectc.left + xz) + ',' + eval(rectc.top + yz));
yz=eval(rectc.top + yz);
xz=eval(rectc.left + xz);
if (eval('' + kermitismowners.length) == 0) {
while (eval('' + kermitismidxs.length) < eval('' + kermitisms.length)) {
ihuh=Math.floor(Math.random() * 52);
while (kermitismidxs.indexOf(ihuh) != -1) {
ihuh=Math.floor(Math.random() * 52);
}
kermitismidxs.push(ihuh);
}
}
jhuh=kermitismowners.indexOf(inw);
if (jhuh == -1) {
kermitismowners.push(inw);
}
jhuh=kermitismowners.indexOf(inw);
if (cfttoggle == 0) {
document.getElementById('twodiv').innerHTML='';
document.getElementById('onediv').style.position='absolute';
document.getElementById('onediv').style.top='' + Math.max(0,eval(-80 + yz)) + 'px';
document.getElementById('onediv').style.left='' + Math.max(0,eval(-240 + xz)) + 'px';
document.getElementById('onediv').style.width='300px';
document.getElementById('onediv').style.height='100px';
//document.getElementById('onediv').style.overflowX='hidden';
//document.getElementById('onediv').innerHTML='<iframe src="//www.rjmprogramming.com.au/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 style="position:absolute;top=' + eval(-30 + yz) + 'px;left=' + xz + 'px;width=100px;height:60px;"></iframe>';
document.getElementById('onediv').innerHTML='<iframe src="/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 scrolling=no style="position:absolute;top:' + Math.max(0,eval(-80 + yz)) + 'px;left:' + Math.max(0,eval(-240 + xz)) + 'px;width:300px;height:100px;"></iframe>';
cfttoggle=1;
} else {
//document.getElementById('onediv').innerHTML='';
document.getElementById('twodiv').style.position='absolute';
document.getElementById('twodiv').style.top='' + Math.max(0,eval(-80 + yz)) + 'px';
document.getElementById('twodiv').style.left='' + Math.max(0,eval(-240 + xz)) + 'px';
document.getElementById('twodiv').style.width='300px';
document.getElementById('twodiv').style.height='100px';
//document.getElementById('twodiv').style.overflowX='hidden';
//document.getElementById('twodiv').innerHTML='<iframe src="//www.rjmprogramming.com.au/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 style="position:absolute;top=' + eval(-30 + yz) + 'px;left=' + xz + 'px;width=100px;height:60px;"></iframe>';
document.getElementById('twodiv').innerHTML='<iframe src="/cowsay.php?viamemories=y&inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]) + '" frameborder=0 scrolling=no style="position:absolute;top:' + Math.max(0,eval(-80 + yz)) + 'px;left:' + Math.max(0,eval(-240 + xz)) + 'px;width:300px;height:100px;"></iframe>';
cfttoggle=0;
}
//window.open('//www.rjmprogramming.com.au/cowsay.php?inwords=' + encodeURIComponent(kermitisms[kermitismidxs[jhuh]]),'_blank','top=40,left=40,width=100,height=100');

}

function drag(ev) {
//if (isiPad) document.getElementById('myh1').innerHTML=Math.floor((Math.random() * 123) + 0) + "." + ev.target.id;
wasx = ev.pageX - elemLeft;
wasy = ev.pageY - elemTop;
wascard = '';
var xcurcard = -99, xgoodx=10, xgoody=10;
for (var iijk=0; iijk<imgsover.length; iijk++) {
if (xcurcard == -99 && alreadypickedlist.indexOf(";" + iijk + ";") == -1) {
//if (iijk != to1i && (wasx >= xgoodx && wasx <= eval(xgoodx + imgsover[iijk].width)) && (wasy >= xgoody && wasy <= eval(xgoody + imgsover[iijk].height))) {
if ((wasx >= xgoodx && wasx <= eval(xgoodx + imgsover[iijk].width)) && (wasy >= xgoody && wasy <= eval(xgoody + imgsover[iijk].height))) {
xcurcard = eval(iijk);
wascard = imgs[xcurcard].src;
wascardo = imgs[xcurcard];
wascmd[0] = 'context.drawImage(imgs[' + iijk + '],' + xgoodx + ',' + xgoody + ');';
if (dotext.indexOf('.jp') == 0) {
cft(imgs[xcurcard].id,xgoodx,xgoody);
wascmd[0]+=' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgs[xcurcard].id + '",' + eval(20 + xgoodx) + ',' + eval(20 + xgoody) + '); ';
//alert(wascmd[0]);
}
wascmd[1] = 'to1o = imgsover[' + iijk + '];';
wascmd[2] = 'to1 = sdeckcards[' + iijk + '];';
wascmd[3] = 'to1x =' + xgoodx + ';';
wascmd[4] = 'to1y =' + xgoody + ';';
wascmd[5] = 'to1i =' + iijk + ';';
if (isiPad) {
ev.preventDefault();
for (var iwas=0; iwas<wascmd.length; iwas++) {
eval(wascmd[iwas]);
}
//elem.click(ev);
//elem.click();
} else {
for (var jwas=0; jwas<wascmd.length; jwas++) {
eval(wascmd[jwas]);
}
}
}
}

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

}
}

function allowDrop(ev) {
//if (xmoveid != 'drag0-1') alert(xcol);
//alert(ev.target.id);
//ev.preventDefault();
}


function drop(ev) {
//alert(":" + ev.target.id);
}

function omu(ev) {
uwasx = ev.pageX - elemLeft;
uwasy = ev.pageY - elemTop;

if (isiPad) {
if (wascard != '') {
//document.getElementById('myh1').innerHTML=";" + ev.target.id + ' ' + uwasx + "," + uwasy + ' ' + wasx + "," + wasy;
//alert(";" + ev.target.id + ' ' + uwasx + "," + uwasy + ' ' + wasx + "," + wasy);
elem.click();
}
}
}

function omo(ev) {

//if (isiPad) {
if (wascard != '') {
document.getElementById('myh1').innerHTML+="-";
document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.replace(/----------/g, "--");
}
//}
}

function lochfrog() {
location.href=document.URL.split('?')[0].split('#')[0] + '?to=Frog';
}

function lochcard() {
location.href=document.URL.replace('=frog','=y').replace('=toad','=y').replace('=Frog','=y').replace('=Toad','=y');
}
</script>
</head>
<body align='center'>
<script type='text/javascript'>
var cardplus='card ♣ or <span style=text-decoration:underline;cursor:pointer; onclick=lochfrog();>frog 🐸</span>';
if (document.URL.toLowerCase().indexOf('=frog') != -1 || document.URL.toLowerCase().indexOf('=toad') != -1) {
cardplus='<span style=text-decoration:underline;cursor:pointer; onclick=lochcard();>card ♣</span> or frog 🐸';
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write("<h4 align='center' id='myh1'>Select player names & click anywhere on card to shuffle & start the memories " + cardplus + " game.</h4>");
} else {
document.write("<h2 align='center' id='myh1'>Select player names & click anywhere on card to shuffle & start the memories " + cardplus + " game.</h2>");
}
</script>
<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 onmousemove="omo(event)" onmouseup="omu(event)" ondrop="drop(event)" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" 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" + dotext,
"images/01d" + dotext,
"images/01h" + dotext,
"images/01s" + dotext,
"images/02c" + dotext,
"images/02d" + dotext,
"images/02h" + dotext,
"images/02s" + dotext,
"images/03c" + dotext,
"images/03d" + dotext,
"images/03h" + dotext,
"images/03s" + dotext,
"images/04c" + dotext,
"images/04d" + dotext,
"images/04h" + dotext,
"images/04s" + dotext,
"images/05c" + dotext,
"images/05d" + dotext,
"images/05h" + dotext,
"images/05s" + dotext,
"images/06c" + dotext,
"images/06d" + dotext,
"images/06h" + dotext,
"images/06s" + dotext,
"images/07c" + dotext,
"images/07d" + dotext,
"images/07h" + dotext,
"images/07s" + dotext,
"images/08c" + dotext,
"images/08d" + dotext,
"images/08h" + dotext,
"images/08s" + dotext,
"images/09c" + dotext,
"images/09d" + dotext,
"images/09h" + dotext,
"images/09s" + dotext,
"images/10c" + dotext,
"images/10d" + dotext,
"images/10h" + dotext,
"images/10s" + dotext,
"images/11c" + dotext,
"images/11d" + dotext,
"images/11h" + dotext,
"images/11s" + dotext,
"images/12c" + dotext,
"images/12d" + dotext,
"images/12h" + dotext,
"images/12s" + dotext,
"images/13c" + dotext,
"images/13d" + dotext,
"images/13h" + dotext,
"images/13s" + dotext
);
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) {
var wasiPad=isiPad;
var h1atend='';
if (wasx >= 0 && wasy >= 0) {
if (!isiPad) h1atend = 'Click cards (or drag & drop) to match denomination to accumulate "tricks"... most tricks wins';
wasx = -1;
wasy = -1;
for (var iwas=0; iwas<wascmd.length; iwas++) {
eval(wascmd[iwas]);
wascmd[iwas]='';
}
//if (isiPad && notfirst) alert("drag and drop detected for " + wascard + " to1=" + to1);
notfirst = true;
wascard='';
if (isiPad) toggle = 0;
to2 = "";
if (!isiPad && 1 == 2) {
elem.click();
to1 = "";
to1i = -97;
}
//isiPad = false;
if (h1atend != '') document.getElementById('myh1').innerHTML = h1atend;
}
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
var x = event.pageX - elemLeft;
var y = event.pageY - elemTop;

if (uwasx >= 0 && uwasy >= 0) {
x = uwasx;
y = uwasy;
//if (isiPad) document.getElementById('myh1').innerHTML+=" to1=" + to1 + " to2=" + to2 + " ... " + Math.floor((Math.random() * 123) + 0) + ";" + to1 + "-" + "+" + alreadypickedlist + "_" + toggle + " " + uwasx + "," + uwasy;
uwasx = -1;
uwasy = -1;
}


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);
if (dotext.indexOf('.jp') == 0 && eval('' + imgs[iijk].id.length) == 3) {
cft(imgs[iijk].id,goodx,goody);
eval(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgs[iijk].id + '",' + eval(20 + goodx) + ',' + eval(20 + goody) + '); ');
//alert(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgs[iijk].id + '",' + 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);
if (dotext.indexOf('.jp') == 0 && eval('' + imgsover[iijk].id.length) == 3) {
cft(imgsover[iijk].id,sparegoodx,sparegoody);
eval(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[iijk].id + '",' + eval(20 + sparegoodx) + ',' + eval(20 + sparegoody) + '); ');
//alert(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[iijk].id + '",' + sparegoodx + ',' + sparegoody);
}
}
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;

if (curcard < 0) { curcard=Math.abs(curcard); }

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

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

imgs[0] = img;
//try {
sdeckcards[0] = deckcards[curcard].replace("images/","").replace(".gif","").replace(dotext,"");
//} 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","").replace(dotext,""));
sdeckcards[kjki] = deckcards[rd].replace("images/","").replace(".gif","").replace(dotext,"");
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 (or drag & drop) to match denomination to accumulate "tricks"... most tricks wins';
document.getElementById('myh1').innerHTML = 'Click cards (or drag & drop) 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);
if (dotext.indexOf('.jp') == 0 && eval('' + imgsover[ijk].id.length) == 3) {
cft(imgsover[ijk].id,x,y);
eval(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[ijk].id + '",' + eval(20 + x) + ',' + eval(20 + y) + '); ');
//alert(' ' + ' context.font="8px Verdana"; context.fillStyle="white"; context.fillText("' + imgsover[ijk].id + '",' + 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;

if (h1atend != '') document.getElementById('myh1').innerHTML = h1atend;

isiPad=wasiPad;


}, 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","").replace(dotext,"") + '">   ' + longname(mypictures[ii].replace("images/","").replace(".gif","").replace(dotext,"")) + '</option>';
document.write('<img src="' + mypictures[mm] + '" id="' + mypictures[mm].replace("images/","").replace(".gif","").replace(dotext,"") + '" style="display:none;" title="' + mypictures[mm].replace("images/","").replace(".gif","").replace(dotext,"") + '"></img>');
}
kk = kk+1;
}
usedcards = [];
if (inidone == 0) document.write('<img src="' + defcard + '" id="' + defcard.replace("images/","").replace(".gif","").replace(dotext,"") + '" style="display:none;" title="' + defcard.replace("images/","").replace(".gif","").replace(dotext,"") + '"></img>');

inidone = 1;
}

//updatescore();
</script>

<div id=onediv></div>
<div id=twodiv></div>

</body>
</html>