I've set up a simple matching game using JavaScript to gather the cards in an array and then randomly repopulate the page. Everything seems to be working great except for one thing; the last image always stays the same. I can't seem to figure out why.
Here's a link to the game: http://hdesigns.x10.mx/matching/
Any help would be greatly appreciated.
Math.random returns a number between 0 and .9 repeating. Never 1.
Change
var idx = Math.floor((Math.random() * (deck.length-1)));
to
var idx = Math.floor(Math.random() * deck.length);
on line 98 of main.js.
Try:
var idx = Math.floor(Math.random() * deck.length);
Instead of:
var idx = Math.floor((Math.random() * (deck.length - 1))));
Related
Im trying to recreate Tradingviews pine script RSI code into Javascript code. But having a hard time figuring out how it works. I made the basic RSI using a normal moving average calculation. But the pine script uses exponential weighted moving average. And there documentation is really hard to follow to me. This is the pine script.
//#version=4
study(title="Relative Strength Index", shorttitle="RSI", format=format.price, precision=2, resolution="")
len = input(14, minval=1, title="Length")
src = input(close, "Source", type = input.source)
up = rma(max(change(src), 0), len)
down = rma(-min(change(src), 0), len)
rsi = down == 0 ? 100 : up == 0 ? 0 : 100 - (100 / (1 + up / down))
plot(rsi, "RSI", color=#7E57C2)
band1 = hline(70, "Upper Band", color=#787B86)
bandm = hline(50, "Middle Band", color=color.new(#787B86, 50))
band0 = hline(30, "Lower Band", color=#787B86)
fill(band1, band0, color=color.rgb(126, 87, 194, 90), title="Background")
This is what I oould make of it in Javascript:
// Period = 200
// Close variable is 200 closed values. Where [0] in array = oldest, [199] in array = newest value.
/**
* Relative strength index. Based on closed periods.
*
* #param {Array} close
* #param {Integer} period
* #returns
*/
function calculateRSI(close, period) {
// Only calculate if it is worth it. First {period - 1} amount of calculations aren't correct anyway.
if (close.length < period) {
return 50;
}
let averageGain = 0;
let averageLoss = 0;
const alpha = 1 / period;
// Exponential weighted moving average.
for (let i = 1; i < period; i++)
{
let change = close[i] - close[i - 1];
if (change >= 0) {
averageGain = alpha * change + (1 - alpha) * averageGain;
} else {
averageLoss = alpha * -change + (1 - alpha) * averageLoss;
}
}
// Tried this too, but seems to not really matter.
// To get an actual average.
// averageGain /= period;
// averageLoss /= period;
// Calculate relative strength index. Where it can only be between 0 and 100.
var rsi = 100 - (100 / (1 + (averageGain / averageLoss)));
return rsi;
}
The results this function gives on my chart is not too bad, but it just isn't the same as I have it in Tradingview. I belive im missing something that the pine script does and I don't.
Things I dont understand of the pine script:
When does it do a for loop? I don't see it in there functions. If they don't, how do they calculate the average for a period of longer than 2? You have to loop for that right?
How does the rma function work? This is their docs.
I might have too many questions on this, but I think if you show a somewhat working example in Javascript of the RSI calculation like they do. Then I can probably make sense of it.
Is my calculation in Javascript correct to the one in the pine script?
I am using a random function to randomly slide between 4 swiper sliders, here is my code :
var swipers = [swiper1, swiper2, swiper3, swiper4];
setInterval(function(){
var rand = Math.floor(Math.random() * 4);
swipers[rand].slideNext();
}, 3000);
}
How should i proceed if i wanted to randomize between slideNext() and slidePrev() ? I tried many things like this :
var direction = ['slideNext()', 'slidePrev()'];
var swipers = [swiper1, swiper2, swiper3, swiper4];
setInterval(function(){
var randx = Math.floor(Math.random() * 4);
var randy = Math.floor(Math.random() * 2);
swipers[randx].direction[randy];
}, 3000);
But it's not working, probably for obvious reasons, but please help me understand why it's not working. And how i could possibly achieve that?
Just put the method name in the arrays, without parentheses. Then use it to index the object, and call the result of that.
You should also use <arrayname>.length rather than hard-coding the lengths when you get the random index, so you don't have to change it if you add more swipers or directions.
var direction = ['slideNext', 'slidePrev'];
var swipers = [swiper1, swiper2, swiper3, swiper4];
setInterval(function(){
var randx = Math.floor(Math.random() * swipers.length);
var randy = Math.floor(Math.random() * direction.length);
swipers[randx][direction[randy]]();
}, 3000);
You're pretty close! Just change how you're setting the direction and I think you got it:
swipers[randx][direction[randy]]();
Also remove the parenthesis from your array and just leave the function names there.
I have a button that dynamically creates 2 inputs per click
Data of Input 1: string
Data of Input 2: number (float) (0-100)
I am creating an array of each like this.
var recipe_flavour_name = $("input[name='flav-name']").map(function() {return $(this).val();}).get();
var recipe_flavour_percent = $("input[name='flav-percent']").map(function(){return $(this).val();}).get();
As far as I can tell, the arrays are comma separated values.
Let's for simplicity's sake say:
recipe_flavour_name = a,b,c
recipe_flavour_percent = 5,6,7
I then want to take the number value to use in a function and then loop through all the values and use jQuery's .html() to add the values to a div.
I have tried this: flavPercent1 is just recipe_flavour_percent
var arrayLength = flavPercent1.Length;
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * 100 * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / 100 * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');
};
But I only get flavGrams and flavPercent returned, dynamically adding more data to the array does nothing.
What do I want to achieve?
Grab the values of specified inputs in an array.
Pass them to a function.
Loop through the values and output them in HTML using jQuery.
I hope that makes sense and thanks in advance.
Ok, so assuming that you don't have a problem getting the arrays you need, the problem lies within your for loop.
YOUR CODE:
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[0] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').html('<tr>'+flavName[0]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[0]).toFixed(2)+'</td></tr>');};
You put everything in the for loop, yet make no reference to the index. I'm assuming everywhere you put [0] you actually want [i]. This means that every time the index increases, you are getting the next array element.
You should use .append instead of .html. .html means that the current html will be replaced by what you are adding.
Finally, although making it dynamic is possible, I'm not sure that JQuery is the best libary to use in this case. I'd suggest taking a look at libraries such as Vue or MoonJs (both are very light and very simple libraries) etc... to find a much easier, and frankly better way to do this. They allow for dynamic rendering, and what you are trying to do becomes insanely simplified.
Hope this helps.
(hopefully) WORKING CODE:
for (var i = 0; i < arrayLength; i++) {
var flavML = (flavPercent1[i] / 100 * AMOUNT * 1000) / 1000;
var flavGrams = (flavML * .98 * 100) / 100;
var flavPercent = (flavML / AMOUNT * 1E4) / 100;
$('.live-flavours').append('<tr>'+flavName[i]+'<td></td>'+parseFloat(flavML).toFixed(2)+'<td>'+parseFloat(flavGrams).toFixed(2)+'</td><td>'+parseFloat(flavPercent1[i]).toFixed(2)+'</td></tr>');};
I'm building a small tic tac toe game.
When it is the computer turn to play, I make him pick a random number to pick an element from an array.
My problem is that the random number will be 3 for example, but the element picked from the array won't be arr[3], but arr[4].
it is a problem because if the number picked is the end of the array, it will return undefined.
here is the javascript code:
var grid = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9'];
var choice = 9;
function myFunction(clicked_id){
$('#' + clicked_id).html('X');
grid.splice(grid.indexOf(clicked_id), 1);
choice -= 1;
setTimeout(computer, 1000);
player.push(clicked_id);
findElement(player);
console.log(player);
console.log(grid);
console.log(grid.length)
}
function computer(){
var ran = Math.floor(Math.random() * choice);
var res = grid[ran - 1];
$('#' + res).html('O');
grid.splice(grid.indexOf(res), 1);
cpu.push(grid[ran]);
findElement(cpu);
choice -= 1;
console.log(ran);
console.log(cpu);
}
Here is what will be logged in the console log:
["item1"] -> What I clicked on
["item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9"] -> new modified array after using splice.
8 -> new array length
5 - random number picked by computer
["item8"] -> element picked by the computer in the array (arr[6])
'item6' is the box checked on the tic tac toe game.
Here is a link to my codepen to see the code in action.
https://codepen.io/nico3d911/pen/odvmPR?editors=0001
Thanks for your help!
Note that JS is using zero-based indexing - therefore item1 has index 0, item2 has index 1 etc. up to item9 with index 8.
Math.random() returns a number between 0 and 1 inclusive, which means that Math.random() * 9 can return 9 which is out of bounds - the maximum index is 8 for an array of length 9.
Changing the upper bound should fix your problem:
var ran = Math.floor(Math.random() * (choice - 1))
A small nitpick: grid.indexOf(res) is always equal to ran, you can just use grid.splice(ran, 1);
My issue was coming from the fact that I was using splice before pushing the array element into its new array.
Here is the correct javascript code:
function computer(){
var ran = Math.floor(Math.random() * choice);
var res = grid[ran];
$('#' + res).html('O');
cpu.push(grid[ran]); // this line needs to be before having the element removed.
grid.splice(grid.indexOf(res), 1);
findElement(cpu);
choice -= 1;
console.log(ran);
console.log(cpu);
}
The console log are just here to help me fixed the bug.
Thanks for your help!
Using Javascript, how can I generate random numbers that are skewed towards one end or the other of the distribution? Or ideally an point within the range?
For context: I'm creating a UI that has uses a grid of random grey squares. I'm generating the grey's RGB values using Math.random() but would like to be able to skew the greys to be on average darker or lighter while still having the full range from black to white represented.
(I think this is a similar question to Skewing java random number generation toward a certain number but I'm working with Javascript...)
Any help greatly appreciated.
Raise Math.random() to a power to get a gamma curve - this changes the distribution between 0 and 1, but 0 and 1 stay constant endpoints.
var r= Math.pow(Math.random(), 2);
var colour= 'rgb('+r*255+', '+r*255+', '+r*255+')';
For gamma>1, you will get darker output; for 0<gamma<1 you get lighter. (Here, '2' gives you the x-squared curve; the equidistant lightness would be '0.5' for the square-root curve.)
This seems a little crude and less graceful than #bobince's answer, but what the hell.
//setup
var colours = [], num_colours = 10, skew_to = 255, skew_chance = 20;
//get as many RGB vals as required
for (var i=0; i<num_colours; i++) {
//generate random grey
var this_grey = Math.floor(Math.random() * 256);
//skew it towards the #skew_to endpoint, or leave as-is?
if (Math.floor(Math.random() * 100) >= skew_chance && this_grey != skew_to) {
//skew by random amount (0 - difference between curr val and endpoint)
var skew_amount = Math.floor(Math.random() * Math.abs(this_grey - skew_to));
this_grey += ' (skewed to '+(skew_to < this_grey ? this_grey - skew_amount : this_grey + skew_amount)+')';
}
colours.push(this_grey);
}
console.log(colours);
Essentially it generates random greys then decides, based on probably specified (as a percentage) in skew_chance, whether to skew it or not. (In case you wanted to make this occasional, not constant). If it decides to skew, a random number is then added or subtracted from the grey value (depending on whether the skew endpoint is under or above the current value).
This random number is a number between 0 and the absolute difference between the current value and the endpoint, e.g. if current value is 40, and the endpoint is 100, the number added would be between 0 and 60.
Like I say, #bobince's answer is somewhat, er, more graceful!
[This might be a little different approach.]
This approach deals with getting the number in the following fashion:
random = numberToSkewTo + random(-1,1)*stdDeviation
Where:
numberToSkewTo is the number you want to skew towards.
stdDeviation is the deviation from numberToSkewTo
numberToSkewTo + abs(stdDeviation) <= MAX_NUMBER and
numberToSkewTo - abs(stdDeviation) >= MIN_NUMBER
What the following code does is, it pick a random number around the given number with constantly increasing standard deviations. It returns the average of results.
function skew(skewTo,stdDev){
var rand = (Math.random()*2 - 1) + (Math.random()*2 - 1) + (Math.random()*2 - 1);
return skewTo + rand*stdDev;
}
function getRandom(skewTo){
var difference = Math.min(skewTo-MIN_NUMBER, MAX_NUMBER-skewTo);
var steps = 5;
var total = 0.0;
for(var i=1; i<=steps; i++)
total += skew(skewTo, 1.0*i*difference/steps);
return total/steps
}