I have an image of a wheel of fortune wheel and I am trying to make so that when it spins it displays the correct amount for what it was spun to.
I have the following code: http://jsfiddle.net/maniator/rR67s/
Many times it is correct, and other time is is wrong.
For example I spun this:
And it alerted 300, which is wrong.
How can I fix my algorithm so that it is correct 99% of the time (or 100% if it is possible)?
HTML:
<div id="game">
<div id="tick">⇩</div>
<img id="wheel" src="http://i.imgur.com/R7JYazp.png" data-rotation="0">
</div>
Javascript:
var Wheel = (function () {
var wheel = document.getElementById('wheel'),
wheelValues = [5000, 600, 500, 300, 500, 800, 550, 400, 300, 900, 500, 300, 900, 0, 600, 400, 300, -2, 800, 350, 450, 700, 300, 600],
spinTimeout = false,
spinModifier = function () {
return Math.random() * 10 + 20;
},
modifier = spinModifier(),
slowdownSpeed = 0.5,
prefix = (function () {
if (document.body.style.MozTransform !== undefined) {
return "MozTransform";
} else if (document.body.style.WebkitTransform !== undefined) {
return "WebkitTransform";
} else if (document.body.style.OTransform !== undefined) {
return "OTransform";
} else {
return "";
}
}()),
degreeToRadian = function (deg) {
return deg / (Math.PI * 180);
};
function Wheel() {};
Wheel.prototype.rotate = function (degrees) {
var val = "rotate(-" + degrees + "deg)";
if (wheel.style[prefix] != undefined) wheel.style[prefix] = val;
var rad = degreeToRadian(degrees % 360),
filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + rad + ", M12=-" + rad + ", M21=" + rad + ", M22=" + rad + ")";
if (wheel.style["filter"] != undefined) wheel.style["filter"] = filter;
wheel.setAttribute("data-rotation", degrees);
};
Wheel.prototype.spin = function (callback, amount) {
var _this = this;
clearTimeout(spinTimeout);
modifier -= slowdownSpeed;
if (amount === undefined) {
amount = parseInt(wheel.getAttribute('data-rotation'));
}
this.rotate(amount);
if (modifier > 0) {
spinTimeout = setTimeout(function () {
_this.spin(callback, amount + modifier);
}, 1000 / 5);
} else {
var dataRotation = parseInt(wheel.getAttribute('data-rotation'));
modifier = spinModifier();
var divider = 360 / wheelValues.length;
var wheelValue = wheelValues[Math.floor(Math.round(dataRotation % 360) / divider)];
switch (wheelValue) {
case 0:
return callback(0);
case -1:
return callback("Free Spin");
case -2:
return callback("Lose a turn");
default:
return callback(wheelValue);
}
}
};
return Wheel;
})();
var wheel = new Wheel;
wheel.spin(function(spinVal){
alert(spinVal)
});
Full game for those who want to try it out: http://jsfiddle.net/maniator/XP9Qv/ (<-- this was updated using accepted answer)
The fun continues here.
I think the problem is that the arrow in the starting position is in the middle of a zone, not at the start of it. So you have a starting offset of (360 / wheelValues.length)/2
var divider = 360 / wheelValues.length;
var offset=divider/2; //half division
var wheelValue = wheelValues[Math.floor(Math.ceil((dataRotation+offset) % 360) / divider)];
This seems to work: when the wheel stops either at the beginning (first half) or at the end (last half) of a zone the showed value is the expected one (just about a dozen tests done)
var wheelValue = wheelValues[Math.floor(Math.ceil(dataRotation % 360) / 15)];
switch (wheelValue) {
I changed this line from round to ceil and got 14 out of 14 correct results..
Related
I made this red line in JavaScript that goes to closest target (balloon 1 to 3) to the player but I need to make it so that it moves like a laser starting from player position into the target position. I thought about multiple ways of implementing this with no luck.
function Tick() {
// Erase the sprite from its current location.
eraseSprite();
for (var i = 0; i < lasers.length; i++) {
lasers[i].x += lasers[i].direction.x * laserSpeed;
lasers[i].y += lasers[i].direction.y * laserSpeed;
//Hit detection here
}
function detectCharClosest() {
var ballon1char = {
x: balloon1X,
y: balloon1Y
};
var ballon2char = {
x: balloon2X,
y: balloon2Y
};
var ballon3char = {
x: balloon3X,
y: balloon3Y,
};
ballon1char.distanceFromPlayer = Math.sqrt((CharX - balloon1X) ** 2 + (CharY - balloon1Y) ** 2);
ballon2char.distanceFromPlayer = Math.sqrt((CharX - balloon2X) ** 2 + (CharY - balloon2Y) ** 2);
ballon3char.distanceFromPlayer = Math.sqrt((CharX - balloon3X) ** 2 + (CharY - balloon3Y) ** 2);
var minDistance = Math.min(
ballon1char.distanceFromPlayer,
ballon2char.distanceFromPlayer,
ballon3char.distanceFromPlayer);
console.log(ballon1char);
console.log(ballon2char);
console.log(ballon3char);
for (let i = 0; i < 3; i++) {
if (minDistance == ballon1char.distanceFromPlayer)
return ballon1char
if (minDistance == ballon2char.distanceFromPlayer)
return ballon2char
if (minDistance == ballon3char.distanceFromPlayer)
return ballon3char
}
}
function loadComplete() {
console.log("Load is complete.");
canvas = document.getElementById("theCanvas");
ctx = canvas.getContext("2d");
myInterval = self.setInterval(function () { Tick() }, INTERVAL);
myInterval = self.setInterval(function () { laserTicker(detectCharClosest()) }, 2000);
function laserTicker(balloon) {
//gets the closest ballon to go to
laserDo(balloon);
}
function laserDo(balloon) {
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#F44336"; // "red";
ctx.moveTo(CharX + 16, CharY + 16);
ctx.lineTo(balloon.x, balloon.y);
// lasers.push({x: })
ctx.stroke();
}
I didn't put all of my code here so If something doesn't make sense please tell me. I'm still new to JavaScript and learning it. One way I thought I could make this work was by taking the distance between the player and the target and dividing it by the speed on the x and y axis then changing having it start from the player position and keeps on adding up on both axis until it reaches the target. That didn't work out though. If you have any suggestions then please tell me.
Thanks
I am using FlotChart and Flot Tick Rotor [jquery.flot.tickrotor] plugins.
I tried to tweak the rotor to provide some lines between my x-axis labels by drawing some rectangles.
However, the last bar on my stacked graph is also filled with the color I set to my fills.
Can anyone help me?
Here's the image :
Here's my tweaked code :
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/*
* flot-tickrotor: flot plugin to display angled X-axis tick labels.
*
* Requires flot 0.7 or higher and a browser supporting <canvas>.
*
* To activate, just set xaxis.rotateTicks to an angle in degrees. Labels
* are rotated clockwise, so if you want the labels to angle up and to the
* right (/) you need to provide an angle > 90. The text will be flipped so
* that it is still right-side-up.
* Angles greater than or equal to 180 are ignored.
*/
(function ($) {
var options = { };
function init(plot) {
// Taken from flot-axislabels.
// This is kind of a hack. There are no hooks in Flot between
// the creation and measuring of the ticks (setTicks, measureTickLabels
// in setupGrid() ) and the drawing of the ticks and plot box
// (insertAxisLabels in setupGrid() ).
//
// Therefore, we use a trick where we run the draw routine twice:
// the first time to get the tick measurements, so that we can change
// them, and then have it draw it again.
var ticks = []; // preserve between draw() calls.
var font;
var secondPass = false;
var rotateTicks, rotateTicksRads, radsAboveHoriz;
plot.hooks.draw.push(function (plot, ctx) {
var xaxis; // for convenience
if (!secondPass) {
var opts = plot.getAxes().xaxis.options;
if (opts.rotateTicks === undefined) {
return;
}
rotateTicks = parseInt(opts.rotateTicks, 10);
if (rotateTicks.toString() != opts.rotateTicks || rotateTicks >= 180) { // || rotateTicks == 0
return;
}
rotateTicksRads = rotateTicks * Math.PI/180;
if (rotateTicks > 90) {
radsAboveHoriz = Math.PI - rotateTicksRads;
} else {
radsAboveHoriz = Math.PI/2 - rotateTicksRads;
}
font = opts.rotateTicksFont;
if (!font) {
font = $('.tickLabel').css('font');
}
if (!font) {
font = 'arial';
}
var elem, maxLabelWidth = 0, maxLabelHeight = 0, minX = 0, maxX = 0;
// We have to clear the ticks option so that flot core
// doesn't draw ticks superimposed with ours, but we preserve
// the tick data as xaxis.rotatedTicks so that external code
// can still get to it.
// FIXME: It would obviously be better to just interrupt
// the drawing of the ticks and preserve the 'ticks'
// property. That probably requires another hook.
xaxis = plot.getAxes().xaxis;
ticks = plot.getAxes().xaxis.ticks;
xaxis.rotatedTicks = ticks;
opts.ticks = []; // we'll make our own
var x;
for (var i = 0; i < ticks.length; i++) {
var raber = ticks[i].label.split(" ");
elem = $('<span style="font-size:11pt; font:' + font + '">' + ticks[i].label + '</span>');
plot.getPlaceholder().append(elem);
ticks[i].height = elem.outerHeight(true);
ticks[i].width = elem.outerWidth(true);
elem.remove();
if (ticks[i].height > maxLabelHeight) {
maxLabelHeight = ticks[i].height;
}
if (ticks[i].width > maxLabelWidth) {
maxLabelWidth = ticks[i].width;
}
var tick = ticks[i];
// See second-draw code below for explanation of offsets.
if (rotateTicks > 90) {
// See if any labels are too long and require increased left
// padding.
x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
- Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
- Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
if (x < minX) {
minX = x;
}
} else {
// See if any labels are too long and require increased right
// padding.
x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
+ Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
+ Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
if (x > maxX) {
maxX = x;
}
}
}
// Calculate maximum label height after rotating.
if (rotateTicks > 90) {
var acuteRads = rotateTicksRads - Math.PI/2;
opts.labelHeight = Math.ceil(Math.sin(acuteRads) * maxLabelWidth)
+ Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
} else {
var acuteRads = Math.PI/2 - rotateTicksRads;
// Center such that the top of the label is at the center of the tick.
opts.labelHeight = Math.ceil(Math.sin(rotateTicksRads) * maxLabelWidth)
+ Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
}
if (minX < 0) {
plot.getAxes().yaxis.options.labelWidth = -1 * minX;
}
// Doesn't seem to work if there are no values using the
// second y axis.
//if (maxX > xaxis.box.left + xaxis.box.width) {
// plot.getAxes().y2axis.options.labelWidth = maxX - xaxis.box.left - xaxis.box.width;
//}
// re-draw with new label widths and heights
secondPass = true;
plot.setupGrid();
plot.draw();
} else {
if (ticks.length == 0) {
return;
}
xaxis = plot.getAxes().xaxis;
var box = xaxis.box;
var tick, label, xoffset, yoffset;
var showWeek = false;
for (var i = 0; i < ticks.length; i++) {
tick = ticks[i];
if (!tick.label) {
continue;
}
ctx.save();
ctx.font = font;
if (rotateTicks <= 90) {
// Center such that the top of the label is at the center of the tick.
xoffset = -Math.ceil(Math.cos(radsAboveHoriz) * tick.height) - 10;
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) - 10;
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v)) + xoffset,
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(rotateTicksRads);
} else {
// We want the text to facing up, so we have to
// rotate counterclockwise, which means the label
// has to *end* at the center of the tick.
xoffset = Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
- Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.width)
+ Math.ceil(Math.sin(radsAboveHoriz) * tick.height);
ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v) + xoffset),
box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
ctx.rotate(-radsAboveHoriz);
}
var ticksMe = tick.label.split(" ");
// draw labels
var absXoffset = Math.abs(xoffset);
var leftPad = 5;
ctx.fillText(ticksMe[0], absXoffset - leftPad, 0);
if(showWeek){
ctx.fillText(ticksMe[1], (xoffset + leftPad) , yoffset * 2);
showWeek = false;
if(i == ticks.length - 1){
var offset = Math.abs(xoffset * 3);
ctx.rect(offset - 2, -10, 2 ,(yoffset * 4));
ctx.fillStyle = "#868686";
ctx.fill();
}
}
else{
showWeek = true;
ctx.rect(absXoffset - (leftPad * 2) + 2, -10, -2,(yoffset * 4));
ctx.fillStyle = "#868686";
ctx.fill();
}
ctx.restore();
}
}
});
}
$.plot.plugins.push({
init: init,
options: options,
name: 'tickRotor',
version: '1.0'
});
})(jQuery);
As I figured out, I just need to put on ctx.beginPath() and my problem got solved. :(
I have created a random fishes animation but at some point (about 10sec) from the beginning, my fishes Cling to the right, i want them to keep moving in random all over the area, any idea?
here is the fiddle link: http://jsfiddle.net/832Fx/1/
jquery code:
$.fn.rotate = function (degrees) {
var self = $(this);
self.transition({
rotateY: degrees + 'deg'
}, 5000);
};
var animeVars = {
maxPixelsPerSecond: 50,
minPixelsPerSecond: 10,
topMargin: 0,
bottomMargin: 400,
leftMargin: 0,
rightMargin: 400
};
function topFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.top_fin, .top_fins').transition({
rotate: '+=25deg',
x: '+=10'
}, speed, function () {
$(obj).find('.top_fin, .top_fins').transition({
rotate: '-=25deg',
x: '-=10'
}, speed, function () {
topFlip(obj);
});
});
}
function tailFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '-=25deg'
}, speed, function () {
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '+=25deg'
}, speed, function () {
tailFlip(obj);
});
});
}
function animateFish(obj) {
var heading = $(obj).data('heading');
if (!heading) heading = 'left';
var rotation = 0;
var currentCoords = {
top: parseInt($(obj).css('top').replace(/[^-\d\.]/g, ''), 10),
left: parseInt($(obj).css('left').replace(/[^-\d\.]/g, ''), 10)
};
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + 1) + animeVars.bottomMargin,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + 1) + animeVars.rightMargin
};
if (currentCoords.left < newCoords.left && heading != 'right') {
$(obj).rotate(180);
$(obj).data('heading', 'right');
console.log('swimming right');
} else if (currentCoords.left > newCoords.left && heading != 'left') {
$(obj).rotate(0);
$(obj).data('heading', 'left');
console.log('swimming left');
}
var totalMovement = Math.sqrt(Math.pow(currentCoords.left - newCoords.left, 2) + Math.pow(currentCoords.top - newCoords.top, 2));
console.log('Total pixels to move: ' + totalMovement);
var pps = Math.floor(Math.random() * (animeVars.maxPixelsPerSecond - animeVars.maxPixelsPerSecond)) + animeVars.maxPixelsPerSecond;
var speed = totalMovement / pps * 1000;
$(obj).data('speed', speed);
$(obj).animate({
top: newCoords.top,
left: newCoords.left
}, speed, function () {
animateFish(obj);
});
}
$(document).ready(function () {
$('.loop ').each(function () {
animateFish(this);
topFlip(this);
tailFlip(this);
});
});
Here is how I would fix this: http://jsfiddle.net/BaliBalo/832Fx/2/
I just added
var $wnd = $(window);
$wnd.resize(function() {
animeVars.rightMargin = $wnd.width();
animeVars.bottomMargin = $wnd.height();
}).resize();
at the end of your code, and changed the algorithm a bit to take in account fishes size:
var w = $(obj).width();
var h = $(obj).height();
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + h + 1) + animeVars.bottomMargin - h,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + w + 1) + animeVars.rightMargin - w
};
However, please note that many optimizations could be done, like caching jQuery objects in variables rather than calling the $ function every time.
Is it possible to create two layers (with one being translucent) in OpenLayers and move them independently? If so, how?
I want to let the user choose which layer to move or if that's not possible, move one layer via my own JavaScript code while the other is controlled by the user.
Both will be prerendered pixmap layers, if that is important.
This is the solution I came up with. It isn't pretty but it works for my purposes.
Better alternatives are very welcome ...
/**
* #requires OpenLayers/Layer/TMS.js
*/
MyLayer = OpenLayers.Class(OpenLayers.Layer.TMS, {
latShift: 0.0,
latShiftPx: 0,
setMap: function(map) {
OpenLayers.Layer.TMS.prototype.setMap.apply(this, arguments);
map.events.register("moveend", this, this.mapMoveEvent)
},
// This is the function you will want to modify for your needs
mapMoveEvent: function(event) {
var resolution = this.map.getResolution();
var center = this.map.getCenter();
// This is some calculation I use, replace it whatever you like:
var h = center.clone().transform(projmerc, proj4326);
var elliptical = EllipticalMercator.fromLonLat(h.lon, h.lat);
var myCenter = new OpenLayers.LonLat(elliptical.x, elliptical.y);
this.latShift = myCenter.lat - center.lat;
this.latShiftPx = Math.round(this.latShift/resolution);
this.div.style.top = this.latShiftPx + "px";
},
moveTo: function(bounds, zoomChanged, dragging) {
bounds = bounds.add(0, this.latShift);
OpenLayers.Layer.TMS.prototype.moveTo.apply(this, [bounds, zoomChanged, dragging]);
},
// mostly copied and pasted from Grid.js ...
moveGriddedTiles: function() {
var buffer = this.buffer + 1;
while(true) {
var tlTile = this.grid[0][0];
var tlViewPort = {
x: tlTile.position.x +
this.map.layerContainerOriginPx.x,
y: tlTile.position.y +
this.map.layerContainerOriginPx.y + this.latShiftPx // ... except this line
};
var ratio = this.getServerResolution() / this.map.getResolution();
var tileSize = {
w: Math.round(this.tileSize.w * ratio),
h: Math.round(this.tileSize.h * ratio)
};
if (tlViewPort.x > -tileSize.w * (buffer - 1)) {
this.shiftColumn(true, tileSize);
} else if (tlViewPort.x < -tileSize.w * buffer) {
this.shiftColumn(false, tileSize);
} else if (tlViewPort.y > -tileSize.h * (buffer - 1)) {
this.shiftRow(true, tileSize);
} else if (tlViewPort.y < -tileSize.h * buffer) {
this.shiftRow(false, tileSize);
} else {
break;
}
}
},
CLASS_NAME: "MyLayer"
});
Note that this only works with OpenLayers 2.13 or newer
I have created a function to rotate images, and now what I would like to do is to stop the images from rotating when I use the mouseover command. this is the js coding I have to get the images to rotate
var m = {
Z : 100,
xm : 0,
xmm : .25,
ymm : 0,
ym : 0,
mx : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
xR : 0,
nI : 0,
scr : 0,
img : 0,
run : function () {
m.xm += (m.xmm - m.xm) * .1;
if (m.ym < m.nw * .15) m.ym++;
m.xR += m.xm;
for (var i = 0; i < m.nI; i++){
var A = (i * 360 / m.nI) + m.xR;
var x = Math.cos(A * (Math.PI / 180));
var y = Math.sin(A * (Math.PI / 180));
var a = m.img[i];
a.style.width = ''.concat(Math.round(Math.abs(y * m.ym) + y * m.Z), 'px');
a.style.left = ''.concat(Math.round((m.nw * .5) + x * ((m.nw * .5) - (m.nw * .05)) - ((Math.abs(y * m.ym) + y * m.Z) * .5)), 'px');
a.style.height = ''.concat(Math.round(m.ym + y * m.Z), 'px');
a.style.top = ''.concat(Math.round((m.nh * .5) - (m.ym * .5) - x * (m.Z * .5) - (m.ymm * y)), 'px');
a.style.zIndex = 600 + Math.round(y);
m.setOpacity(a, (y * 50) + 100);
}
setTimeout(m.run, 30);
},
I really did not read your code in detail, but what you could probably do is set a parameter outside the function, maybe a global parameter to the function that rotates your image, call it "rotate" and set it to TRUE
Then, before you make the actual rotation, you check if this "rotate" param set to TRUE, if yes then rotate.
Now, onmouseover, all you have to do is set the "rotate" param to FALSE, and then when it its FALSE when the setTimeout trigger is expires and the function starts again, the imagee would not rotate becaues it failed your test.
Another approach is to set your setTimeout to trigger only when not on mousenotover, so if on mouse over, do not set the timeout, othersie, set the time out.
Those are just two ideas that just came to my mind reading your code, I think you can think about it and decide if those are solutions you like, and if not then I would be interested to know what you decided.
Cheers.
The next code is just an approximation, and is more like a "pseudo code" than a production code. Anyways feel free to modify as you need.
var m = {
run: function() {
this.isRunning = true;
// when complete the cycle
this.cycle = true;
},
play: function() {
this.timeout = setTimeout((function($this){
if($this.animCheck !== undefined) clearInterval($this.animCheck);
$this.run();
})(this), this.frames);
},
pause: function() {
this.animCheck = setInterval((function($this) {
// Obviously, you've to pause the animation when the cycle is finished.
if($this.cycle) clearTimeout($this.timeout);
})(this), this.frames);
return !!this.animCheck;
},
init: function() {
this.frames = 30;
this.isRunning = true;
[the element].addEventListener('mouseover', function() {
if(this.pause()) this.isRunning = false;
})
this.play();
}
};
m.init();