If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

### Course: Computer programming - JavaScript and the web>Unit 4

Lesson 4: Making a side scroller: Hoppy Beaver

# Stick collisions

We have the beaver hopping, we have the sticks displaying - we just need to bring the two together. We want to know whenever our beaver manages to get right over a stick, so that we can count that as a successful stick grab. That means we need to do a basic collision check of the two objects. There's a lot of places we could program this functionality, since it deals with two objects - as a global function, as a method on the Stick object, as a method on the Beaver object. Let's stick it on the beaver for now:
``````Beaver.prototype.checkForStickGrab = function(stick) {
// if beaver is over stick, do something
};``````
In that function, we first need to write a condition that will be true if the beaver and stick collided, and false otherwise. We could make it complex or strict, based on the location of the beaver's hand, for example, but let's stay basic for now. They should "collide" if:
• The stick's center x position is between the two sides of the beaver.
• The stick's center y position is between the top and bottom of the beaver.
The stick is drawn using the `rect` command, so typically, that would mean that its `x` and `y` properties represented its upper left corner coordinates. However, to simplify our collision calculation, we can switch to a mode where the `rect` is drawn from the center:
``````rectMode(CENTER);
rect(this.x, this.y, 5, 40);``````
The image for the beaver is also drawn by default from the upper left corner, but we'll keep that mode, as it works well for our calculation. To check the first condition, on the x position, we can do a check like this, where we check that the stick x is greater than or equal to the beaver's left side (x) and less than or equal to the beaver's right side (x + 40)
``stick.x >= this.x && stick.x <= (this.x + 40)``
To check the y position, we can do a similar check, where we see if the stick y is greater than or equal to the beaver's top (y) and less than or equal to the beaver's bottom (y + 40):
``stick.y >= this.y && stick.y <= (this.y + 40)``
Now, what should we actually do, once we've detected a collision between the beaver and the stick? We effectively want to remove the stick from the screen and prevent further collision. One simple way to do that is to just push the stick way off screen, by changing its y coordinate:
``stick.y = -400;``
At the same time, we want to remember how many sticks the beaver has "grabbed", so we'll increment the internal sticks property:
``this.sticks++;``
Finally, we need to call this method at an opportune time- how about right after we've drawn each stick?
``````    for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}``````
Here it is all together - check it out, when you hop over the sticks, they disappear!

## Want to join the conversation?

• Is there any way to remove the sticks from the game that's not moving them away from the screen? Something that would be more efficient like a destroy function.
• My project does not work. I need help with this area. How should I do this?
• Read the article over one more time and try to figure it out
• on the Astroid Blaster challenge, before I started doing anything with the code, i got this error:
"Oh noes!
'function () {if(typeof r!=="undefined"){r.push([e,arguments])}return 0;}' is not a function (evaluating 'pushMatrix()' "

What does this error mean, and how can I fix it??
• sometimes it will give you some crazy error if you misplace a "()"
• how do you get your collision to turn on on a project of your own
• Read the article over one more time and then use the if (x1 <= x && x1>= x && y1 <= y && y1 >=){
}
• Why is it "stick" instead of "Stick" as is the name of the protoype? Thanks!
• We start the names of constructor functions with a capital letter.
And we start the names of objects with a lower case letter.
That way it's easy to tell if we can simply use the object of if we need to use the `new` keyword first.
• Hi!

What does ".push" tell the program to do? Also, what does prototype mean?

Thanks!
• I'm wondering about the significance of the ordering of code. For example, it made sense to me to change the `beaver.draw` function from line 82 to 76. Is there a particular reason for putting it in the end?
(1 vote)
• The ordering of operations is important when those operations depend on each other. If they don't depend on each other, the ordering doesn't matter.

Let's take, for example, the making of a cup of tea.
There are a couple of steps to perform.
• Place a pan on the stove.
• Fill the pan with water.
• Turn on the stove.
• Wait for water in the pan to boil.
• Place down a cup.
• Pour water from the pan into the cup.
• Turn off the stove.
• Put tea leaves into the cup.
• Drink from your cup.

There are several steps that don't depend on each other.
Example, should you place down the cup first, or place the pan on the stove?
It doesn't really matter.

But other steps do depend on each other.
Example, should you pour the water into the cup, or place the cup first? Obviously, without placing the cup, there's no cup to pour water into. You would have a wet kitchen counter.

There are even optional steps.
You could skip putting tea leaves into the cup. It wouldn't be as tasty to drink, but it's definitely possible.
You could even skip turning off the stove. Technically, your tea wouldn't suffer from the stove being on all the time. Although your wallet might

---

Does the creation of `Beaver.prototype.draw` depend on anything? It depends on the existence of `Beaver`. So it should at least appear after the code that creates `Beaver`.
Does anything depend on the existence of `Beaver.prototype.draw`? Yes, the `draw` function does. So the `draw` function should be executed after the `Beaver.prototype.draw` method is created.
• and why does it say sorry we cant find what you are searching for
• Pamela didn't! It's perfectly fine for me!
(1 vote)
• Im making a game and the collision isn't working. How do I get it to work? I don't understand this document really