Записи

<table width="240"
 height="240" border="1" align="center">
 <tr>
 <td colspan="3" id="v9idpoint" align="center">point = 0</td>
 </tr>
 <tr>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(0)"
 onmouseover="v9flagover=0"><canvas id="v9myCanvas1" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(1)"
 onmouseover="v9flagover=1"><canvas id="v9myCanvas2" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(2)"
 onmouseover="v9flagover=2"><canvas id="v9myCanvas3" width="80" height="80">
 </canvas></td>
 </tr>
 <tr>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(3)"
 onmouseover="v9flagover=3"><canvas id="v9myCanvas4" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(4)"
 onmouseover="v9flagover=4"><canvas id="v9myCanvas5" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(5)"
 onmouseover="v9flagover=5"><canvas id="v9myCanvas6" width="80" height="80">
 </canvas></td>
 </tr>
 <tr>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(6)"
 onmouseover="v9flagover=6"><canvas id="v9myCanvas7" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(7)"
 onmouseover="v9flagover=7"><canvas id="v9myCanvas8" width="80" height="80">
 </canvas></td>
 <td width="80" height="80" style="cursor:pointer" onclick="v9sharclick(8)"
 onmouseover="v9flagover=8"><canvas id="v9myCanvas9" width="80" height="80">
 </canvas></td>
 </tr>
</table> 

 <script>
 var v9canvas1 = document.querySelector("#v9myCanvas1");
 var v9canvas2 = document.querySelector("#v9myCanvas2");
 var v9canvas3 = document.querySelector("#v9myCanvas3");
 var v9canvas4 = document.querySelector("#v9myCanvas4");
 var v9canvas5 = document.querySelector("#v9myCanvas5");
 var v9canvas6 = document.querySelector("#v9myCanvas6");
 var v9canvas7 = document.querySelector("#v9myCanvas7");
 var v9canvas8 = document.querySelector("#v9myCanvas8");
 var v9canvas9 = document.querySelector("#v9myCanvas9");
 var v9context1 = v9canvas1.getContext("2d");
 var v9context2 = v9canvas2.getContext("2d");
 var v9context3 = v9canvas3.getContext("2d");
 var v9context4 = v9canvas4.getContext("2d");
 var v9context5 = v9canvas5.getContext("2d");
 var v9context6 = v9canvas6.getContext("2d");
 var v9context7 = v9canvas7.getContext("2d");
 var v9context8 = v9canvas8.getContext("2d");
 var v9context9 = v9canvas9.getContext("2d");
 var v9myposX=40;
 var v9myposY=40;
 var v9masR=[20,20,20,20,20,20,20,20,20];
 var v9myColor = "#FF6A6A";
 </script> 
 <script> 
 function v9update() {
 v9context1.clearRect(0, 0, v9canvas1.width, v9canvas1.height);
 v9context1.beginPath();
 v9context1.arc(v9myposX, v9myposY, v9masR[0], 0, 2 * Math.PI, true);
 v9context1.fillStyle = v9myColor;
 v9context1.fill();
 v9context2.clearRect(0, 0, v9canvas2.width, v9canvas2.height);
 v9context2.beginPath();
 v9context2.arc(v9myposX, v9myposY, v9masR[1], 0, 2 * Math.PI, true);
 v9context2.fillStyle = v9myColor;
 v9context2.fill();
 v9context3.clearRect(0, 0, v9canvas3.width, v9canvas3.height);
 v9context3.beginPath();
 v9context3.arc(v9myposX, v9myposY, v9masR[2], 0, 2 * Math.PI, true);
 v9context3.fillStyle = v9myColor;
 v9context3.fill();
 v9context4.clearRect(0, 0, v9canvas4.width, v9canvas4.height);
 v9context4.beginPath();
 v9context4.arc(v9myposX, v9myposY, v9masR[3], 0, 2 * Math.PI, true);
 v9context4.fillStyle = v9myColor;
 v9context4.fill();
 v9context5.clearRect(0, 0, v9canvas5.width, v9canvas5.height);
 v9context5.beginPath();
 v9context5.arc(v9myposX, v9myposY, v9masR[4], 0, 2 * Math.PI, true);
 v9context5.fillStyle = v9myColor;
 v9context5.fill();
 v9context6.clearRect(0, 0, v9canvas6.width, v9canvas6.height);
 v9context6.beginPath();
 v9context6.arc(v9myposX, v9myposY, v9masR[5], 0, 2 * Math.PI, true);
 v9context6.fillStyle = v9myColor;
 v9context6.fill();
 v9context7.clearRect(0, 0, v9canvas7.width, v9canvas7.height);
 v9context7.beginPath();
 v9context7.arc(v9myposX, v9myposY, v9masR[6], 0, 2 * Math.PI, true);
 v9context7.fillStyle = v9myColor;
 v9context7.fill();
 v9context8.clearRect(0, 0, v9canvas8.width, v9canvas8.height);
 v9context8.beginPath();
 v9context8.arc(v9myposX, v9myposY, v9masR[7], 0, 2 * Math.PI, true);
 v9context8.fillStyle = v9myColor;
 v9context8.fill();
 v9context9.clearRect(0, 0, v9canvas9.width, v9canvas9.height);
 v9context9.beginPath();
 v9context9.arc(v9myposX, v9myposY, v9masR[8], 0, 2 * Math.PI, true);
 v9context9.fillStyle = v9myColor;
 v9context9.fill();
 requestAnimationFrame(v9update);
 }
 v9update();
 </script>
 <script>
 v9timer = setInterval(v9ChangeTimePlay, 14);
 var v9tempR = 20;
 var v9flagR = -1;
 var v9flagchange = 10;
 var v9flagover = 0;
 var v9colpoint = 0;
 function v9ChangeTimePlay() {
 if (v9tempR > 19) {v9flagR = -1;};
 if (v9tempR < 1) {v9flagR = 1; v9rndVisible();};
 if (v9flagchange < 11) {v9tempR = v9tempR + v9flagR;} else {v9flagchange = v9flagchange - 1;};
 //
 if (v9masR[0] > 0) {v9masR[0] = v9tempR;}
 if (v9masR[1] > 0) {v9masR[1] = v9tempR;}
 if (v9masR[2] > 0) {v9masR[2] = v9tempR;}
 if (v9masR[3] > 0) {v9masR[3] = v9tempR;}
 if (v9masR[4] > 0) {v9masR[4] = v9tempR;}
 if (v9masR[5] > 0) {v9masR[5] = v9tempR;}
 if (v9masR[6] > 0) {v9masR[6] = v9tempR;}
 if (v9masR[7] > 0) {v9masR[7] = v9tempR;}
 if (v9masR[8] > 0) {v9masR[8] = v9tempR;}
 }
 function v9rndVisible() {
 v9masR[0] = 1;
 v9masR[1] = 1;
 v9masR[2] = 1;
 v9masR[3] = 1;
 v9masR[4] = 1;
 v9masR[5] = 1;
 v9masR[6] = 1;
 v9masR[7] = 1;
 v9masR[8] = 1;
 v9myColor = "#FF6A6A"; 
 //
 v9masR[v9flagover] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 v9masR[Math.floor(Math.random() * 9)] = 0;
 }
 function v9sharclick(numshar) {
 if (v9masR[numshar] > 12 ){
 v9myColor = "#6A6AFF";
 if (v9flagchange < 11) {v9colpoint = v9colpoint + 1;}
 document.getElementById('v9idpoint').innerHTML = 'point = '+v9colpoint;
 v9flagchange = 50;
 };
 }
 </script>