In which the author learns JavaScript

1 August, 2014

After going on a several-year stint of no programming (I got distracted by linguistics, history of ethnic separatism, and urban planning) aside from writing a short Python loop to process Facebook data for a marketing job, I decided to try my hand at learning some JavaScript. I spent about three and a half hours two mornings ago typing up just about 100 lines of code to write a simple rock-paper-scissors program, admittedly far less advanced than what I was doing back in 2009. You can have a try at the simple game here (on a free webhost, pardon any ads that pop up), and I’ve posted the JavaScript code below. For the HTML page, opening up the source code in the link above should suffice.

Cheers!

/* STEP 0: Set up the number of rounds to play */


function startGameExternally() {
 window.open("rps.html", "_self");
}

function setValue(idName, valueToSet){
 document.getElementById(idName).innerHTML = valueToSet;
}

var roundsToPlay = 3; //sets a default value in case page is loaded directly
console.log(roundsToPlay);

function setNumberOfRounds() {
 var didUserInputNumber = false;
 
 while (!didUserInputNumber){
 newNumber = prompt("How many rounds of Rock/Paper/Scissors do you want to play?");
 
 //make sure user put in a number
 
 // if user presses cancel or leaves box blank
 if (newNumber == "" || newNumber == null) { 
 didUserInputNumber = true;
 //returns to the game and does nothing
 }
 else {
 if (isNaN(newNumber) || ( newNumber < 0)){
 alert("Please input a positive number!");
 } else {
 clearScores();
 
 roundsToPlay = newNumber;
 didUserInputNumber = true;
 setValue("numRoundsToPlay", roundsToPlay);
 
 //prevent user from adding rounds in the middle of the game
 
 }
 }
 
 } 
 return roundsToPlay
}

function clearScores(){
 playerScore = 0;
 compScore = 0;
 
 roundNumber = 1
 setValue("currentRound", roundNumber);
 roundsToPlay = 3;
 setValue("numRoundsToPlay", roundsToPlay);
 
 setValue("whatUserPlayed", "Nothing yet.");
 setValue("whatComputerPlayed", "Nothing yet.");
 setValue("whoWon", "Nobody yet.");
 
 setValue("displayPlayerScore", 0);
 setValue("displayComputerScore", 0);
 
 setValue("finalResult", "None yet.");
}


/* STEP 1: FIGURE OUT WHAT THE USER CHOSE */
var roundNumber = 1;

function isRock(){
 playAgainstComputer("rock");
}

function isPaper(){
 playAgainstComputer("paper");
}

function isScissors(){
 playAgainstComputer("scissors");
}


/* STEP 2: PLAY IT AGAINST THE COMPUTER */

var playerScore = 0;
var compScore = 0;

function playAgainstComputer(playerChoice) {
 
 var compChoice = computerPlay();
 setValue("whatUserPlayed", playerChoice);
 setValue("whatComputerPlayed", compChoice);
 
 console.log(roundNumber, "of", roundsToPlay);
 console.log(roundNumber==roundsToPlay); 
 
 
 if(compChoice == playerChoice){
 setValue("whoWon", "This round is a tie!");
 } else {
 var whetherPlayerWon = didPlayerWin(playerChoice, compChoice);
 console.log("Did player win?", whetherPlayerWon);
 
 if(whetherPlayerWon){
 playerScore++;
 updateScores(playerScore, compScore);
 setValue("whoWon", "User wins this round.");
 } else {
 compScore++;
 updateScores(playerScore, compScore);
 setValue("whoWon", "Computer wins this round.");
 } 
 
 } 
 roundNumber++;
 setValue("currentRound", roundNumber);

 if (roundNumber > roundsToPlay){
 var whetherPlayerWon = didPlayerWin(playerChoice, compChoice);
 setValue("currentRound", "Done!");
 setValue("buttonSection", "Game over!");
 
 updateScores(playerScore, compScore);
 whoWonGame(playerScore, compScore);
 }
}

function computerPlay(){
 var compChoice = Math.random();
 var play;
 
 if (compChoice <= (1/3)){
 play = "rock";
 } else if (compChoice <= (2/3)){
 play = "paper";
 } else {
 play = "scissors";
 }

 return play;
}

/* STEP 3: FIGURE OUT WHO WON */

function updateScores(playerScore, compScore){
 setValue("displayPlayerScore", playerScore);
 setValue("displayComputerScore", compScore);
}

function didPlayerWin(playerChoice, compChoice) {
 if ((playerChoice == "rock" && compChoice == "scissors") ||
 (playerChoice == "paper" && compChoice == "rock") ||
 (playerChoice == "scissors" && compChoice == "paper")
 ){
 return true;
 } else {
 return false;
 }
} 

function whoWonGame(playerScore, compScore){ 
 updateScores(playerScore, compScore);
 
 if (playerScore == compScore){
 setValue("finalResult","Both players tied.");
 } else if (playerScore < compScore) {
 setValue("finalResult", "The computer wins!");
 } else {
 setValue("finalResult","The user wins!");
 }
}
Advertisements