How to create a simple web browser game

Go to http://www.processing.org and download the version appropriate for your system (Windows, Linux or Mac).Keep in mind that I am writing these instructions from the perspective of a Windows user.
Unpack the zip, dmg or tgz file that you got and launch the executable file that starts the application.
A new "sketch", as Processing calls its source code files, is open.
Click File/Save as and save your sketch with the name you desire.

Some comments about how processing is set up. First, the syntax is similar to that of C. If you have trouble understanding the general structure of the code presented in this tutorial, pick up any book on C or C++ and just read the introductory chapters.
However, unlike most programming languages you might have worked with before, programs written in Processing are by default real time applications. This is because Processing has been thoughtfully designed to support animations and interactive applications.
Any program has two main parts, as we shall see in the commented code provided in this tutorial:
a "setup" function which initializes the application's canvas, usually setting up parameters such as the size of the application window and the frame rate. The setup function is by default executed when the application is first launched;  program rests;
The programmer needs to write his or her code being mindful that whatever they put in the draw function will get executed again and again.

 

In order for this game to display the score, we first need to create a font. The font is automatically saved in a sub-folder of your sketch's folder, called "data". At run-time the program will know that all of the application's resource's are in the data folder. Processing has a font creation utility. Choose a smallish font like Arial Narrow, type 16 for size and give it the name "size16.vlw"
Now that we are done with preliminaries,let's see the code! Just copy the text in the next three steps into your Processing window, execute and experiment!
The characters "//" mark a comment, that is the text that follows on that same line is not considered by the compiler. Every line of code is commented so make sure you follow through and understand what the  program does.
Don't worry, the code will look much better inside Processing than it does here...

//first we define our variables, and also initialize
//some of them.
//These are global variables that can be accessed by all
//subroutines in the program
float chaserx, chasery; //these are the coordinates of
//the point that is chasing yours
float i=0.0001; //this is just a multiplication factor,
//we'll see how it comes into play later
float dotx=100; //this is the initial x position of your dot
float doty=100;// and the initial y position of your dot
float dotspeedx=0; //initial x value of your
//dot's speed (stationary)
float dotspeedy=0; //initial y value of your dot's
//speed (stationary for now)
PFont font; // this variable will store the font of
//your messages to the player.
boolean lose; // this two state variable determines
//whether the game is being
//played or the game has been lost. Soon we will
//see it in action.
int losecounter; //in order to display the losing
//message for an certain
//amount of time, we use a counter that ticks down.
int score; //pretty self explanatory
//below is the setup function where we
//initialize the game environment and
//a few other variables. note
//that although variables should. the setup function
//is an internal construct of processing. It is not defined by
//the programmer but it is up to the programmer to insert
//instructions into this function.
//This function does not return a value and does not have
//arguments, hence the "void" and the "()" respectively.
void setup()
{
font=loadFont("size16.vlw"); //the font variable is
//initialized by loading the font we created earlier.
size(200, 200); //here we initialized a window of 200 pixes
//by 200 pixels, where our game will be displayed
smooth(); //this instruction switches antialiasing on
strokeWeight(5); //this instruction sets the width
//of lines drawn with the program to five pixels
frameRate(100); //we set the frame rate to 100, a high value
//that ensures smooth gameplay (but the higher the frame rate,
//the faster things will move in the game)
lose=false; //we initialized the lose state to false
score=0; //and the initial score is zero.
}

//the draw function gets executed continuously,
//in this case 100 times per second because that is
//the value we set with the frameRate() function
//continues in next step...

//continued
void draw()
{
if (lose!=true) //the block below will implement the game
//engine during normal play, that is when the player has not
//(yet) lost to the ravenous black dot
{
score++; //score is incremented every iteration of
//the draw function.
background (226);//this sets the background to a
//neutral gray, and also erases everything previously drawn,
//refreshing the view.
chaserx=chaserx+(dotx-chaserx)*i; // the x value of
//the black dot are updated to make it try to approach
//the player's dot. the i factor can be thought of as
//the speed of the game overall, which increases with time
chasery=chasery+(doty-chasery)*i; //same goes for the y value
dotspeedx=(mouseX-dotx) * i; // the x direction
//speed of the white dot, the player's dot,
//is determined by the position of the cursor
//versus the position of the dot
dotspeedy=(mouseY-doty) * i; //same for the y speed. again,
//the i factor sets the speed of the game
dotx=dotx+dotspeedx; //the x position of the player's dot
//is updated by adding the speed every iteration of
//the draw function
doty=doty+dotspeedy; //same goes for the y position
if (dotx>200) //if the player's dot passes the right
//edge of the screen...
{
dotx=200; //the x position of the white (player's)
//dot is reset to the edge
dotspeedx=0; //the x value of the white dot's speed
//is set to zero
}
if (dotx<0) //same for the left edge
{
dotx=0;
dotspeedx=0;
}
if (doty>200) //and the bottom edge...
{
doty=200;
dotspeedy=0;
}
if (doty<0) //and finally the top edge...
{
doty=0;
dotspeedy=0;
}
stroke(255); //this instruction sets the color of the elements
//drawn from now on to white
line(dotx,doty,dotx,doty); //we draw our white dot as a line
// where the start and end point are the same
stroke(0); //now we set the color of the enemy dot to black
line(chaserx,chasery,chaserx,chasery); //and draw it.
i=i+0.0001; //by increasing the i factor we increase the
//overall speed of the game,
//making it more and more challenging!
//continues in next step

//continued
if (abs(dotx-chaserx)<5 && abs(doty-chasery)<5)
//if the black dot comes within five
//pixels horizontal and five pixels vertical of the white dot...
{
lose=true; //we lose the game
losecounter=500; //the losecounter will tick for
//five hundred executions of the draw function
//thus displayin the text for five seconds
}
}
else //so, we lost the game...what do we do now?
{
if (losecounter>0) //first we check if the losecounter
//ticker has not reached zero (at zero the game restarts)
{
textFont(font); //we load the font we defined in the
// setup function
fill(255, 0, 0); //set the fill RGB color to a bright red
//(Red is 255, Green is 0 and Blue is also 0)
//stroke() sets the color of lines and fill() that of
//inner spaces, like text
text("The dot has caught you!" ,10,15); //we display
//the first row of text at 10 pixels horizontal and 15 vertical
text("Your score is " + score,10,30); //the the score just under
//that (30 pixels down)
text("Try again!",10,46); //and the final message
losecounter--; //we decrement the losecounter, our ticker
}
else //now, if the ticker has reached zero, we
//reset the game variables
{
lose=false; //lose becomes false yet again
chaserx=0; //reset the black dot's position
chasery=0;
i=0.0001; //the game speed
dotx=100; //the player's dot position
doty=100;
dotspeedx=0; //the player's dot speed
dotspeedy=0;
score=0; // and the score
}
}
}


//and this is it! just copy the code into your processing window
//and press play to see it in action

 

Now we want to roll out our game for the world to see. You can create a java applet complete with web page, or a java application for the platform of your choice. Let's create a java applet. For that, go to File/Export.