Drag and drop clock

I’m making a simple clock game . the idea is make make the hour

and minute drag-able to a certain time required . I

need to make the hours numbered as circles (1 to 12 ) and

to be drag-able according to the clock layout. Here is what I have done so far :

How can I make something like this :

var clock = document.getElementById('clock');
for (var i=1; i<=12; i++) {
var nmb = document.createElementNS("http://www.w3.org/2000/svg","text");
var ang = 90 - 30 * i,
nx = 48 + 38 * Math.cos(ang*Math.PI/180),
ny = 52 - 38 * Math.sin(ang*Math.PI/180);
nmb.setAttributeNS(null,"x",nx);     
nmb.setAttributeNS(null,"y",ny); 
nmb.setAttributeNS(null,"font-size","10");
nmb.appendChild(document.createTextNode(i));
clock.appendChild(nmb);
 }

var min = document.getElementById('min');
var hour = document.getElementById('hour');
var theTime = { hour: 12, min: 0 };
var movingElem = null;
function mouseDown(e) { movingElem = e.target; }
function mouseUp(e) {   movingElem = null; }
function mouseMove(e) {
 if (movingElem) {
  var vwp = movingElem.nearestViewportElement,
        ctm = vwp.getScreenCTM(),
    pnt = vwp.createSVGPoint();
      pnt.x = e.clientX;
        pnt.y = e.clientY;
var loc = pnt.matrixTransform(ctm.inverse());
var deg = 90 - Math.atan2(50 - loc.y, loc.x - 50) * 180 / Math.PI;
 deg = deg + 15 - (deg + 15 + 360) % 30;
 var val = (12 + Math.round(deg / 30)) % 12
 theTime[movingElem.id] = movingElem.id == 'min' ? val * 5 : (val == 0 ?     12 : val);
console.log(theTime);
    movingElem.setAttribute('transform', 'rotate(' + deg + ' 50 50)');
   }
 }

 min.addEventListener('mousedown', mouseDown, false);
 hour.addEventListener('mousedown', mouseDown, false);
 document.addEventListener('mouseup', mouseUp, false);
 document.addEventListener('mousemove', mouseMove, false);

@sarmadmueen84, did you have a question you wanted to ask here? If you ran into a problem with this code, it would help if you could describe clearly what that problem is, or copy and paste any error you got in your console.

My question is how to make the hours (1 to 12 ) as drag and drop circles

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.