JavaScript Rock Dodger
Objectives
- Use JavaScript to build a rock-dodging game
- Explain how
window.requestAnimationFrame()is used to animate movement on a page - Explain how to use
setInterval() - 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent