Записи

<table width="400" cellspacing="10" cellpadding="10" align="center" class="colorborder">
 <tr><td>
 <div align="center" id="v3iiStep">step:0</div>
 </td><td></td></tr>
 <tr><td class="colorborder">

<svg width="300" height="400" style="background:#FFF5D7;">
 <circle cx="150" cy="165" r="70" fill="#0094FF00" stroke="#FF6A0077" stroke-width="25"/>
 <circle cx="150" cy="235" r="70" fill="#0094FF00" stroke="#0094FF77" stroke-width="25"/>
 <circle cx="50" cy="50" r="11" fill="#FF6A00" stroke="#0094FF" id="circle1" stroke-width="2"/>
 <circle cx="55" cy="55" r="11" fill="#FF6A00" stroke="#0094FF" id="circle2" stroke-width="2"/>
 <circle cx="60" cy="60" r="11" fill="#FF6A00" stroke="#0094FF" id="circle3" stroke-width="2"/>
 <circle cx="65" cy="65" r="11" fill="#FF6A00" stroke="#0094FF" id="circle4" stroke-width="2"/>
 <circle cx="70" cy="70" r="11" fill="#FF6A00" stroke="#0094FF" id="circle5" stroke-width="2"/>
 <circle cx="75" cy="75" r="11" fill="#FF6A00" stroke="#0094FF" id="circle6" stroke-width="2"/>
 <circle cx="80" cy="80" r="11" fill="#FF6A00" stroke="#0094FF" id="circle7" stroke-width="2"/>
 <circle cx="85" cy="85" r="11" fill="#FF6A00" stroke="#0094FF" id="circle8" stroke-width="2"/>
 <circle cx="90" cy="90" r="11" fill="#FF6A00" stroke="#0094FF" id="circle9" stroke-width="2"/>
 <circle cx="95" cy="95" r="11" fill="#FF6A00" stroke="#0094FF" id="circle10" stroke-width="2"/>
 <circle cx="100" cy="100" r="11" fill="#FF6A00" stroke="#0094FF" id="circle11" stroke-width="2"/>
 <circle cx="105" cy="105" r="11" fill="#0094FF" stroke="#FF6A00" id="circle12" stroke-width="2"/>
 <circle cx="110" cy="110" r="11" fill="#0094FF" stroke="#FF6A00" id="circle13" stroke-width="2"/>
 <circle cx="115" cy="115" r="11" fill="#0094FF" stroke="#FF6A00" id="circle14" stroke-width="2"/>
 <circle cx="120" cy="120" r="11" fill="#0094FF" stroke="#FF6A00" id="circle15" stroke-width="2"/>
 <circle cx="125" cy="125" r="11" fill="#0094FF" stroke="#FF6A00" id="circle16" stroke-width="2"/>
 <circle cx="130" cy="130" r="11" fill="#0094FF" stroke="#FF6A00" id="circle17" stroke-width="2"/>
 <circle cx="135" cy="135" r="11" fill="#0094FF" stroke="#FF6A00" id="circle18" stroke-width="2"/>
 <circle cx="140" cy="140" r="11" fill="#0094FF" stroke="#FF6A00" id="circle19" stroke-width="2"/>
 <circle cx="145" cy="145" r="11" fill="#0094FF" stroke="#FF6A00" id="circle20" stroke-width="2"/>
 <circle cx="150" cy="150" r="11" fill="#0094FF" stroke="#FF6A00" id="circle21" stroke-width="2"/>
 <circle cx="155" cy="155" r="11" fill="#0094FF" stroke="#FF6A00" id="circle22" stroke-width="2"/>
</svg>

</td><td>
<center><img src="/jgame/game8/ImArr1.jpg" style="cursor:pointer" onclick="v3iiGoClick(0, true)"/></center>
<center><img src="/jgame/game8/ImArr2.jpg" style="cursor:pointer" onclick="v3iiGoClick(1, true)"/></center>
<center><img src="/jgame/game8/ImArr3.jpg" style="cursor:pointer" onclick="v3iiGoClick(2, true)"/></center>
<center><img src="/jgame/game8/ImArr4.jpg" style="cursor:pointer" onclick="v3iiGoClick(3, true)"/></center>
</td></tr>
 <tr><td>
 <center><input type="button" onclick="v3iiAddClick()" value="сложить" /><input type="button" onclick="v3iiSortClick()" value="перемешать" /></center>
 </td><td></td></tr>

</table>

<script>
var coordX = [80, 90, 120, 150, 180, 210, 220, 210, 180, 150, 120, 220, 210, 180, 150, 120, 90, 80, 90, 120, 150, 180];
var coordY = [165, 130, 100, 95, 100, 130, 160, 200, 230, 235, 230, 240, 270, 300, 305, 300, 270, 240, 200, 170, 165, 170];
var coordAr1 = [19, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18, 11, 20, 21, 22];
var coordAr2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 19, 12, 13, 14, 15, 16, 17, 18, 1, 20, 21, 22];
var coordAr3 = [1, 2, 3, 4, 5, 6, 7, 22, 9, 10, 11, 8, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
var coordAr4 = [1, 2, 3, 4, 5, 6, 7, 12, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 8];
for (var i = 0; i < 22; i++) {
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', coordX[i]);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', coordY[i]);
}
var timertag1 = -10;
var timertag2 = -10;
var timertag3 = -10;
var timertag4 = -10;
var timer1 = setInterval(Anim1, 30);
function Anim1() {
 if (timertag1 > -10) {
 timertag1 ++;
 for (var i = 0; i < 22; i++) {
 var tmpX = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cx');
 var tmpY = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cy');
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', eval(tmpX)+(coordX[coordAr1[i]-1] - coordX[i])/10);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', eval(tmpY)+(coordY[coordAr1[i]-1] - coordY[i])/10);
 }
 }
 if (timertag1 > 10) {
 timertag1 = -10;
 v3iiGoColor();
 }
 //1
 if (timertag2 > -10) {
 timertag2 ++;
 for (var i = 0; i < 22; i++) {
 var tmpX = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cx');
 var tmpY = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cy');
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', eval(tmpX)+(coordX[coordAr2[i]-1] - coordX[i])/10);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', eval(tmpY)+(coordY[coordAr2[i]-1] - coordY[i])/10);
 }
 }
 if (timertag2 > 10) {
 timertag2 = -10;
 v3iiGoColor();
 }
 //2
 if (timertag3 > -10) {
 timertag3 ++;
 for (var i = 0; i < 22; i++) {
 var tmpX = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cx');
 var tmpY = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cy');
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', eval(tmpX)+(coordX[coordAr3[i]-1] - coordX[i])/10);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', eval(tmpY)+(coordY[coordAr3[i]-1] - coordY[i])/10);
 }
 }
 if (timertag3 > 10) {
 timertag3 = -10;
 v3iiGoColor();
 }
 //3
 if (timertag4 > -10) {
 timertag4 ++;
 for (var i = 0; i < 22; i++) {
 var tmpX = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cx');
 var tmpY = document.getElementById('circle'+eval(i+1)).getAttributeNS(null,'cy');
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', eval(tmpX)+(coordX[coordAr4[i]-1] - coordX[i])/10);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', eval(tmpY)+(coordY[coordAr4[i]-1] - coordY[i])/10);
 }
 }
 if (timertag4 > 10) {
 timertag4 = -10; 
 v3iiGoColor();
 }
 //4
}
</script>

 <script>
 var v3iicolstep = 0;
var v3iiplace = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2];
function v3iiGoClick(A1, flagGo) {
 var tempcolor = 4;
 if (A1 == 0) {
 tempcolor = v3iiplace[3]; v3iiplace[3] = v3iiplace[4]; v3iiplace[4] = v3iiplace[5]; v3iiplace[5] = v3iiplace[6]; 
 v3iiplace[6] = v3iiplace[7]; v3iiplace[7] = v3iiplace[8]; v3iiplace[8] = v3iiplace[9]; v3iiplace[9] = v3iiplace[10]; 
 v3iiplace[10] = v3iiplace[18]; v3iiplace[18] = v3iiplace[0]; v3iiplace[0] = v3iiplace[1]; v3iiplace[1] = v3iiplace[2]; 
 v3iiplace[2] = tempcolor; 
 }
 if (A1 == 1) {
 tempcolor = v3iiplace[3]; v3iiplace[3] = v3iiplace[2]; v3iiplace[2] = v3iiplace[1]; v3iiplace[1] = v3iiplace[0]; 
 v3iiplace[0] = v3iiplace[18]; v3iiplace[18] = v3iiplace[10]; v3iiplace[10] = v3iiplace[9]; v3iiplace[9] = v3iiplace[8]; 
 v3iiplace[8] = v3iiplace[7]; v3iiplace[7] = v3iiplace[6]; v3iiplace[6] = v3iiplace[5]; v3iiplace[5] = v3iiplace[4]; 
 v3iiplace[4] = tempcolor; 
 }
 if (A1 == 2) {
 tempcolor = v3iiplace[14]; v3iiplace[14] = v3iiplace[15]; v3iiplace[15] = v3iiplace[16]; v3iiplace[16] = v3iiplace[17]; 
 v3iiplace[17] = v3iiplace[18]; v3iiplace[18] = v3iiplace[19]; v3iiplace[19] = v3iiplace[20]; v3iiplace[20] = v3iiplace[21]; 
 v3iiplace[21] = v3iiplace[7]; v3iiplace[7] = v3iiplace[11]; v3iiplace[11] = v3iiplace[12]; v3iiplace[12] = v3iiplace[13]; 
 v3iiplace[13] = tempcolor; 
 }
 if (A1 == 3) {
 tempcolor = v3iiplace[14]; v3iiplace[14] = v3iiplace[13]; v3iiplace[13] = v3iiplace[12]; v3iiplace[12] = v3iiplace[11]; 
 v3iiplace[11] = v3iiplace[7]; v3iiplace[7] = v3iiplace[21]; v3iiplace[21] = v3iiplace[20]; v3iiplace[20] = v3iiplace[19]; 
 v3iiplace[19] = v3iiplace[18]; v3iiplace[18] = v3iiplace[17]; v3iiplace[17] = v3iiplace[16]; v3iiplace[16] = v3iiplace[15]; 
 v3iiplace[15] = tempcolor; 
 }
 //
 if (flagGo) {
 v3iiGoDraw(A1);
 minigame3iiWin();
 }
}
function v3iiGoColor() {
 var tmpColorfill = ['#FF6A00', '#0094FF'];
 var tmpColorstroke = ['#0094FF', '#FF6A00'];
 for (var i = 0; i < 22; i++) {
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'fill', tmpColorfill[v3iiplace[i]-1]);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'stroke', tmpColorstroke[v3iiplace[i]-1]);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cx', coordX[i]);
 document.getElementById('circle'+eval(i+1)).setAttributeNS(null, 'cy', coordY[i]);
 }
}
function v3iiGoDraw(num) {
 v3iicolstep = v3iicolstep + 1;
 document.getElementById('v3iiStep').innerHTML = "step:" + v3iicolstep;
 //
 if (num === 0) timertag1 = 0;
 if (num === 1) timertag2 = 0;
 if (num === 2) timertag3 = 0;
 if (num === 3) timertag4 = 0;
 if (num === 4) v3iiGoColor();
}
function v3iiSortClick() {
 for (var i = 0; i < 30; i++) { v3iiGoClick(v3iigetRandomInt(0, 3), false); }
 v3iicolstep = 0;
 document.getElementById('v3iiStep').innerHTML = "step:" + v3iicolstep;
 v3iiGoColor();
}
function v3iiAddClick() {
 v3iicolstep = -1;
 v3iiplace = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2];
 v3iiGoDraw(4);
}
function v3iigetRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
}
 function minigame3iiWin() {
 var win3iiA = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2];
 var win3iiB = [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
 var rezult3iiA = 0;
 for (var i = 0; i < v3iiplace.length; i=i+1) { if (v3iiplace[i] === win3iiA[i]) {rezult3iiA = rezult3iiA + 1;}; }
 if ( rezult3iiA === v3iiplace.length) { document.getElementById('v3iiStep').innerHTML += ' Вы выиграли'; };
 var rezult3iiB = 0;
 for (var i = 0; i < v3iiplace.length; i=i+1) { if (v3iiplace[i] === win3iiB[i]) {rezult3iiB = rezult3iiB + 1;}; }
 if ( rezult3iiB === v3iiplace.length) { document.getElementById('v3iiStep').innerHTML += ' Вы выиграли'; };
 }
</script>