Записи

<table class="colorborder" width="500" height="300">
<tr><td align="center">
<img src="/jgame/pazl/pazl1.png" id="v49imgmini1" hidden>
<img src="/jgame/pazl/pazl2.png" id="v49imgmini2" hidden>
<img src="/jgame/pazl/pazl3.png" id="v49imgmini3" hidden>
<img src="/jgame/pazl/pazl4.png" id="v49imgmini4" hidden>
</td></tr>
<tr><td align="center">
<canvas id="v49myCanvas" width="500" height="300" onclick="v49canvasClick()"></canvas>
</td></tr>
<tr><td align="center">
<input type="button" value="старт" onclick="v49StartClick();">
</td></tr> 
</table>

<script>
 var v49canvas = document.getElementById('v49myCanvas');
 var v49context = v49canvas.getContext('2d');
 var v49base_image1 = new Image();
 v49base_image1.src = document.getElementById('v49imgmini1').src;
 var v49base_image2 = new Image();
 v49base_image2.src = document.getElementById('v49imgmini2').src;
 var v49base_image3 = new Image();
 v49base_image3.src = document.getElementById('v49imgmini3').src;
 var v49base_image4 = new Image();
 v49base_image4.src = document.getElementById('v49imgmini4').src;
 var v49NumClick = 0;
 var v49NumpaintImg1 = 0;
 var v49NumpaintImg2 = 1;
 var v49NumpaintImg3 = 2;
 var v49NumpaintImg4 = 3;
 v49update();
//add
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
function v49getRandomInt(min, max, myvalue) {
 var tmpvalue = Math.floor(Math.random() * (max - min)) + min;
 if (tmpvalue === myvalue) { tmpvalue = Math.floor(Math.random() * (max - min)) + min; }
 if (tmpvalue === myvalue) { tmpvalue = Math.floor(Math.random() * (max - min)) + min; }
 if (tmpvalue === myvalue) { tmpvalue = Math.floor(Math.random() * (max - min)) + min; }
 if (tmpvalue === myvalue) { tmpvalue = Math.floor(Math.random() * (max - min)) + min; }
 if (tmpvalue === myvalue) { tmpvalue = Math.floor(Math.random() * (max - min)) + min; }
 return tmpvalue;
} 

function v49update() {
 v49context.clearRect(0, 0, 500, 300);
 //1
 if (v49NumpaintImg1 === 0) v49context.drawImage(v49base_image1, 0, 0, 250, 150, 0, 0 ,250 , 150);
 if (v49NumpaintImg1 === 1) v49context.drawImage(v49base_image2, 0, 0, 250, 150, 0, 0 ,250 , 150);
 if (v49NumpaintImg1 === 2) v49context.drawImage(v49base_image3, 0, 0, 250, 150, 0, 0 ,250 , 150);
 if (v49NumpaintImg1 === 3) v49context.drawImage(v49base_image4, 0, 0, 250, 150, 0, 0 ,250 , 150);
 //2
 if (v49NumpaintImg2 === 0) v49context.drawImage(v49base_image1, 250, 0, 250, 150, 250, 0 ,250 , 150);
 if (v49NumpaintImg2 === 1) v49context.drawImage(v49base_image2, 250, 0, 250, 150, 250, 0 ,250 , 150);
 if (v49NumpaintImg2 === 2) v49context.drawImage(v49base_image3, 250, 0, 250, 150, 250, 0 ,250 , 150);
 if (v49NumpaintImg2 === 3) v49context.drawImage(v49base_image4, 250, 0, 250, 150, 250, 0 ,250 , 150);
 //3
 if (v49NumpaintImg3 === 0) v49context.drawImage(v49base_image1, 0, 150, 250, 150, 0, 150 ,250 , 150);
 if (v49NumpaintImg3 === 1) v49context.drawImage(v49base_image2, 0, 150, 250, 150, 0, 150 ,250 , 150);
 if (v49NumpaintImg3 === 2) v49context.drawImage(v49base_image3, 0, 150, 250, 150, 0, 150 ,250 , 150);
 if (v49NumpaintImg3 === 3) v49context.drawImage(v49base_image4, 0, 150, 250, 150, 0, 150 ,250 , 150);
 //4
 if (v49NumpaintImg4 === 0) v49context.drawImage(v49base_image1, 250, 150, 250, 150, 250, 150 ,250 , 150);
 if (v49NumpaintImg4 === 1) v49context.drawImage(v49base_image2, 250, 150, 250, 150, 250, 150 ,250 , 150);
 if (v49NumpaintImg4 === 2) v49context.drawImage(v49base_image3, 250, 150, 250, 150, 250, 150 ,250 , 150);
 if (v49NumpaintImg4 === 3) v49context.drawImage(v49base_image4, 250, 150, 250, 150, 250, 150 ,250 , 150);
 //
 requestAnimationFrame(v49update);
 }

function v49canvasClick() {
if (v49NumClick === 0) v49NumpaintImg1 = v49getRandomInt(0, 4, v49NumpaintImg1);
if (v49NumClick === 1) v49NumpaintImg2 = v49getRandomInt(0, 4, v49NumpaintImg2);
if (v49NumClick === 2) v49NumpaintImg3 = v49getRandomInt(0, 4, v49NumpaintImg3);
if (v49NumClick === 3) v49NumpaintImg4 = v49getRandomInt(0, 4, v49NumpaintImg4);
}

function v49StartClick() {
 v49NumpaintImg1 = v49getRandomInt(0, 4, v49NumpaintImg1);
 v49NumpaintImg2 = v49getRandomInt(0, 4, v49NumpaintImg2);
 v49NumpaintImg3 = v49getRandomInt(0, 4, v49NumpaintImg3);
 v49NumpaintImg4 = v49getRandomInt(0, 4, v49NumpaintImg4);
}

var v49MouseMove = function(e) {
 var v49elm = document.getElementById('v49myCanvas');
 var v49coordspanel = getOffset(v49elm);
 var v49mX = e.pageX - v49coordspanel.left;
 var v49mY = e.pageY - v49coordspanel.top;
 //
 if ((v49mX < 250)&&(v49mY < 150)) v49NumClick = 0;
 if ((v49mX > 250)&&(v49mY < 150)) v49NumClick = 1;
 if ((v49mX < 250)&&(v49mY > 150)) v49NumClick = 2;
 if ((v49mX > 250)&&(v49mY > 150)) v49NumClick = 3;
};
v49canvas.addEventListener("mousemove", v49MouseMove, false);

</script>