javascript spinning wheel stop on spacebar press

Question

I have a javascript code that needs a bit of tweening so it will work correct.

QUESTION 1 The spinning starts by SPACEBAR press. But i also want it to stop spinning when i press PRESSBAR. How can i do that?

QUESTION 2 Is there a way to make the "spinning wheel" bigger in size?

The original source code comes from: https://jsfiddle.net/lannymcnie/ych1qt8u/


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Spinning Wheel</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- https://jsfiddle.net/lannymcnie/ych1qt8u/ -->
    
  <!--script
    type="text/javascript"
    src="/js/lib/dummy.js"></script-->

    <link rel="stylesheet" type="text/css" href="result-light.css">

      <script type="text/javascript" src="createjs.min.js"></script>
    <!--script type="text/javascript" src="https://rawgit.com/CreateJS/Combined/master/builds/1.0.0/createjs.min.js"></script-->

  <style id="compiled-css" type="text/css">
      body, html {
  margin: 0; padding: 0;
}
canvas {
  
}
    /* EOS */
  </style>

  <script id="insert"></script>


    <script src="stringify.js" charset="utf-8"></script>
    <script>
      const customConsole = (w) => {
        const pushToConsole = (payload, type) => {
          w.parent.postMessage({
            console: {
              payload: stringify(payload),
              type:    type
            }
          }, "*")
        }

        w.onerror = (message, url, line, column) => {
          // the line needs to correspond with the editor panel
          // unfortunately this number needs to be altered every time this view is changed
          line = line - 70
          if (line < 0){
            pushToConsole(message, "error")
          } else {
            pushToConsole(`[${line}:${column}] ${message}`, "error")
          }
        }

        let console = (function(systemConsole){
          return {
            log: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "log")
              systemConsole.log.apply(this, args)
            },
            info: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "info")
              systemConsole.info.apply(this, args)
            },
            warn: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "warn")
              systemConsole.warn.apply(this, args)
            },
            error: function(){
              let args = Array.from(arguments)
              pushToConsole(args, "error")
              systemConsole.error.apply(this, args)
            },
            system: function(arg){
              pushToConsole(arg, "system")
            },
            clear: function(){
              systemConsole.clear.apply(this, {})
            },
            time: function(){
              let args = Array.from(arguments)
              systemConsole.time.apply(this, args)
            },
            assert: function(assertion, label){
              if (!assertion){
                pushToConsole(label, "log")
              }

              let args = Array.from(arguments)
              systemConsole.assert.apply(this, args)
            }
          }
        }(window.console))

        window.console = { ...window.console, ...console }

        console.system("Running fiddle")
      }

      if (window.parent){
        customConsole(window)
      }
    </script>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>

    <script type="text/javascript">//<![CDATA[


var stage = new createjs.Stage("canvas");
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.on("tick", tick);

var c = new createjs.Container(),
        s = new createjs.Shape();
    
var segments = 24,
    size = 250,
    angle = Math.PI*2/segments;
  
// Draw a wheel  
for (var i=0, l=segments; i<l; i++) {
    s.graphics.f((i%2==0)?"#bbb":"#ddd")
    .mt(0,0)
    .lt(Math.cos(angle*i)*size, Math.sin(angle*i)*size)
        .arc(0,0,size, i*angle, i*angle+angle)
    .lt(0,0);
    
  // Add text child
  var num = new createjs.Text(i,(size/8)+"px Arial Black", "#000")
        .set({textAlign:"center", regY:size-5, rotation:angle*180/Math.PI * (i+0.5)});
  c.addChild(num);
}

c.addChildAt(s, 0);
c.x = c.y = size + 20; 
c.cache(-size,-size,size*2,size*2);


c.rotation = -360/segments/2; // Rotate by 1/2 segment to align at 0

// Red Notch
var notch = new createjs.Shape();
notch.x = c.x;
notch.y = c.y-size;
notch.graphics.f("red").drawPolyStar(0,0,12,3,2,90);

// Where the wheel should land
var newNum = new createjs.Text("0", "50px Arial", "#FFF")
    .set({x:c.x, y: c.y+size+10, textAlign:"center"});


stage.addChild(c,notch,newNum);

// Mode. 0=stopped, 1=moving, 2=stopping
c.mode = 0;

        
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    /*spin()*/
      c.mode = 1;
  }
}

/*container.on("click", null);*/
        
// When clicked, cycle mode.

c.on("click", function(e) {
    if (c.mode == 0) {
    c.mode = 1;
  } else if (c.mode == 1) {
    c.mode = 2;
    
    // Slow down. Find the end angle, and tween to it
    var num = Math.random() * segments | 0, // Choose a number,
        angleR = angle * 180/Math.PI, // Angle in degrees
        adjusted = (c.rotation - 360),  // Add to the current rotation
      numRotations = Math.ceil(adjusted/360)*360 - num*angleR - angleR/2; // Find the final number.
    
    newNum.text = num; // Show the end number
    
    createjs.Tween.get(c)
        .to({rotation:numRotations}, 3000, createjs.Ease.cubicOut)
      .call(function() { c.mode = 0; });
  }
});


function tick(event) {
    if (c.mode == 1) {
    c.rotation -= 10; // Rotate if mode 1
  }
    stage.update(event);
}


  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "ych1qt8u"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>

    <script>
      let allLines = []

      window.addEventListener("message", (message) => {
        if (message.data.console){
          let insert = document.querySelector("#insert")
          allLines.push(message.data.console.payload)
          insert.innerHTML = allLines.join(";\r")

          let result = eval.call(null, message.data.console.payload)
          if (result !== undefined){
            console.log(result)
          }
        }
      })
    </script>

</body>
</html>

Answer 1

add another event handler, and for bigger size change the var size which is set to 250 in ur example.

javascript spinning wheel stop on spacebar press

Question

1 answers

solution1
-1 ACCPTED

javascript spinning wheel stop on spacebar press

Question

1 answers

solution1 -1 ACCPTED

solution1
-1 ACCPTED