learn-co-students / kwk-l2-js-rock-dodger-sgharms-test-webdev-fund

JavaScript Rock Dodger

---

Objectives

1. Use JavaScript to build a rock-dodging game

2. Explain how window.requestAnimationFrame() is used to animate movement on a page

3. Explain how to use setInterval()

4. Show off your JavaScript know-how

Instructions

You did it — you've successfully written event listeners and manipulated the DOM. Before that even, you've successfully written functions, conditional statements, comparisons, all the way back to variables. Before we move on to jQuery, we've got a challenge that will utilize everything we've learned, plus a few new concepts we will cover in this readme.

So that we don't catch you off-guard, know that this project is meant to be difficult. We're really testing the limits of what we've learned so far. But know that we've solved the lab using only things that we've taught — well, mostly. There are two things (which we've partially implemented for you) that you should know about.

window.requestAnimationFrame()

This function tells the browser that we want to animate some change on the page. We'll use it in this lab for animating the movement of rocks and the dodger.

We can use window.requestAnimationFrame() by passing it a callback that contains our animation:

function move(el) {
  var top = 0

  function step() {
    el.style.top = `${top += 2}px`

    if (top < 200) {
      window.requestAnimationFrame(step)
    }
  }

  window.requestAnimationFrame(step)
}

If we call move(el) with a valid DOM element, window.requestAnimationFrame() will be called with the function step, which moves the el down the page in two-pixel increments until it's been moved 200 pixels. Pretty easy, right?

(Note that we can pass step to window.requestAnimationFrame() inside of step. This is a nifty feature of JavaScript (and other languages) called recursion. Don't worry if this concept makes your head spin a bit — that feeling is normal. For now, know that we can use window.requestAnimationFrame() as demonstrated above.)

setInterval()

setInterval() takes two arguments: a callback, and an interval in milliseconds. We can use it like so:

function sayHello() {
  console.log('hello')
}

const myInterval = setInterval(sayHello, 1000)

The above will print 'hello' to console once every second.

Note that setInterval() returns a reference to the interval. We can stop the interval from executing by calling clearInterval(myInterval).

Getting Started

Open up index.html in your browser. You should see a black 400-by-400px box with a white square at the bottom. That square is the dodger — it can only move left and right.

Well, it should be able to move only left and right — we'll need to implement that functionality!

Now open index.js. You'll see that we've defined a few functions for you, but we've left much of the file blank.

We've left enough comments to get you started, though, and we've defined all of the HTML and CSS that you'll need so that you can just focus on the JavaScript!

Remember to reload the page after updating and saving the file. You've got this!

Good luck!

Resources

• window.requestAnimationFrame()
• setInterval()