<p><table width="400" height="400" border="1" align="center"> <tr> <td colspan="5" id="v10idpoint" align="center">point = 0</td> </tr> <tr> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(0)"><canvas id="v10myCanvas0" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(1)"><canvas id="v10myCanvas1" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(2)"><canvas id="v10myCanvas2" width="80" height="80"></canvas></td> </tr> <tr> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(3)"><canvas id="v10myCanvas3" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(4)"><canvas id="v10myCanvas4" width="80" height="80"></canvas></td> <td> </td> </tr> <tr> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(5)"><canvas id="v10myCanvas5" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(6)"><canvas id="v10myCanvas6" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(7)"><canvas id="v10myCanvas7" width="80" height="80"></canvas></td> </tr> <tr> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(8)"><canvas id="v10myCanvas8" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(9)"><canvas id="v10myCanvas9" width="80" height="80"></canvas></td> <td> </td> </tr> <tr> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(10)"><canvas id="v10myCanvas10" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(11)"><canvas id="v10myCanvas11" width="80" height="80"></canvas></td> <td> </td> <td width="80" height="80" style="cursor:pointer" onclick="v10sharclick(12)"><canvas id="v10myCanvas12" width="80" height="80"></canvas></td> </tr> </table></p> <p> <script> var v10canvas0 = document.querySelector("#v10myCanvas0"); var v10canvas1 = document.querySelector("#v10myCanvas1"); var v10canvas2 = document.querySelector("#v10myCanvas2"); var v10canvas3 = document.querySelector("#v10myCanvas3"); var v10canvas4 = document.querySelector("#v10myCanvas4"); var v10canvas5 = document.querySelector("#v10myCanvas5"); var v10canvas6 = document.querySelector("#v10myCanvas6"); var v10canvas7 = document.querySelector("#v10myCanvas7"); var v10canvas8 = document.querySelector("#v10myCanvas8"); var v10canvas9 = document.querySelector("#v10myCanvas9"); var v10canvas10 = document.querySelector("#v10myCanvas10"); var v10canvas11 = document.querySelector("#v10myCanvas11"); var v10canvas12 = document.querySelector("#v10myCanvas12"); var v10context0 = v10canvas0.getContext("2d"); var v10context1 = v10canvas1.getContext("2d"); var v10context2 = v10canvas2.getContext("2d"); var v10context3 = v10canvas3.getContext("2d"); var v10context4 = v10canvas4.getContext("2d"); var v10context5 = v10canvas5.getContext("2d"); var v10context6 = v10canvas6.getContext("2d"); var v10context7 = v10canvas7.getContext("2d"); var v10context8 = v10canvas8.getContext("2d"); var v10context9 = v10canvas9.getContext("2d"); var v10context10 = v10canvas10.getContext("2d"); var v10context11 = v10canvas11.getContext("2d"); var v10context12 = v10canvas12.getContext("2d"); var v10Color = ["#F2F4FF","#4080FF","#FF8040"]; var v10myColor = ["#FF8040","#F2F4FF","#4080FF", "#F2F4FF","#F2F4FF","#FF8040","#F2F4FF", "#4080FF","#F2F4FF","#F2F4FF","#FF8040", "#F2F4FF","#4080FF"]; var v10select = [false, false, false, false, false, false, false, false, false, false, false, false, false]; </script> <script> function v10update() { for (i=0; i<13; i++) { var elm = eval("v10context" + i); elm.clearRect(0, 0, 80, 80); elm.beginPath(); elm.rect(5, 5, 70, 70); elm.fillStyle = v10myColor[i]; elm.fill(); if (v10select[i]) { elm.rect(2, 2, 77, 77); elm.strokeStyle = "#008000"; elm.stroke(); }} requestAnimationFrame(v10update); } v10update(); </script> <script> var v10colpoint = 0; var Click1 = false; var NClick1 = -1; var Click2 = false; var NClick2 = -1; function v10sharclick(numshar) { if ((Click1 === false) && (Click2 === false)) { if (v10Color[0] !== v10myColor[numshar]) { NClick1 = numshar; NClick2 = -1; Click1 = true; v10select[numshar] = true; } } else { if ((Click1 === true) && (Click2 === false)) { // if (NClick1 === numshar) { NClick1 = -1; NClick2 = -1; Click1 = false; Click2 = false; v10select = [false, false, false, false, false, false, false, false, false, false, false, false, false]; } else { if ((numshar === (NClick1 - 3))||(numshar === (NClick1 - 2)) ||(numshar === (NClick1 + 3))||(numshar === (NClick1 + 2))) { if (v10Color[0] === v10myColor[numshar]){ NClick2 = numshar; Click2 = true; v10select[numshar] = true; }}} // } else { if ((Click1 === false) && (Click2 === true)) { NClick1 = -1; NClick2 = -1; Click1 = false; Click2 = false; v10select = [false, false, false, false, false, false, false, false, false, false, false, false, false]; }}} if ((Click1 === true) && (Click2 === true)) { var tempColor = v10myColor[NClick2]; v10myColor[NClick2] = v10myColor[NClick1]; v10myColor[NClick1] = tempColor; v10colpoint = v10colpoint + 1; document.getElementById('v10idpoint').innerHTML = 'point = '+v10colpoint; Check(); NClick1 = -1; NClick2 = -1; Click1 = false; Click2 = false; v10select = [false, false, false, false, false, false, false, false, false, false, false, false, false]; } } function Check() { var tresult = false; if (v10myColor[3] === v10Color[1]) if ((v10myColor[0] === v10Color[2])|| (v10myColor[1] === v10Color[2])||(v10myColor[5] === v10Color[2])||(v10myColor[6] === v10Color[2])) {tresult = true}; if (v10myColor[3] === v10Color[2]) if ((v10myColor[0] === v10Color[1])|| (v10myColor[1] === v10Color[1])||(v10myColor[5] === v10Color[1])||(v10myColor[6] === v10Color[1])) {tresult = true}; if (v10myColor[4] === v10Color[1]) if ((v10myColor[1] === v10Color[2])|| (v10myColor[2] === v10Color[2])||(v10myColor[6] === v10Color[2])||(v10myColor[7] === v10Color[2])) {tresult = true}; if (v10myColor[4] === v10Color[2]) if ((v10myColor[1] === v10Color[1])|| (v10myColor[2] === v10Color[1])||(v10myColor[6] === v10Color[1])||(v10myColor[7] === v10Color[1])) {tresult = true}; if (v10myColor[6] === v10Color[1]) if ((v10myColor[3] === v10Color[2])|| (v10myColor[4] === v10Color[2])||(v10myColor[8] === v10Color[2])||(v10myColor[9] === v10Color[2])) {tresult = true}; if (v10myColor[6] === v10Color[2]) if ((v10myColor[3] === v10Color[1])|| (v10myColor[4] === v10Color[1])||(v10myColor[8] === v10Color[1])||(v10myColor[9] === v10Color[1])) {tresult = true}; if (v10myColor[8] === v10Color[1]) if ((v10myColor[5] === v10Color[2])|| (v10myColor[6] === v10Color[2])||(v10myColor[10] === v10Color[2])||(v10myColor[11] === v10Color[2])) {tresult = true}; if (v10myColor[8] === v10Color[2]) if ((v10myColor[5] === v10Color[1])|| (v10myColor[6] === v10Color[1])||(v10myColor[10] === v10Color[1])||(v10myColor[11] === v10Color[1])) {tresult = true}; if (v10myColor[9] === v10Color[1]) if ((v10myColor[6] === v10Color[2])|| (v10myColor[7] === v10Color[2])||(v10myColor[11] === v10Color[2])||(v10myColor[12] === v10Color[2])) {tresult = true}; if (v10myColor[9] === v10Color[2]) if ((v10myColor[6] === v10Color[1])|| (v10myColor[7] === v10Color[1])||(v10myColor[11] === v10Color[1])||(v10myColor[12] === v10Color[1])) {tresult = true}; if (tresult) alert ('Недопустимый ход') } </script></p>
