Записи

<table width="500" cellspacing="10" cellpadding="10" align="center" class="colorborder">
 <tr><td>
<svg width="480" height="480" style="background:#FFF5D7;" onmousedown="v12mouseclick()">
 <circle cx="240" cy="240" r="12" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="24" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="36" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="48" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="60" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="72" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="84" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="96" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="108" stroke="#00FF6A77" stroke-width="3" fill="#FFFFFF12" />
 <circle cx="240" cy="240" r="120" stroke="#FF6A0077" stroke-width="3" fill="#FFFFFF12" />

 <text x="231" y="245"><tspan fill="#0000FF">10</tspan></text>
 <text x="220" y="50"><tspan fill="#0000FF">all point = </tspan><tspan id="v12myPoint1">0</tspan></text>
 <text x="220" y="70"><tspan fill="#00FF00">point = </tspan><tspan id="v12myPoint2">0</tspan></text>
 
 <line id="v12myline1" x1="10" y1="10" x2="10" y2="470" stroke="#006AFF77" stroke-width="2" />
 <line id="v12myline2" x1="10" y1="10" x2="470" y2="10" stroke="#006AFF77" stroke-width="2" />
 
</svg>
</td></tr>
</table>

<script>
var v12timer = setInterval(v12Anim, 10);
var v12timertag = 0;
var v12clicktag = 0;
var v12clickpoint = 0;
var v12allpoint = 0;
var v12timerbool = true;
var pointX = 0;
var pointY = 0;
function v12Anim() {
 if (v12timerbool) {
 v12timertag ++; if (v12timertag > 180) {v12timerbool=false; v12timertag = 180;}
 } else {
 v12timertag --; if (v12timertag < 0) {v12timerbool=true; v12timertag = 0;}
 }
if (v12clicktag == 0) document.getElementById('v12myline1').setAttributeNS(null, "x1", 30);
if (v12clicktag == 0) document.getElementById('v12myline1').setAttributeNS(null, "x2", 30);
if (v12clicktag == 0) document.getElementById('v12myline2').setAttributeNS(null, "y1", 30);
if (v12clicktag == 0) document.getElementById('v12myline2').setAttributeNS(null, "y2", 30);
if (v12clicktag == 1) document.getElementById('v12myline1').setAttributeNS(null, "x1", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 1) document.getElementById('v12myline1').setAttributeNS(null, "x2", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 1) pointX = 30+420* Math.sin( (v12timertag*3.1415926535)/180);
if (v12clicktag == 2) document.getElementById('v12myline2').setAttributeNS(null, "y1", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 2) document.getElementById('v12myline2').setAttributeNS(null, "y2", 30+420* Math.sin( (v12timertag*3.1415926535)/180));
if (v12clicktag == 2) pointY = 30+420* Math.sin( (v12timertag*3.1415926535)/180);
}
function v12mouseclick() {
v12clicktag ++; if (v12clicktag > 3) {v12clicktag = 0;}
v12timertag = 0;
if (v12clicktag == 3) {
 var X = 240 - pointX;
 var Y = 240 - pointY;
 var vector = Math.sqrt(X*X + Y*Y);
 v12clickpoint = 296 - Math.floor(vector);
 v12clickpoint = Math.floor((v12clickpoint / 296)*100);
 v12allpoint = v12allpoint + v12clickpoint;
 document.getElementById("v12myPoint1").innerHTML = v12allpoint; 
 document.getElementById("v12myPoint2").innerHTML = v12clickpoint; 
}
}
</script>