3,4c3
< <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" />
---
> <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>
27,32d25
< var notfirst=false;
< 
< var wasx=-1, wasy=-1, wascard='', wascardo=null, wascmd=['','','','','',''];
< 
< var uwasx=-1, uwasy=-1
< 
58,62c51
<     if (txt.indexOf("first turn") != -1) {
<       document.getElementById('myh1').innerHTML = txt + " ... click/touch or drag and drop okay";
<     } else {
<       document.getElementById('myh1').innerHTML = txt;
<     }
---
>     document.getElementById('myh1').innerHTML = txt;
72,148d60
< 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 + ');';
<        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, "--");
<       }
<     //}
< }
152,158c64
< <script type='text/javascript'>
< 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 card game.</h4>");
< } else {
<  document.write("<h2 align='center' id='myh1'>Select player names & click anywhere on card to shuffle & start the memories card game.</h2>");
< }
< </script>
---
> <h1 align='center' id='myh1'>Select player names & click anywhere on card to shuffle & start the memories card game.</h1>
174c80
< <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;" />
---
> <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;" />
265,287d170
<    var wasiPad=isiPad;
<    var h1atend='';
<    if (wasx >= 0 && wasy >= 0) {
<      if (!isiPad) h1atend = 'Click cards (or drag &amp; 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;
<    }
293,300d175
<    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;
<    }
<    
433,434c308
<    //document.getElementById('myh1').innerHTML = 'Double click cards (or drag &amp; drop) to match denomination to accumulate "tricks"... most tricks wins';
<    document.getElementById('myh1').innerHTML = 'Click cards (or drag &amp; drop) to match denomination to accumulate "tricks"... most tricks wins';
---
>    document.getElementById('myh1').innerHTML = 'Double click cards and try to match denomination to accumulate "tricks"... most tricks wins';
531,534d404
<    
<    if (h1atend != '') document.getElementById('myh1').innerHTML = h1atend;
<    
<    isiPad=wasiPad;