<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>