Javascript Rock Dodger

JavaScript Rock Dodger

  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 made it to the end of the introductory JavaScript curriculum. You've learned how to write JavaScript and how to use JavaScript to manipulate the DOM. Now, only this lab stands between you and freedom the end of this course!

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

View Rock Dodger on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us