Записи

 <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>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(1)"><canvas id="v10myCanvas1"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(2)"><canvas id="v10myCanvas2"
 width="80" height="80"></canvas></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(3)"><canvas id="v10myCanvas3"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(4)"><canvas id="v10myCanvas4"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(5)"><canvas id="v10myCanvas5"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(6)"><canvas id="v10myCanvas6"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(7)"><canvas id="v10myCanvas7"
 width="80" height="80"></canvas></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(8)"><canvas id="v10myCanvas8"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(9)"><canvas id="v10myCanvas9"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(10)"><canvas id="v10myCanvas10"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</td>
  <td width="80" height="80" style="cursor:pointer"
 onclick="v10sharclick(11)"><canvas id="v10myCanvas11"
 width="80" height="80"></canvas></td>
 <td>&nbsp;</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>