Записи

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

<svg width="200" height="200" style="background:#FFF5D7; cursor:pointer;" id="vg9svgcont">
 <style> .vg9gri {font: 50px sans-serif; fill: #6dd;}</style>
 <rect x="30" y="30" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect1" rx="10"/>
 <rect x="40" y="40" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect2" rx="10"/>
 <rect x="50" y="50" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect3" rx="10"/>
 <rect x="60" y="60" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect4" rx="10"/>
 <rect x="70" y="70" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect5" rx="10"/>
 <rect x="80" y="80" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect6" rx="10"/>
 <rect x="90" y="90" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect7" rx="10"/>
 <rect x="100" y="100" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect8" rx="10"/>
 <rect x="110" y="110" width="50" height="50" fill="#FF6A00" stroke="#0094FF" stroke-width="2" id="vg9rect9" rx="10"/>
 <text class="vg9gri" x="35" y="70" id="vg9text1">1</text>
 <text class="vg9gri" x="45" y="80" id="vg9text2">2</text>
 <text class="vg9gri" x="55" y="90" id="vg9text3">3</text>
 <text class="vg9gri" x="65" y="100" id="vg9text4">4</text>
 <text class="vg9gri" x="75" y="110" id="vg9text5">5</text>
 <text class="vg9gri" x="85" y="120" id="vg9text6">6</text>
 <text class="vg9gri" x="95" y="130" id="vg9text7">7</text>
 <text class="vg9gri" x="105" y="140" id="vg9text8">8</text>
 <text class="vg9gri" x="115" y="150" id="vg9text9"></text>
</svg>

</td><td>
<center><img src="/jgame/game9/ImArr1.jpg" style="cursor:pointer" onclick="vg9ArGoClick(0)"/></center>
<center><img src="/jgame/game9/ImArr2.jpg" style="cursor:pointer" onclick="vg9ArGoClick(1)"/></center>
<center><img src="/jgame/game9/ImArr3.jpg" style="cursor:pointer" onclick="vg9ArGoClick(2)"/></center>
<center><img src="/jgame/game9/ImArr4.jpg" style="cursor:pointer" onclick="vg9ArGoClick(3)"/></center>
</td></tr>
 <tr><td>
 <center><input type="button" onclick="vg9SortClick()" value="перемешать" /></center>
 </td><td></td></tr>
</table>

<script>
var vg9coordXR = [25, 75, 125, 25, 75, 125, 25, 75, 125];
var vg9coordYR = [25, 25, 25, 75, 75, 75, 125, 125, 125];
var vg9coordXT = [25+10, 75+10, 125+10, 25+10, 75+10, 125+10, 25+10, 75+10, 125+10];
var vg9coordYT = [25+45, 25+45, 25+45, 75+45, 75+45, 75+45, 125+45, 125+45, 125+45];
for (var i = 0; i < 9; i++) {
 document.getElementById('vg9rect'+eval(i+1)).setAttributeNS(null, 'x', vg9coordXR[i]);
 document.getElementById('vg9rect'+eval(i+1)).setAttributeNS(null, 'y', vg9coordYR[i]);
 document.getElementById('vg9text'+eval(i+1)).setAttributeNS(null, 'x', vg9coordXT[i]);
 document.getElementById('vg9text'+eval(i+1)).setAttributeNS(null, 'y', vg9coordYT[i]);
}
</script>

<script>
var vg9place = [1, 2, 3, 4, 5, 6, 7, 8, 0];
var vg9colstep = 0;
function vg9ArGoClick(NumAr) {
 var tmpNumZero = 0;
 for (var i = 0; i < 9; i++) {
 if (vg9place[i] === 0) tmpNumZero = i;
 }
 if ((NumAr === 2)&&(tmpNumZero - 1 > -1)) vg9ButtonClick(tmpNumZero - 1); 
 if ((NumAr === 0)&&(tmpNumZero - 3 > -1)) vg9ButtonClick(tmpNumZero - 3); 
 if ((NumAr === 3)&&(tmpNumZero + 1 < 9)) vg9ButtonClick(tmpNumZero + 1); 
 if ((NumAr === 1)&&(tmpNumZero + 3 < 9)) vg9ButtonClick(tmpNumZero + 3); 
}
function vg9ButtonClick(NumBut) {
 if (NumBut == 0) { flagL = false; flagT = false; flagR = true; flagB = true; }
 if (NumBut == 1) { flagL = true; flagT = false; flagR = true; flagB = true; }
 if (NumBut == 2) { flagL = true; flagT = false; flagR = false; flagB = true; }
 if (NumBut == 3) { flagL = false; flagT = true; flagR = true; flagB = true; }
 if (NumBut == 4) { flagL = true; flagT = true; flagR = true; flagB = true; }
 if (NumBut == 5) { flagL = true; flagT = true; flagR = false; flagB = true; }
 if (NumBut == 6) { flagL = false; flagT = true; flagR = true; flagB = false; }
 if (NumBut == 7) { flagL = true; flagT = true; flagR = true; flagB = false; }
 if (NumBut == 8) { flagL = true; flagT = true; flagR = false; flagB = false; }
 if (flagL) { if (vg9place[NumBut-1] == 0) { vg9GoClick(NumBut, NumBut-1) } }
 if (flagT) { if (vg9place[NumBut-3] == 0) { vg9GoClick(NumBut, NumBut-3) } }
 if (flagR) { if (vg9place[NumBut+1] == 0) { vg9GoClick(NumBut, NumBut+1) } }
 if (flagB) { if (vg9place[NumBut+3] == 0) { vg9GoClick(NumBut, NumBut+3) } }
}
function vg9GoClick(A1, A2) {
 vg9place[A2] = vg9place[A1];
 vg9place[A1] = 0;
 vg9GoDraw();
 vg9minigame1Win();
}
function vg9GoDraw() {
 vg9colstep = vg9colstep + 1;
 document.getElementById('vg9Step').innerHTML = "step:" + vg9colstep;
 //
 for (var i = 0; i < 9; i++) {
 document.getElementById('vg9text'+eval(i+1)).textContent = vg9place[i];
 if (vg9place[i] === 0) document.getElementById('vg9text'+eval(i+1)).textContent = "";
}
}
function vg9SortClick() {
 for (var i = 0; i < 1000; i++) { vg9ButtonClick(vg9getRandomInt(0, 8)); }
 for (var i = 0; i < vg9place.length; i=i+1) { document.getElementById('vg9rect'+eval(i+1)).setAttributeNS(null, 'stroke', "#0094FF"); };
 vg9colstep = 0;
 document.getElementById('vg9Step').innerHTML = "step:" + vg9colstep;
}
function vg9getRandomInt(min, max) {
 return Math.floor(Math.random() * (max - min)) + min;
}
 function vg9minigame1Win() {
 var vg9winA = [1, 2, 3, 4, 5, 6, 7, 8, 0];
 var vg9rezultA = 0;
 for (var i = 0; i < vg9place.length; i=i+1) { if (vg9place[i] === vg9winA[i]) {vg9rezultA = vg9rezultA + 1;}; }
 if ( vg9rezultA === vg9place.length) {
 for (var i = 0; i < vg9place.length; i=i+1) { document.getElementById('vg9rect'+eval(i+1)).setAttributeNS(null, 'stroke', "#94FF94"); };
 }
} 
</script>
<script>
var vg9NumClick = 0;
function getOffset(elem) {
 if (elem.getBoundingClientRect) {
 return getOffsetRect(elem)
 } else {
 return getOffsetSum(elem)
 }
}
function getOffsetSum(elem) {
 var top=0, left=0
 while(elem) {
 top = top + parseInt(elem.offsetTop)
 left = left + parseInt(elem.offsetLeft)
 elem = elem.offsetParent
 }
 return {top: top, left: left}
}
function getOffsetRect(elem) {
 var box = elem.getBoundingClientRect()
 var body = document.body
 var docElem = document.documentElement
 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0
 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft
 return { top: Math.round(top), left: Math.round(left) }
}
//end add
var vg9MouseMove = function(e) {
 var vg9elm = document.getElementById('vg9svgcont');
 var vg9coordspanel = getOffset(vg9elm);
 var vg9mX = e.pageX - vg9coordspanel.left;
 var vg9mY = e.pageY - vg9coordspanel.top;
 //
 for (var i = 0; i < 9; i++) {
 if ((vg9mX > vg9coordXR[i])&&(vg9mX < vg9coordXR[i] + 50)&&(vg9mY > vg9coordYR[i])&&(vg9mY < vg9coordYR[i] + 50)) vg9NumClick = i;
 }
};
var vg9MouseDown = function(e) {
 vg9ButtonClick(vg9NumClick);
};

document.getElementById('vg9svgcont').addEventListener("mousemove", vg9MouseMove, false);
document.getElementById('vg9svgcont').addEventListener("mousedown", vg9MouseDown, false);
</script>