Main content
Course: Computer programming - JavaScript and the web > Unit 4
Lesson 4: Making a side scroller: Hoppy BeaverIntro to Hoppy Beaver
We're going to create a game called Hoppy Beaver. It's a lot like a game you may have heard of, Flappy Bird, but it's got a few differences too. In this game, the user can control a beaver, making it hop up, so that it can grab sticks to make its den. Here's what it looks like to play:
Let's walk through how we might make this game, step by step.
First, let's think about the different components of the game - what we might find in many games:
- The playable character: We only have one playable character, and that's the beaver. That character has some different behaviors, like hopping and falling, which we'll need to implement.
- Non-player characters: Many games have "NPCs" which are programmatically controlled, and present an obstacle to the character. The only obstacle in this game is the environment, however, there are no NPCs. That simplifies things!
- Environment: This is a side-scroller type game, where we see a 2-d world that is scrolling by us, with a clear blue sky, ground, and grass. The sky is filled with sticks that can be collected.
- Overall mission: The beaver must hop to grab sticks, and she can't hop too high above or below it, or she won't pick it up. The goal is to get to the end of the level with enough sticks to create a nest.
Whenever you design a game, you should think through components like that. In fact, game design documents are often many pages long - we've written a very concise version here, just as an example. Now let's implement each component of the game, in roughly that order.
Want to join the conversation?
When talking about Non-playable characters (NPCs), it says there are no NPCs in the beaver game above. What exactly are NPCs? How can NPCs be put into the game? What are some programs with NPCs in them?(264 votes)
NPCS are, to define them simply, a character that you don't control. If there is a character that follows your mouse, that wouldn't be considered an NPC because you control it. The doodle jump game that she showed in the previous video had npcs, the monsters that killed you if you hit them, and you didn't control them. I'm honestly not really good at all the technical aspects of programming so I can't really answer how to put an npc in your game, however I hope this answer helped nonetheless.(323 votes)
How do you crate a computer programming code on Khan for this?(23 votes)
From the author:You should start with our beginner tutorials (Drawing & Animation), and it will teach you how.(135 votes)
does anyone else find coding hard?(20 votes)
Writing functional, clean, and correct code can be very difficult. I've known a lot of people who struggle with programming when they are first starting out, and that's perfectly okay. Remember that programming is a skill, just like riding a bike, just like learning to read. It will take time, it will take grit, and it will take the willpower to analyze your mistakes and smooth out your skills - but you'll get there.
Take the necessary time to practice, and always reach out if you have questions or if you get stuck. Programming has a great capacity in our modern world, and it's certainly a skill worth divesting the time into.(42 votes)
Dear Khan Academy,
Your coding courses are really great and I have learned a lot, but in this Games & Visualizations section, there are no videos to explain. I find it hard to learn on these pages of writing. For example, the keyCode thing remains unexplained. What what do you type for the keys? If you could add videos it would be very convenient to me and surely others. Thank you!(15 votes)
1. I am not part of the KA staff.
2. Many have already 'complained' about no videos in this course. Videos are hard to make and are more expensive than an article. Videos also require quite a lot of preparation while articles need less. Using this knowledge, it would explain why there aren't any videos.
3.keyCodeis basically the number of the key you type. For example the space bar is 32. You don't have to memorize these; you can just search up Google. :)
Hope this helped!
EDIT: 2 years and 4th question on the page. Hm.(17 votes)
pamela lets say i want to program in javascript but not on khan academy but on my pc... what should i do step by step xD(5 votes)
You can use Visual Studio Code and save it as a (name).js file or if you want to save it in an html file refer to this article-
https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/advanced-development-tools/a/using-processingjs-outside-khan-academy(5 votes)
Is it possible to create a rigid-body collision, like if we wanted hopper to collect the sticks when it is touching it instead of a square or rectangle?(3 votes)
You would need to model the shape, and find a function for determining when it is colliding. Or create multiple shapes for checking the collision.
Perhaps this Handbook of Collisions and Interiors by Bob Lyon can help:
https://www.khanacademy.org/computer-programming/handbook-of-collisions-and-interiors/5567955982876672
Another possibility might be to check the underlying colors, so that if a specific color ( or not a specific color) of hopper would be drawn upon a specific color on the canvas, there is a collision. Or some derivative of that idea.(12 votes)
Um, Why isn't it a bird, birds are smarter and they can collect sticks to make their nests. I think you should change it to a bird, it would make more sense
-Oibird(4 votes)- Why not make it a bird? Feel free to make a spin-off of your own version!(8 votes)
- Am I alone in this, or does thins game make anyone else's computer drop frame rate quickly?(5 votes)
It's not your FPS, it's the quality of the recording. Everybody sees the same thing.(5 votes)
I know I kind of sound stupid for asking this but what is the difference between AI and NPCs?(3 votes)- NPC's are generally a part of the game - maybe a scripted interaction. They're programmed to do specific things. AI comes into play when you encounter something (perhaps an enemy) that has the ability to make its own decisions when encountering certain situations.(7 votes)
- why doesn't it have different speeds so it gets harder as you go?(3 votes)
If you create a Spin-Off, you can implement that function into the game yourself.(3 votes)
