Записи

<table width="250" height="333" border="0" align="center" class="colorborder" >
 <tr>
 <td colspan="3" id="v21idpoint" align="center">баллов: 0</td>
 </tr>
<tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas0" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,0)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas1" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,1)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas2" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,2)"></canvas></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas3" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,3)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas4" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,4)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas5" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,5)"></canvas></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas6" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(9,6)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas7" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(10,7)"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas8" width="76" height="76" style="cursor: pointer;" onclick="v21ButtonClick(11,8)"></canvas></td>
</tr><tr>
<td colspan="3" align="center"><input type="button" onclick="v21SortClick()" value="старт" /></td>
</tr><tr>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas9" width="76" height="76"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas10" width="76" height="76"></canvas></td>
<td width="76" height="76" style="border: 1px solid #66aaee;"><canvas id="v21myCanvas11" width="76" height="76"></canvas></td>
</tr><tr>
<td colspan="3" align="center"><input type="button" onclick="v21NextClick()" value="далее" /></td>
</tr>
</table>

 <script>
 var v21canvas0 = document.querySelector("#v21myCanvas0");
 var v21canvas1 = document.querySelector("#v21myCanvas1");
 var v21canvas2 = document.querySelector("#v21myCanvas2");
 var v21canvas3 = document.querySelector("#v21myCanvas3");
 var v21canvas4 = document.querySelector("#v21myCanvas4");
 var v21canvas5 = document.querySelector("#v21myCanvas5");
 var v21canvas6 = document.querySelector("#v21myCanvas6");
 var v21canvas7 = document.querySelector("#v21myCanvas7");
 var v21canvas8 = document.querySelector("#v21myCanvas8");
 var v21canvas9 = document.querySelector("#v21myCanvas9");
 var v21canvas10 = document.querySelector("#v21myCanvas10");
 var v21canvas11 = document.querySelector("#v21myCanvas11");
 var v21context0 = v21canvas0.getContext("2d");
 var v21context1 = v21canvas1.getContext("2d");
 var v21context2 = v21canvas2.getContext("2d");
 var v21context3 = v21canvas3.getContext("2d");
 var v21context4 = v21canvas4.getContext("2d");
 var v21context5 = v21canvas5.getContext("2d");
 var v21context6 = v21canvas6.getContext("2d");
 var v21context7 = v21canvas7.getContext("2d");
 var v21context8 = v21canvas8.getContext("2d");
 var v21context9 = v21canvas9.getContext("2d");
 var v21context10 = v21canvas10.getContext("2d");
 var v21context11 = v21canvas11.getContext("2d");
 
 var v21ColorFon = ['#F1F3F4','#A080FF','#4080FF','#80FFA0','#80FF40','#60A060', '#408040','#90F090','#62646F','#60F060'];
 var v21ColorNum = ['#62646F','#62646F','#60F060','#FF8040','#FF80A0','#FF80A0','#FF8040','#A080FF','#F1F3F4','#A080FF'];

 var v21Size = '43';
 var v21Left = '53';
 var v21Top = '18';
 var v21Number = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
 var v21level = 0;
 var v21colpoint = 0;
 var v21Array9 = [];
 var v21Array10 = [];
 var v21Array11 = [];
 </script> 
 <script> 
 function v21getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
 }
 function v21getRandomIntNoRepid(min, max) {
 var tmpValue = v21getRandomInt(min, max);
 var tmpFlagRepid = false;
 for (i=0; i<9; i=i+1) if (v21Number[i] === tmpValue) tmpFlagRepid = true;
 while (tmpFlagRepid === true) {
 tmpValue = v21getRandomInt(min, max);
 tmpFlagRepid = false;
 for (i=0; i<9; i=i+1) if (v21Number[i] === tmpValue) tmpFlagRepid = true;
 }
 return tmpValue; 
 }
 function v21NoArray(num) {
 var tmpnoar = true;
 for (j=0; j<10; j=j+1) {
 if (v21Array9[j] === num) tmpnoar = false;
 if (v21Array10[j] === num) tmpnoar = false;
 if (v21Array11[j] === num) tmpnoar = false;
 }
 return tmpnoar; 
 }
 function v21getRandomIntNoRepid2(num, min, max) {
 var tmpCountWhile = 0;
 var tmpValue = v21getRandomInt(min, max);
 var tmpFlagRepid = v21NoArray(tmpValue);
 while ((tmpFlagRepid === true)&&(tmpCountWhile < 150)) {
 tmpCountWhile ++;
 tmpValue = v21getRandomInt(min, max);
 tmpFlagRepid = v21NoArray(tmpValue);
 }
 return tmpValue; 
 }
 function v21SortClick() {
 for (j=0; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(1, 10); }
 for (j=1; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(11, 20); }
 for (j=2; j<9; j=j+3) { v21Number[j] = v21getRandomIntNoRepid(21, 30); }
 //
 for (i=1; i<10; i++) {
 v21Array9[i] = i;
 v21Array10[i] = i+10;
 v21Array11[i] = i+20;
 }
 //
 v21colpoint = 0;
 v21level = 0;
 document.getElementById('v21idpoint').innerHTML = 'баллов = ' + v21colpoint;
 v21NextClick();
 v21Sort();
 }
 function v21Sort() {
 var tmpsort = 0;
 for (m=0; m<5; m=m+1) 
 for (i=m; i<9; i=i+3) 
 for (j=i+3; j<9; j=j+3) 
 if (v21Number[j] < v21Number[i]) {
 tmpsort = v21Number[j];
 v21Number[j] = v21Number[i];
 v21Number[i] = tmpsort;
 }
 }
 function v21NextClick() {
 v21Number[9] = v21getRandomIntNoRepid2(9, 1, 10); 
 v21Number[10] = v21getRandomIntNoRepid2(10, 11, 20); 
 v21Number[11] = v21getRandomIntNoRepid2(11, 21, 30); 
 //
 for (j=1; j<10; j++) {
 if (v21Array9[j] === v21Number[9]) v21Array9[j] = 0;
 if (v21Array10[j] === v21Number[10]) v21Array10[j] = 0;
 if (v21Array11[j] === v21Number[11]) v21Array11[j] = 0;
 }
 //
 v21level ++;
 //
 var tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array9[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array9[j] = j;
 tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array10[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array10[j] = j+10;
 tmpArisEmpty = true;
 for (j=1; j<10; j++) if (v21Array11[j] != 0) tmpArisEmpty = false;
 if (tmpArisEmpty === true) for (j=1; j<10; j++) v21Array11[j] = j+20;
 }
 function v21ButtonClick(num1, num2) { 
 if (v21Number[num2] != 0) {
 if (v21Number[num1] === v21Number[num2]) {
 v21colpoint = v21colpoint + v21Number[num2];
 document.getElementById('v21idpoint').innerHTML = 'баллов = ' + v21colpoint;
 //
 v21Number[num2] = 0; 
 }
 //
 var tmpFieldClear = true;
 for (j=0; j<9; j=j+1) 
 if (v21Number[j] != 0) 
 tmpFieldClear = false;
 if (tmpFieldClear === true) 
 document.getElementById('v21idpoint').innerHTML += ' игровое поле очищено за ' + v21level + ' ходов';
}
}
 function v21update() {
 for (i=0; i<12; i++) {
 var elm = eval("v21context" + i);
 elm.clearRect(0, 0, 76, 76);
 elm.beginPath();
 elm.rect(4, 4, 67, 67);
 elm.fillStyle = v21ColorFon[Math.floor(v21Number[i]*10/30)];
 elm.fill();
 elm.closePath();

 elm.beginPath();
 elm.rect(1, 1, 72, 72);
 elm.strokeStyle = "#FFFF00";
 elm.stroke();
 elm.closePath();

 elm.beginPath();
 elm.font = v21Size + "px serif";
 elm.fillStyle = v21ColorNum[Math.floor(v21Number[i]*10/30)];
 if (v21Number[i] > 0) 
 elm.fillText(v21Number[i], v21Top, v21Left);
 elm.fill();
 elm.closePath();
 }
 requestAnimationFrame(v21update);
 }
 v21update();
 </script>