'javascript spinning wheel stop on spacebar press
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>
Solution 1:[1]
add another event handler , and for bigger size change the var size which is set to 250 in ur example .
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |