Your first video game: Move the blob!

On the internet there are some fun games where you control a circle-looking-thing that you can move around and interact (and potentially destroy or absorb!) other circle-looking things controlled by other people. Two games that come to mind are diep.io and agar.io. There are plenty of others like them out there.

Step 1. Look at a computer code for a blob that can only move in the x-direction!

Click here to open up the computer code in a new tab!

In the top left corner, press and you'll see something like this:

Do what it says! Click the screen! Press the arrow keys on your keyboard to see if the blob moves! The blob will only move when you press right arrow! Your job will be to modify the computer program to makeit move in other directions.

Step 2. In the top right corner of the screen click "Sign up"

Create an account and confirm a password. Nobody will send you e-mails to bug you for doing this. Unfortunately you have to create an account in order to save your changes to the code.

Click Duplicate to copy a version of the code to your account

Step 3. Look at the code! Read the //comments in the code

Here's the code. Each section does something important. Bear in mind that draw() is run over and over again, 60 times per second in fact. This means that 60 times per second, the code will update the $x$ position, and check if the keyboard keys are being pressed.

function draw(){

    // Update location
    x += vx*dt;

    // velocity is zero unless keys are pressed
    vx = 0;

    // Turn or thrust the ship depending on what key is pressed
    if (keyIsDown(LEFT_ARROW)) {
        // Do nothing
    }
    if (keyIsDown(RIGHT_ARROW)) {
        vx = 10;
    }
    if (keyIsDown(UP_ARROW)) {
        // Do nothing
    }
    if (keyIsDown(DOWN_ARROW)) {
        // Do nothing
    }

    // Draw axes and other stuff
    // This will clear the screen and re-draw it
    display();

    drawBlob(x,y,vx,vy);

    // Add more graphics here before the end of draw()

} // end draw()

Your job will be to replace the "Do nothing" with something that will allow the blob to move in both the $x$ and the $y$ directions.

Step 4. Make the blob move to the left!

What happens when you change this section:

    if (keyIsDown(LEFT_ARROW)) {
        // Do nothing
    }

to this:

    if (keyIsDown(LEFT_ARROW)) {
        vx = 10;
    }

Now when you press the left arrow does it move the blob to the left? Why or why not? How might you fix this? (Hint: this seems to only move the blob in the positive x direction. If only there were some way to make it move in the negative x direction.)

Change the program until you can move the blob to the left or right as in this example

Step 5. Modify the program to get the blob to move in the y direction

Step 5a. Modify the code so that vy = 10 if you press the up arrow

By now you've noticed that to get the blob to move in the +x direction when you press the right arrow, there is a section of the code that sets vx to 10 when you press the right arrow:

    if (keyIsDown(RIGHT_ARROW)) {
        vx = 10;
    }

Let's make sure something like this happens when you press the up arrow. Find this part of the code:

    if (keyIsDown(UP_ARROW)) {
        // Do nothing
    }

and replace // Do nothing with vy = 10;. Can this move the blob in the y direction when you press one of the arrow keys? (Hint: maybe not!)

Comment: Leave the down arrow section alone for now. We'll work on that later.

Step 5b. Make sure the x AND y position are getting updated!

In order for the blob to move in BOTH the x AND the y directions, we need to make sure that both the x and y positions are getting updated. This task has to do with this part of the code:

    // Update location
    x += vx*dt;

Let's talk about this line of code before we add anything to it:

Comment #1 x += vx*dt is how a computer thinks about this equation: $$d = vt$$

We like to think about the total distance ($d$) traveled after the total time ($t$) elapsed. Computers like to think about short periods of time that last dt seconds long, so that the total time is $t = N \cdot dt$ where $N$ is the number of short periods of time and $dt$ is the number of seconds (or fraction of a second) of one of these short periods of time.

Comment #2 dt is short for "delta t" = $\Delta t$. In other words the "d" in dt comes from the greek symbol for "delta". dt is not a distance, it is a short period of time.

Let's look at the section in the code again:

    // Update location
    x += vx*dt;

You'll notice that there is nothing about y here. The only thing that gets updated is the x position. This is why in the previous step the y position didn't change even though the we set vy = 10 in Step 4a.

Add a line to the code above make sure the y position gets updated if vy is non-zero (Hint: it will look a lot like how we update the x position of the blob.

If you do this successfully your code should behave like this

Step 6. Fix the drift!

If you play around with the code at the end of Step 4 you will probably notice that once the blob starts moving in the y direction, there's nothing you can do to stop this. In other words, even when you're not pressing the up arrow, the blob will drift upwards.

Look closely at the code and see if you can figure out what's causing this. (Hint: there's a section between the "update location" and the keyboard section that we haven't modified yet). You should only need to add one line of code to fix the drift!

If you can fix the drift, your code should behave like this

Step 7. Let the blob move in the negative y direction!

If you haven't already, modify the code so that pressing the down arrow moves the blob in the negative y direction. You would need to modify this part of the code:

    if (keyIsDown(DOWN_ARROW)) {
        // Do nothing
    }

Hint: This is basically the same problem we ran into in Step 4. If only we could make the blob move in the negative y direction instead of the positive y direction.

If you make the right change your code should behave like this

Done!

Challenge Question:

1. Why does it seem like the arrows are longer when the blob is moving in a diagonal direction? Is the blob really moving at a faster speed?

Next Steps

Accelerate the blob:

See if you can modify this Accelerate the blob example so that instead of only moving in the x direction, the blob can accelerate in both the x and the y directions

Dan Shiffman's Agar.io clone:

If you're feeling ambitious you can work through Dan Shiffman's step-by-step tutorial to re-create agar.io