Записи

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