Develop Reference

jquery: avoid too much recursion

I have a script that distribute the 54 playing cards randomly on 4 players, it will generate 2 random numbers to get a random card, the category number (from 1 to 4) which means: "hearts,spades,diamonds,clubs", and the card number (from 1 to 13).
The problem is there are too much recursions in this script, so how I can avoid this error by calling the functions in threads or something similar?
my code:
$(document).ready(function(){
var human = [];
var east = [];
var west = [];
var north = [];
var used_cards = [];
distributeCards(north,$('#north'));
distributeCards(east,$('#east'),'vertical');
distributeCards(west,$('#west'));
distributeCards(human,$('#south'));
function distributeCards(array,container,view){
for(var i = 0; i < 13; i++){
var category,card;
do{
var uniqueCard = uniqueRandomCard();
}while(typeof uniqueCard === "undefined")
category = uniqueCard[0];
card = uniqueCard[1];
array.push(uniqueCard);
var category_name = '';
if(category === 1){
category_name = 'hearts';
}
else if(category === 2){
category_name = 'spades';
}
else if(category === 3){
category_name = 'diamonds';
}
else if(category === 4){
category_name = 'clubs';
}
if(card === 1){
card = 'ace';
}
else if(card === 11){
card = 'jack';
}
else if(card === 12){
card = 'queen';
}
else if(card === 13){
card = 'king';
}
if(view === 'vertical'){
$(container).children('.row').append('<img src="cards/backRotate.png" class="card"/>');
}
else if(view === 'horizontal'){
$(container).children('.row').append('<img src="cards/back.png" class="card"/>');
}
}
}
function randomNumberFromRange(min,max){
return Math.round(Math.floor(Math.random()*max)+min);
}
function uniqueRandomCard(){
var card = randomNumberFromRange(1, 13);
var category = randomNumberFromRange(1, 4);
if(!inAssocArray(category,card,used_cards)){
var array = [];
array[0] = category;
array[1] = card;
used_cards.push(array);
return array;
}
else{
uniqueRandomCard();
}
}
function inAssocArray(key,value,array){
var flag = false;
for(var i = 0; i < array.length; i++){
if(array[i][0] === key && array[i][1]=== value){
flag = true;
}
}
return flag;
}
});

Fixing recursion the way you've implemented it is quite easy. Simply replace your call and if statement with a while statement.
function uniqueRandomCard(){
var card = randomNumberFromRange(1, 13);
var category = randomNumberFromRange(1, 4);
while(inAssocArray(category,card,used_cards)) {
card = randomNumberFromRange(1, 13);
category = randomNumberFromRange(1, 4);
}
var array = [];
array[0] = category;
array[1] = card;
used_cards.push(array);
return array;
}
That being said there are some fundamental better ways of handling limited sets like this. Storing unused cards and randomly selecting from that is far superior.

Using the input box instead of pop function

How can I use an input box instead of prompt on this code?
Code is
here.
Once I click on the link; a prompt pops up and asks to type a number or Q to quit. How would I change that to input box?
function Stack() {
var items = [];
this.push = function(element){
items.push(element);
};
this.pop = function(){
return items.pop();
};
this.peek = function(){
return items[items.length-1];
};
this.isEmpty = function(){
return items.length == 0;
};
this.size = function(){
return items.length;
};
this.clear = function(){
items = [];
};
this.print = function(){
alert("Stack Elements are:"+items.toString());
};
}
Declare stack object:
var stack = new Stack();
while(1)
{
var element = prompt("Enter stack element,(q or Q to exit)", "");
if(element == 'q' || element =='Q')
{
break;
}
else
{
if(element=='*'
|| element=='+' || element=='-' || element=='/')
{
//Check if stack is empty
if(stack.isEmpty() || stack.size<2 )
{
alert("Invalid Operation, Stack is empty or size is less than 2");
}
else
{
var op1 = stack.pop();
var op2 = stack.pop();
if(element=='*')
{
var res = op1 * op2;
}
else if(element=='+')
{
var res = op1 + op2;
}
else if(element=='-')
{
var res = op1 - op2;
}
else if(element=='/')
{
var res = op1 / op2;
}
stack.push(res);
stack.print();
}
}
else
{
stack.push(element);
stack.print();
}
}
}

try following example :
FIDDLE
var stack = new Stack();
function Stack() {
var items = [];
this.push = function(element) {
items.push(element);
};
this.pop = function() {
return items.pop();
};
this.peek = function() {
return items[items.length - 1];
};
this.isEmpty = function() {
return items.length == 0;
};
this.size = function() {
return items.length;
};
this.clear = function() {
items = [];
};
this.print = function() {
theList.options.length = 0;
for (var i = 0; i < items.length; i++) {
var theOption = new Option(items[i]);
theList.options[theList.options.length] = theOption;
}
};
}
function pushStack(newVal) {
if (newVal == '*' || newVal == '+' || newVal == '-' || newVal == '/') {
//Check if stack is empty
if (stack.isEmpty() || stack.size < 2) {
alert("Invalid Operation, Stack is empty or size is less than 2");
} else {
var op1 = stack.pop();
var op2 = stack.pop();
if (newVal == '*') {
var res = op1 * op2;
} else if (newVal == '+') {
var res = op1 + op2;
} else if (newVal == '-') {
var res = op1 - op2;
} else if (newVal == '/') {
var res = op1 / op2;
}
stack.push(res);
}
} else {
stack.push(newVal);
}
}
function popStack() {
var popVal = stack.pop();
if (popVal == undefined)
return "Empty stack!";
else
return popVal;
}
function showStack() {
stack.print();
}
<FORM>
<INPUT type="text" name="txtPush" id="txtPush" />
<INPUT type=button value="Push" onClick='pushStack(txtPush.value); txtPush.value=""; showStack(theList);' />
<SELECT name="theList" id="theList" size=12>
<OPTION>Displays the current state of the stack!</OPTION>
</SELECT>
</FORM>

Javascript Check variable.Then gain ++ per second

I have a problem i want to check a variable.If its 0 then gain ++ after 1.5s.If its 10 then gain ++ after .4s.Its complicated.It doesnt really work.My code so far:
if(road == 1){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1400);}
else if(road == 2){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1300);}
else if(road == 3){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1200);}
else if(road == 4){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1100);}
else if(road == 5){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},1000);}
else if(road == 6){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},900);}
else if(road == 7){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},800);}
else if(road == 8){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},600);}
else if(road == 9){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},400);}
else if(road == 10){setInterval(function(){stamina = stamina+1;document.getElementById("stamina").innerHTML = stamina;},200);}
else{setInterval(function(){stamina++;document.getElementById("stamina").innerHTML = stamina;},1500);}
And the code to build a road is this:
function build_road() {
if ((wood + tavern) >= 29 && stone > 4 && road < 10) {
road++;
document.getElementById("road_count").innerHTML = road;
wood = (wood + tavern) - 20;
stone = stone - 5;
document.getElementById("wood").innerHTML = wood;
document.getElementById("stone").innerHTML = stone;
exp = exp + 20;
var x = document.getElementById("PROGRESS");
x.setAttribute("value", exp);
x.setAttribute("max", max);
if (exp == 100) {
exp = 0;
level++;
document.getElementById("level").innerHTML = level;
}
alert("Congratulations,You've create a Road,Now you gain stamina slightly faster.");
}
else {
alert("You need: 30Wood,5Stone .Maximum 10 Roads.")
}
}

Make reusable functions (it's often a good practice, when you a difficulties with a piece of code, to break it into small functions):
var staminaIncreaseTimer = null;
function configureStaminaIncrease(delay) {
if (staminaIncreaseTimer !== null)
clearInterval(staminaIncreaseTimer);
staminaIncreaseTimer = setInterval(function () {
increaseStamina();
}, delay);
}
function increaseStamina() {
stamina += 1;
document.getElementById("stamina").innerHTML = stamina;
}
Solution with an array (suggested by Jay Harris)
var roadIndex = road-1;
var ROAD_DELAYS = [1400, 1300, 1200, /*...*/];
var DEFAULT_DELAY = 1500;
if (roadIndex < ROAD_DELAYS.length) {
configureStaminaIncrease(ROAD_DELAYS[roadIndex]);
} else {
configureStaminaIncrease(DEFAULT_DELAY);
}
Solution with a switch instead of you if-elseif mess:
switch (road) {
case 1:
configureStaminaIncrease(1400);
break;
case 2:
configureStaminaIncrease(1300);
break;
case 3:
configureStaminaIncrease(1200);
break;
//and so on...
default:
configureStaminaIncrease(1500);
}

Is there a polyfill for findAll

I am using JavaScript findAll for a selector engine. Is there any polyfill for the findAll function. I tried to create my own selector engine with this code:
function CTfind(string, context){
var result = [], finalResult = [];
if(typeof string === "object"){
result.push(string);
return result;
}
if(/<([a-zA-Z]+)(\s*)?\/>/ig.test(string)){
var str = string.replace(/<([a-zA-Z]+)(\s*)?\/>/ig, "$1");
var ret = document.createElement(str);
if(typeof context === "object"){
for(i in context)
ret[i] = context[i];
}
document.body.appendChild(ret);
result.push(ret);
return result;
} else{
if(typeof string !== "string" && typeof string !== "object") return false;
var documentElements = context.getElementsByTagName("*"),
toMatch = string.split(", ");
for(i = 0; i < documentElements.length; i++){
for(e = 0; e < toMatch.length; e++){
var stringParts = toMatch[e].split(" ");
for(s = 0; s < stringParts.length; s++){
var parts;
if(/(\.|\#|\:)/g.test(stringParts[s])){
parts = stringParts[s].match(/([A-Za-z]+|[\.\#\:]+[^\.\#\:]+)/g);
} else if(/^(?!(\.|\#|\:)$).*$/g.test(stringParts[s])){
parts = stringParts[s];
var onlyElem = true;
}
if(onlyElem === true){
console.log(documentElements[i].nodeName);
if(documentElements[i].nodeName.toLowerCase() === parts){
result.push(documentElements[i]);
}
} else{
var containsClass = false,
containsElem = false,
containsID = false,
containsPseudo = false,
matchID = false,
matchElem = false,
matchClass = false,
matchPseudo = false;
if(/\./.test(stringParts[s])){
containsClass = true;
}
if(/\#/.test(stringParts[s])){
containsID = true;
}
if(/\:/.test(stringParts[s])){
containsPseudo = true;
}
if(/[^\.\#\:](.*)/.test(stringParts[s])){
containsElem = true;
}
if(containsElem === true){
var elem;
for(g = 0; g < parts.length; g++){
if(/^([^\.\#\:][A-Za-z])*$/.test(parts[g])){
elem = parts[g];
} else{
elem = documentElements[i].nodeName.toLowerCase();
}
}
if(documentElements[i].nodeName.toLowerCase() === elem){
matchElem = true;
}
} else{
matchElem = true;
}
if(containsID === true){
var id = filter(parts, "#");
id = id[0].substr(1);
if(getAttr(documentElements[i], "id") === id){
matchID = true;
}
} else{
matchID = true;
}
if(containsClass === true){
var classes = filter(parts, ".");
if(typeof classes === "string"){
classes = classes[0].split(".");
for(c = 0; c < classes.length; c++){
if(classes[c] !== ""){
if(hasClass(documentElements[i], classes[c])){
matchClass = true;
}
}
}
}
} else{
matchClass = true;
}
if(matchClass && matchID && matchElem){
result.push(documentElements[i]);
}
console.log(result);
}
}
if(stringParts.length > 1){
console.log(result);
if(isDescendant(result[0], result[result.length - 1])){
finalResult.push(result[result.length - 1]);
}
}
}
}
return finalResult;
}
};
But I thought using Javascript findAll would be much easier. Also, I can't use querySelector because sometimes I need to find it in a specific node.

Javascript and ascii homework

I have an assignment where I have to select an animation and run it. It works except the turbo function doesnt work like its suppose to and I'm not sure how to change the font size here is the link http://turing.plymouth.edu/~besopko/hw6/ascii.html
My php is:
var frameStr;
var frameSeq;
var currentFrame;
var frameanime;
var q;
var startspeed = 250;
function startFunction(){
frameStr = document.getElementById("Frame").value;
if(frameStr.indexOf("\r\n")!=-1){
frameSeq = frameStr.split("=====\r\n");
}
else{
frameSeq = frameStr.split("=====\n");
currentFrame = 0;
q = setInterval(NextFrame, startspeed);
}
}
function AnimeFunction(){
frameanime = document.getElementById("animation").value;
if(frameanime == "EXERCISE"){
$("Frame").value = EXERCISE;
}
else if(frameanime == "JUGGLER"){
$("Frame").value = JUGGLER;
}
else if(frameanime == "BIKE"){
$("Frame").value = BIKE;
}
else if(frameanime == "DIVE"){
$("Frame").value = DIVE;
}
else if(frameanime == "CUSTOM"){
$("Frame").value = CUSTOM;
}
}
function NextFrame(){
document.getElementById("Frame").value = frameSeq[currentFrame];
currentFrame = (currentFrame+1)% frameSeq.length;
}
function stopFunction(){
clearInterval(q);
}
//this function isn't working properly
function turboFunction(){
var speed = document.getElementById("speed1");
if(speed.checked){
startspeed = 50;
q = setInterval(nextFrame, startspeed);
}
else {
startspeed = 250;
q = setInterval(nextFrame, startspeed);
}
}
function sizeFunction(){
text = document.getElementById("size").value;
if(text == "tiny"){
$("Frame").value = //stuck here;
}
}
I'm not sure why the turboFunction() is working incorrectly and I'm not exactly sure how to change the font size of the ascii animation. Any input would be very helpful.