I have a strange problem, but this is not surprising since I am a little new to JavaScript. Basically, I create a simple card game with a high low level. (Draw two cards, the highest card wins). In any case, the code is below.
The main stream of the program is quite simple. I pick 2 random numbers (1-52). These numbers are displayed on the corresponding card. (i.e., number 1 is the ace of spades, number 37 is the nest of clubs, etc.). In any case, after drawing the cards, the program should display the corresponding card and determine the winner. At the end of all this, I get a warning that appears and tells the winner of the draw and asks if the user wants to play again.
The problem I encountered is the following: even if the program was supposed to display a map image and display the results in a text area, a warning window appears before it actually happens and never displays the map or results. Any ideas? I post all the code so far and any help would be greatly appreciated. Thanks in advance.
function drawCards() { var oppCard = randNumber(); var customerCard = randNumber(); while (oppCard == customerCard) { customerCard = randNumber(); } var oppCardName = displayCard(oppCard, "oppImage"); var customerCardName = displayCard(customerCard, "custImage"); var result2 = "Your card was: " + customerCardName; var result1 = "The opponent card was: " + oppCardName; var result3 = determineWinner(oppCard, customerCard); var result4 = result3 + '\n' + result1 + '\n' + result2; $("#textareaRes").text(result4); playAgain(result3); } function determineWinner(oppsCard, customersCard) { var oppValue = oppsCard % 13; var customerValue = oppsCard % 13; var winnerString = ""; if (oppValue == 0) { oppValue = 13; } if (customerValue == 0) { customerValue = 13; } if (oppValue == customerValue) { winnerString = "You Tied."; } else if (oppValue > customerValue) { winnerString = "You Lose."; } else if (oppValue < customerValue) { winnerString = "You Win!!"; } return winnerString; } function randNumber() { var min = 1; var max = 52; var random = Math.floor(Math.random() * (max - min + 1)) + min; return random; } function playAgain(resultString) { if (resultString == "You Lose." || resultString == "You Win!!") { alert(resultString); var conf = confirm("Play Again?"); if (conf == true) { $("#textareaRes").text(""); document.getElementById("custImage").src="./cardImages/default.png"; document.getElementById("oppImage").src="./cardImages/default.png"; } else { window.location = "#mainMenuPage"; } } else { alert(resultString); alert("Try Again."); $("#textareaRes").text(""); document.getElementById("custImage").src="./cardImages/default.png"; document.getElementById("oppImage").src="./cardImages/default.png"; } }
So, I did not post the code for the screen map function here, simply because it is very long for testing. This is just a giant switching case for all 52 random numbers. The finished product will actually be extracted from the XML file, but I used it only for testing purposes. (If for some reason you need to see the cards function, let me know and I can publish it.) In any case, to repeat, the last call made to the drawCards () function is the playAgain function. After running this code, the results and images of the maps are displayed. It just jumps right into the warning that is called by the playAgain function. This is probably a pretty Nubian question, but I'm a bit puzzled by this. So any help you guys can offer would be greatly appreciated. Thanks.
[EDIT: it really works correctly in a computer browser. However, the problem occurs on a mobile device such as a phone or tablet. So this is probably what I am doing wrong here. Any help is appreciated.]