Your task

You will be making a small, simple browser game, making use of JS, DOM manipulation, and event-driven programming.

  1. Click the GitHub link in the project 2 announcement, and clone your proj2 repo like before.
  2. Edit the JS and CSS files to make your game.
    • You can also change the HTML file if you want to make it look nicer.
  3. Don’t forget to make commits while working.
    • (And even push them to GitHub if you’re paranoid.)

The starting point

You have been given a few files:

What I’ve given you in script.js


The game

If you’re familiar with Mario Paint, and you know the fly-swatting game… yeah, that. Wait, most of you are way too young for that. 😅

It’s summer in Pittsburgh and that means MOSQUITOES. So, you have to slap them. There are so many. They are endless.

Game flow

The game will work like this:

a flowchart with four nodes: start, main game loop, end of round, and game over. from start, the user clicks the playfield to get to the main game mode. if they kill 10 mosquitoes, go to end of round; then click the playfield again to get to main game loop. if they miss 5 mosquitoes, go to game over; click the playfield again to get to main game loop.

Each round of the game goes like this:

  1. The player must click to begin the round.
  2. Mosquitoes randomly appear at the sides of the screen and move across it.
  3. If the player clicks a mosquito,
    • The mosquito dies (is removed from the screen)
    • They get 100 points
  4. If a mosquito moves off the edge of the screen,
    • The mosquito “escapes” (and is removed from the screen)
    • The player gets a miss
  5. If the player kills 10 mosquitoes,
    • The current “round” is over
    • They get a bonus according to how many misses they had: (1000 - (250 * misses)). So,
      • 0 misses = 1000 points
      • 1 miss = 750 points
      • 2 misses = 500 points, etc.
    • Their misses are reset to 0, and the next round starts.
  6. If the player misses 5 mosquitoes,
    • The game is over.
    • They do not get any bonus points.
    • Their final score may be entered into the high score table.
    • They may start a new game by clicking the playfield. If so, the round is reset to 1 and the score is reset to 0.

Starting off

In your window.onload function, set an onclick handler on either the playfield or the gameMessage elements. It will be responsible for a few things:

Try to get the first two bullet points working first. Use the console, inspector, and debugger to help yourself.

The main game loop

You don’t get to write a “loop” in the typical sense. If you did, your browser would freeze.

Instead, you use the requestAnimationFrame() function. It works like this:

// have to start it off somehow.
function startGame() {
    // give it the name of the function to call.
    requestAnimationFrame(gameLoop)
}

function gameLoop() {
    // 1. update the position of the mosquitoes
    // 2. update the score/misses/etc. displays
    // 3. check if the user won or lost

    // this is sort of the "loop condition."
    // we call requestAnimationFrame again with gameLoop.
    // this isn't recursive; the browser will call us again
    // at some future point in time.
    if(the game should continue) {
        requestAnimationFrame(gameLoop)
    }
}

You may use the above pseudocode in your project.

When you call requestAnimationFrame(), you tell the browser “hey, call this function when you’re ready to update the display.” By having gameLoop give itself to this function, it will be called repeatedly.

Mosquito spawning

To spawn the mosquitoes, you will use a timeout function. This is a way of having the browser call your code back after a set amount of time.

You use a similar pattern for this as for the main game loop:

function startSpawning() {
    // 1000 ms (1 second) from now, spawnMosquito() will be called.
    window.setTimeout(spawnMosquito, 1000)
}

function spawnMosquito() {
    // this is a "destructuring assignment."
    // it makes 4 local variables by extracting elements of the array that was returned.
    let [x, y, vx, vy] = pickPointAndVector()
    console.log("spawning a mosquito at " + x + ", " + y + " (remove this log statement)")
    // now to actually make an object/DOM element

    if(should continue spawning) {
        // spawn another one a second from now
        window.setTimeout(spawnMosquito, 1000)
    }
}

You may use the above pseudocode in your project.


Representing the mosquitoes

Just do a little bit of code at a time. Test constantly. Put generous logging in at first, and remove it as you go. Use the debugger. You’re in a 1500 level class. Be smart about this.

The pickPointAndVector() function I used in the example above returns 4 values representing a random position (x, y) and direction (vx, vy) of a mosquito. It’s like this:

the visible screen is a rectangle, but the mosquitoes spawn off screen, to the left/right/above/below it. their x and y velocities will always point across the screen, so that they will move in from the sides.

Here are some tips on implementing the mosquitoes.


Other game aspects