Main content
Computer programming - JavaScript and the web
Course: Computer programming - JavaScript and the web > Unit 4
Lesson 4: Making a side scroller: Hoppy BeaverScoring and winning
Okay, but what's a game if there's no winning or losing? It's LIFE! Haha, but no, really. Let's add a score and a win state to the game. We have many options for how we could score:
- Count how many sticks the beaver grabs.
- Count how many sticks the beaver misses.
- Award more points for higher accuracy - like based on distance of beaver from stick center.
Sometimes games are purely about scores and raising your score, but other times, they have distinct win or lose states. What could we do in this game?
- Declare them a winner if they grabbed some percentage of the sticks (up to 100%).
- Immediately fail them if they miss some percentage of the sticks.
- Fail them if they miss some number of sticks in a row.
For simplicity's sake, let's implement the first options: we'll score based on the number of stick grabs, and we'll declare them a winner if they get 95% of the sticks.
We want to always display the score, so we can just stick a text command in the draw function:
text("Score: " + beaver.sticks, 20, 20);
For the win state, we should come up with a condition that we can check each time, and then do something festive if it's true. Here's what we could do if we wanted to make sure you got 95% of the sticks:
if (beaver.sticks/sticks.length >= 0.95) {
text("YOU WIN!!!!", width/2, height/2);
}
Give it a go! Can you win?
Want to join the conversation?
- I wasn't sure where to ask this so I will here:
What does the "?" and ":" mean ive seen then but dont kno what it means
so can someone help me?(20 votes)- The ternary operators
?
-:
are short cut forif
-then
-else
involving expressions. For example to setm
to the maximum value ofa
andb
I could write
But those five lines of code are so tedious for such a simple assignment. So instead I take a short cut and writeif (a > b) {
m = a;
} else {
m = b;
}m = (a > b) ? a : b;
(58 votes)
- in project hoppy beaver Extreme it says that i can add NPCs but i can't figure out how to make them attack Hoppy. is they a article or something on that?(20 votes)
- No, there is no article on that. You can just make them follow Hopper, and then make an animation of something that attacks Hopper. Hope this helps!(4 votes)
- For the Hoppy Beaver Extreme project I cannot seem to find a way to display the winning/losing screen once the whole game has run (regardless if you meet the win conditions before the end). Is there a way to set the program to move onto the next scene/display an end screen after a specified period of time or after x amount of sticks have been removed from the screen?(11 votes)
- How would I add a losing screen?
else if (beaver.sticks/sticks.length <=0.95){
text("Take the L",100,200);
}
This doesn't work because it always pops up until the player wins. Would there be a way to only check this statement once all of the sticks have moved off the canvas?(9 votes)- You could add another condition with the
&&
operator that will only be true if the sticks have moved past. It could check if all the sticks have past you on the screen using their X value. You could make less hard coded numbers for flexibility with the amount of sticks.(4 votes)
- is it ok that i can't come up with the code for different things on my own in project hoppy beaver and have to get help from the starter code? i based my "NPCs"(rocks) on sticks code etc. Asking coz in introJS i didnt have this problem except for a few things then could work things out with a hint. do i need to read up on some sort of documentation?(6 votes)
- It is OK to ask questions and get help.(6 votes)
- How would you subtract from the score, say if the beaver touched an enemy, he would lose a point?(9 votes)
- Can someone help me with the code for Hoppy Beaver Extreme?(8 votes)
- Is there any function that can stop a program? (As in when Game Over occurs?)(4 votes)
- Invoke
noLoop();
is you no longer need the services ofdraw
.(9 votes)
- Why does it say "keyCode === 0" I thought the keycode for space bar is 32? I tried 32, and it didn't work.(4 votes)
- It's a bug in the code. You cannot depend on
keyCode
inside of thedraw
function. Trykey.toString() === ' '
instead.(6 votes)
- Is there a way to do this on the iPad?(4 votes)
- Yes, you should be able to do this on your iPad!(1 vote)