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!");
 }
}

280 Slides Interview

6 June, 2008

I got a nice chance on IRC to interview Tom Robinson, one of the coders of 280 Slides, the online version of Keynote written in Objective-J, an Objective-C port in JavaScript. Cappuccino is the name of the ports of the Cocoa classes (nice choice for a name, in my opinion). Here’s the interview. A podcast with another interview is available on Ajaxian.

Q: How’d you get started with the Cappuccino project?
A: We started it in college?
Q: When was that?
A: About 3 years ago.
Q: The Objective-J website currently says “coming soon.” How soon is soon?
A: We’re not exactly sure when “soon” will be but hopefully in the next month or two.
Q: Did you copy/paste real Keynote code or did you make it up and got it just like Keynote?
A: We wrote all the code ourselves.
Q: How’d you get the interface elements?
A: We hired a graphics designer, and did a lot of it ourselves, and purchased some of the icons.
Q: What about the interface controls? Did you write an NSButton class, NSToolbar class, etc?
A: Oh, yeah, those are all in AppKit.j, er, .sj
Q: Why .sj? Why not just .j?
A: If you look closely there’s two different formats; .sj is sort of an archive of preprocessed code.
Q: Oh, and what sort of licensing are you shooting for?
A: We currently plan to make it open source. We haven’t decided on a license, but we’re looking for input from the community. We’re considering the GPL, apache, BSD, etc.
R: I recommend the GNU Affero General Public License, especially since the code is very network-related.
As a final wrap-up, congrats and kudos to the Cappucino/Objective-J/280 Slides team! Good luck on your efforts; keep it up!

Objective-J Leaked

6 June, 2008

280 Slides apparently is a web application written in Objective-C. Wait, how does that work? Just look at some of its source code: this and this. Well, after a while of googling, I was able to find the Objective-J code that was so well hidden. Here it is on their own server. Here‘s a backup in case it’s moved.

The application is very Keynote-like, and I like it like that. I guess this Objective-J thing could be considered to be Cocoa for the web, but what about all the  NSClasses? I guess somebody’s gonna have to write those up.
Good luck!
And thanks, 280 North!
Edit: apparently some people have already gotten their hands on it. here
Update: Foundation and AppKit

Random Ramblings

18 May, 2008

First off, Evince finally integrates with your browser to display documents! FTW!

Secondly, having started studying JavaScript and will soon write a post about it.