Okay… You're getting pretty comfortable with Python at this point, but it turns out you're learning a lot more than just Python. Many languages share similar concepts that make switching between them easier than you would expect! In this lab, we're going to use Javascript which is similar to Python in many ways. The syntax is a little bit different, but it's not hard to get the hang of. Examine these two pieces of code:

#python: def someFunc(aNum): return aNum + 5

// Javascript: function someFunc(aNum) { return aNum + 5; }

Even if you've never seen Javascript before in your life, you probably won't have much trouble determining what's going on there. One interesting thing about Javascript is that it really doesn't care much about indentation or newlines like Python does. Instead, it uses semicolons to keep track of the end of lines and curly brackets to keep track of blocks of code. That said, there are conventions that most developers follow when working with Javascript, and we'll try to follow them as well in this project. Now look at this example:

#python: def someOtherFunc(aNum): if aNum > 5: print("Greater than 5!") elif aNum == 5: print("Equal to 5!") else: print("Less than 5!")

// Javascript: function someOtherFunc(aNum) { if (aNum > 5) { console.log("Greater than 5!"); } else if (aNum == 5) { console.log("Equal to 5!"); } else { console.log("Less than 5!"); } }

Again, even though the syntax may be totally foreign, the general flow of execution is pretty easy to follow. One important point to note is that the parentheses around the conditions in the Javascript example are necessary while they would be optional in Python. This is really all the syntax understanding that you will need for this lab, but here is an excellent resource if you want to learn more about Javascript: W3 Schools

Now it's time to try writing some Javascript! First you will need to add a few files to your prism server. Download these and save them to a new folder on your prism drive under public_html called "lab4": student_code.js music.mp3 index.html (do not edit) As always, it's important that you save these to the right place so that we can grade your lab. Now when you go to the folder in your browser, you should see a half finished game. Go ahead and try it out: http://www.prism.gatech.edu/~yourusername/lab4/ Your job is to finish the game! We've provided some empty functions for you to fill in as well as some more functions for you to use as you need them. When you finish, the video game should be playable, like in the following example video: Here are the expectations for each function:

render_frame()	This function is called by the game every single time the screen refreshes (60 times a second at best). It should do a few things: if the user is pressing the "b" key, it should call truck_brake() if the user is pressing the left arrow, it should call truck_move_left() if the user is pressing the right arrow, it should call truck_move_right() if the user is not pressing any of those keys, it should call truck_coast() the function should call truck_update_position() every time regardless of what key is pressed the function should randomly decide whether to make a new kiwi start falling using the user's setting for the probability
truck_move_right()	This function should increase the truck's velocity by some constant. There should be a maximum velocity to keep the truck from accelerating infinitely. These exact values are up to you.
truck_move_left()	This function should decrease the truck's velocity by some constant. There should be a minimum velocity which is less than zero to allow the car to travel left.
truck_coast()	This function should make the truck's velocity approach zero.
truck_brake()	This function should make the truck's velocity approach zero much more quickly than truck_coast.
truck_update_position()	This function should do two things: change the position of the truck using its velocity as the offset. bounds check: if the truck is going off the side of the screen, immediately change its velocity to a lesser value in the opposite direction to cause it to bounce back.
check_collision(kiwi)	This one is tricky. It will be called by the game for every kiwi for every frame (60 times per second) and its job is to determine whether a particular kiwi is colliding with the truck. In the case that there is a collision, it should delete the kiwi, increment the kiwi_caught counter, and then update the HTML element with the new value. In general, you can change what's on a webpage by selecting the element by it's ID and changing its inner HTML like so: document.getElementById("element-id").innerHTML = some_var; The ID of the element you want to change is "kiwi-count" and the value you want to change it to is stored in the kiwi_caught variable. It is up to you to decide what qualifies as a collision (do the kiwi's need to land in the truck bed or do they just need to touch the truck to count as a point?), but you need to leave a comment explaining your decision and the math that you used to implement it. Remember, a comment uses two slashes in Javascript: // like this. You already have most of the information you need, but here are some details that might come in handy: the width of the truck is 250px the distance that the truck is from the bottom of the screen is constant
game_end()	This function is called by the game whenever the timer ends. It should open a popup congratulating the user on how many kiwi they caught (it should say the number) and then reset kiwi_caught to zero and update the HTML element. It should be clear that pressing the button starts a new game.

kiwi_rate	Variable representing the user's setting for the rate that kiwi should fall. This is a number from 0-100 that should be treated as the percent chance that a kiwi will fall at any given frame.
Math.random()	Returns a random value between 0 and 1.
is_down(aStr)	Returns true if the corresponding key is pressed down, false otherwise. Accepts "b", "left" and "right" as parameters.
create_kiwi()	Creates a falling kiwi!
set_truck_velocity(aNum)	Sets the velocity of the truck.
get_truck_velocity()	Returns an integer respresenting the current velocity of the truck.
set_truck_left(aNum)	Sets the distance of the truck from the left side of the screen.
get_truck_left()	Returns an integer respresenting the distance of the truck from the left side of the screen.
get_kiwi_x(kiwi)	Returns an integer representing the distance a given kiwi is from the left side of the screen.
get_kiwi_y(kiwi)	Returns an integer representing the distance a given kiwi is from the top of the screen.
delete_kiwi(kiwi)	Removes a given kiwi from the screen.
alert(title, text, button)	Opens a popup window and places the given parameters into the corresponding positions in the window.
window.innerWidth	Variable that represents the width of the window in pixels.
window.innerHeight	Variable that represents the height of the window in pixels.

15% - render_frame()	2 - brake works 3 - right arrow works 3 - left arrow works 3 - coasting works 2 - truck_update_position() is always called 2 - uses random to create kiwis
10% - truck_move_right()	5 - Truck velocity increases 5 - Truck has maximum speed
10% - truck_move_left()	5 - Truck velocity decreases 5 - Truck has maximum speed
10% - truck_coast()	10 - Truck velocity approaches zero
10% - truck_brake()	10 - Truck velocity approaches zero quickly
15% - truck_update_position()	10 - Truck moves 5 - Truck does not pass the edge of the screen
15% - check_collision(kiwi)	5 - Comment explains the method for looking for collisions 5 - Collisions occur as expected 5 - Collision method makes sense
15% - game_end()	3 - opens popup 4 - popup contains title, message and button text 4 - message contains kiwi_caught 4 - kiwi-count element and kiwi_caught are reset

This music really sucks. Replace the music.mp3 file with any other song for 5 points of extra credit. Not hearing anything? Make sure you turn up the volume in the options panel.

student_code.js music.mp3 (even if it's just the original) index.html (do not edit)

created by Joshua Diaddigo