<table width="500" height="240" align="center" class="colorborder"><tr><td> <style> .variable{ font-weight: bold; } .background{ fill: none; stroke: #444; stroke-width: 1; stroke-dasharray: 5, 5; } .control_line{ stroke: #28f; stroke-width: 0.5; } .point1{ fill: #28A86B; } .point2{ fill: #6495ED; } .point3{ fill: #FF7878; } .point4{ fill: #8D5FD3; } #ver31idexample_shape{ fill: none; stroke: #111; stroke-width: 0.8; } #ver32idexample_shape{ fill: none; stroke: #111; stroke-width: 0.8; } #ver33idexample_shape{ fill: none; stroke: #111; stroke-width: 0.8; } .control_point{ fill: #FFF; opacity: 0; stroke: #888; stroke-width: 2; cursor: pointer; } .control_point:hover{ opacity: 0.5; } .invisible{ pointer-events: none; } #ver3myPoint1:hover{ fill: blue; } </style> <svg width="500" height="500" onload="ver3init(evt)" onmouseup="ver3deselect()"> <g class="invisible"> <path id="ver31idexample_shape" d="M20 100 C150 20 180 150 480 100 " /> <path id="ver32idexample_shape" d="M20 200 C150 20 180 150 480 200 " /> <path id="ver33idexample_shape" d="M20 300 C150 20 180 150 480 300 " /> </g> <g transform="translate(20,100)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver31selectElement(evt, 1)" /> <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint311" /> </g> <g transform="translate(480,100)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver31selectElement(evt, 4)" /> <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint314" /> </g> <g transform="translate(20,200)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver32selectElement(evt, 1)" /> <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint321" /> </g> <g transform="translate(480,200)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver32selectElement(evt, 4)" /> <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint324" /> </g> <g transform="translate(20,300)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver33selectElement(evt, 1)" /> <circle class="point1 invisible" cx="0" cy="0" r="5" id="idpoint331" /> </g> <g transform="translate(480,300)" > <circle class="control_point" cx="0" cy="0" r="15" onmousedown="ver33selectElement(evt, 4)" /> <circle class="point4 invisible" cx="0" cy="0" r="5" id="idpoint334" /> </g> <text x="200" y="410"> <tspan id="ver3myPoint2" class="point2 variable" ></tspan> </text> <text x="200" y="430"> <tspan id="ver3myPoint1" class="point2 variable" style="cursor:pointer" onclick="ver3clickstart()">start</tspan> </text> </svg> <script type="text/javascript"> var ver31selectedPoint = 0; var ver32selectedPoint = 0; var ver33selectedPoint = 0; var ver31dx = 0; var ver31dy = 0; var ver32dx = 0; var ver32dy = 0; var ver33dx = 0; var ver33dy = 0; var ver3ArPlaceLGame = [1,2,3]; var ver3ArPlaceRGame = [5,5,5]; var ver31example_shape; var ver32example_shape; var ver33example_shape; var ver31coords = [0, 0, 20, 100, 150, 20, 180, 150, 480, 100]; var ver32coords = [0, 0, 20, 200, 150, 20, 180, 150, 480, 200]; var ver33coords = [0, 0, 20, 300, 150, 20, 180, 150, 480, 300]; var ver3ArPlace = [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,2,1],[3,1,2]]; function ver3getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function ver3init(evt) { ver31example_shape = document.getElementById('ver31idexample_shape'); ver32example_shape = document.getElementById('ver32idexample_shape'); ver33example_shape = document.getElementById('ver33idexample_shape'); }; function ver31selectElement(evt, point){ ver31selectedPoint = point; control_point = evt.target.parentNode; ver31dx = ver31coords[ver31selectedPoint*2] - evt.clientX; ver31dy = ver31coords[ver31selectedPoint*2 + 1] - evt.clientY; ver3clickpoint(); }; function ver32selectElement(evt, point){ ver32selectedPoint = point; control_point = evt.target.parentNode; ver32dx = ver32coords[ver32selectedPoint*2] - evt.clientX; ver32dy = ver32coords[ver32selectedPoint*2 + 1] - evt.clientY; ver3clickpoint(); }; function ver33selectElement(evt, point){ ver33selectedPoint = point; control_point = evt.target.parentNode; ver33dx = ver33coords[ver33selectedPoint*2] - evt.clientX; ver33dy = ver33coords[ver33selectedPoint*2 + 1] - evt.clientY; ver3clickpoint(); }; function ver3clickstart(){ ver3ArPlaceLGame = ver3ArPlace[ver3getRandomInt(0, 6)]; eval("ver3"+ver3ArPlaceLGame[0]+"coords")[9] = 100; eval("ver3"+ver3ArPlaceLGame[1]+"coords")[9] = 200; eval("ver3"+ver3ArPlaceLGame[2]+"coords")[9] = 300; var d = "M"; for (var i=2; i<ver31coords.length; i+=2){ if (i === 4) { d += "C"; for (var j=0; j<2; j+=1){ d += " " + ver3getRandomInt(50, 150); d += "," + ver3getRandomInt(50, 450); d += " " + ver3getRandomInt(50, 150); } } d += " " + ver31coords[i] + "," + ver31coords[i+1]; } ver31example_shape.setAttributeNS(null, "d", d); var d = "M"; for (var i=2; i<ver32coords.length; i+=2){ if (i === 4) { d += "C"; for (var j=0; j<2; j+=1){ d += " " + ver3getRandomInt(50, 150); d += "," + ver3getRandomInt(50, 450); d += " " + ver3getRandomInt(50, 150); } } d += " " + ver32coords[i] + "," + ver32coords[i+1]; } ver32example_shape.setAttributeNS(null, "d", d); var d = "M"; for (var i=2; i<ver33coords.length; i+=2){ if (i === 4) { d += "C"; for (var j=0; j<4; j+=1){ d += " " + ver3getRandomInt(50, 150); d += "," + ver3getRandomInt(50, 450); d += " " + ver3getRandomInt(50, 150); } } d += " " + ver33coords[i] + "," + ver33coords[i+1]; } ver33example_shape.setAttributeNS(null, "d", d); document.getElementById("ver3myPoint1").innerHTML = "поиск пути"; document.getElementById("ver3myPoint2").innerHTML = ""; }; function ver3clickpoint(){ if (ver31selectedPoint === 1) if (document.getElementById('idpoint311').style.fill === "red") { document.getElementById('idpoint311').style.fill = "gray"; } else { document.getElementById('idpoint311').style.fill = "red"; } if (ver32selectedPoint === 1) if (document.getElementById('idpoint321').style.fill === "blue") { document.getElementById('idpoint321').style.fill = "gray"; } else { document.getElementById('idpoint321').style.fill = "blue"; } if (ver33selectedPoint === 1) if (document.getElementById('idpoint331').style.fill === "yellow") { document.getElementById('idpoint331').style.fill = "gray"; } else { document.getElementById('idpoint331').style.fill = "yellow"; } if (ver31selectedPoint === 4) if (document.getElementById('idpoint314').style.fill === "red") {document.getElementById('idpoint314').style.fill = "blue"; ver3ArPlaceRGame[0] = 2;} else { if (document.getElementById('idpoint314').style.fill === "blue") {document.getElementById('idpoint314').style.fill = "yellow"; ver3ArPlaceRGame[0] = 3;} else { if (document.getElementById('idpoint314').style.fill === "yellow") {document.getElementById('idpoint314').style.fill = "gray"; ver3ArPlaceRGame[0] = 4;} else { document.getElementById('idpoint314').style.fill = "red"; ver3ArPlaceRGame[0] = 1;}}} if (ver32selectedPoint === 4) if (document.getElementById('idpoint324').style.fill === "red") {document.getElementById('idpoint324').style.fill = "blue"; ver3ArPlaceRGame[1] = 2;} else { if (document.getElementById('idpoint324').style.fill === "blue") {document.getElementById('idpoint324').style.fill = "yellow"; ver3ArPlaceRGame[1] = 3;} else { if (document.getElementById('idpoint324').style.fill === "yellow") {document.getElementById('idpoint324').style.fill = "gray"; ver3ArPlaceRGame[1] = 4;} else { document.getElementById('idpoint324').style.fill = "red"; ver3ArPlaceRGame[1] = 1;}}} if (ver33selectedPoint === 4) if (document.getElementById('idpoint334').style.fill === "red") {document.getElementById('idpoint334').style.fill = "blue"; ver3ArPlaceRGame[2] = 2;} else { if (document.getElementById('idpoint334').style.fill === "blue") {document.getElementById('idpoint334').style.fill = "yellow"; ver3ArPlaceRGame[2] = 3;} else { if (document.getElementById('idpoint334').style.fill === "yellow") {document.getElementById('idpoint334').style.fill = "gray"; ver3ArPlaceRGame[2] = 4;} else { document.getElementById('idpoint334').style.fill = "red"; ver3ArPlaceRGame[2] = 1;}}} document.getElementById("ver3myPoint1").innerHTML = "поиск пути"; document.getElementById("ver3myPoint2").innerHTML = ""; if (ver3ArPlaceLGame[0] === ver3ArPlaceRGame[0]) if (ver3ArPlaceLGame[1] === ver3ArPlaceRGame[1]) if (ver3ArPlaceLGame[2] === ver3ArPlaceRGame[2]) { document.getElementById("ver3myPoint1").innerHTML = "старт"; document.getElementById("ver3myPoint2").innerHTML = "путь правильный"; } }; function ver3deselect(){ ver31selectedPoint = 0; ver32selectedPoint = 0; ver33selectedPoint = 0; } </script> </td></tr> </table>