Fill This Form To Receive Instant Help

Help in Homework
trustpilot ratings
google ratings


Homework answers / question archive / The Assignment Must Be Completed On Khan Academy's Programming Environment

The Assignment Must Be Completed On Khan Academy's Programming Environment

Computer Science

The Assignment Must Be Completed On Khan Academy's Programming Environment.  Please Follow The Direction On The Attachment Pdf File. For This Frogger Game, The Program Will Use My Bitmoji (Digital Drawn Image Of Me), In Place Of The Frog. The Instructions For The Assignment Are Detailed Explicitly On The Pdf Attachment And It Includes A Solution Outline with professor's updates on it. This program will use some of the code from the Hoppy beaver program that was created previously (with HelpInHomework writer). A Pong Challenge will need to be completed prior to starting the frogger project. 

Overview

In this assignment, you will use more advanced Javascript game programming concepts that you learned about from the Khan Academy course materials to create a frogger-style game in which you try to get your bitmoji across a busy street without getting hit by a car and then jump on logs to cross a river.

 

Part I: Getting Started

Complete the Khan Academy Lessons. , provide a screen shot of the code for the completed challenge

1. Challenge: Pong

Part II: Programming A Frogger-Style Game With Your Bitmoji

In this part of the assignment, you will use the advanced Javascript game programming concepts and skills you learned to create a frogger-style game in which you try to get your bitmoji across a busy street without getting hit by a car and then jump on logs to cross a river.

? Important Note: For the remainder of the semester, all original programs, including the one listed below, will award you points for use of style that consist of:

  • Comments
  • Indenting and white space
  • Camel case names for variables, functions and parameters
  • Descriptive names for variables, functions and parameters
  • Use of functions to break code up
  • Minimal use of global variables (i.e., instead using function parameters and local variables)

A. Programming A Frogger-Style Game With Your Bitmoji

One of the original video games was Frogger, a game where you try to get a frog across a busy street without getting hit by a car, and then jump on logs to cross a river. You will create a Javascript program in Khan Academy that creates a frogger-style game in which you try to get your bitmoji across a busy street without getting hit by a car and then jump on logs to cross a river. You should use all the concepts and skills you learned about in your Khan Academy course materials to create your program.

  • Create a Khan Academy Javascript program by clicking here and copy/paste ALL of the completed code from the Hoppy Beaver code (i.e., scroll down to the end of the article to get all the code in the text box on the left side of the scroller game). Make sure you are logged into your Khan Academy account and regularly save your work!
  • Watch the Hoppy Beaver Program Summary video that summarizes the code presented in the Hoppy Beaver program.
  • Write a program that creates a frogger-style game in which you try to get your bitmoji across a busy street without getting hit by a car. You should modify the Hoppy Beaver code to do the following:

? Use a small version of your bitmoji instead of the Khan character. Your bitmoji as the character is a requirement—a game that does not use your bitmoji receives a 0.

?    Bitmoji code:https://www.khanacademy.org/computer-programming/bitmoji-code/ 5300960203063296

? You can use just the single version of your bitmoji for both the jumping and the falling drawing (i.e., Khan uses two versions for Hoppy Beaver).

? Remove the grass so that the bottom of the screen just has a brown stationary bar as the side of the road.

? Hint: Take out the array for the grass, the loop that fills the grassX positions, and the part of the draw loop that draws the grass.

? Instead of the sticks, draw cars with at least a body and two wheels that you draw moving across the screen.

? Instead of the game with sticks moving right to left, have the cars move left to right.

? Hint: This requires changing one plus sign to a minus sign, and one minus sign to a plus sign in the Hoppy Beaver code.

? This is required. A program without left to right moving cars will receive a zero.

? Have each car have a speed of one, two, or three set randomly, but constant. That is, each car should have either speed 1, 2, or 3 throughout the game.

?    This is required. A program without random speeds will receive a zero.

? The sides of the road are the brown bar at the bottom. The top of the screen is also a brown bar.

? Add one to the score for each time your bitmoji crosses the street (i.e., your bitmoji goes from the bottom to the top, or vice versa). Note that your bitmoji must alternate getting to the top, then bottom, then top, then bottom, etc. That is, do not award a point for two consecutive tops, or two consecutive bottoms.

? Hint: Watch the Scoring In Frogger Game video that gives hints about how to do scoring and how your program reacts when your bitmoji is hit by a car.

? If your bitmoji is hit by a car, make the car disappear, subtract one from the score, have your bitmoji remain in place and the game continues.

? Hint: Watch the Scoring In Frogger Game video that gives hints about how to do scoring and how your program reacts when your bitmoji is hit by a car.

                                    ?    Have the game stop after 100 cars.

? Hint: Make numCars a global variable, and use numCars to fill the stick array. You should also rename the sticks array to cars. Use a global variable stillPlaying and have the draw loop check stillPlaying—as we have done in several other assignments.

                                    ?     Display the score in the upper left corner of the screen.

? Remove the check for winning that was in the Hoppy Beaver code as it does not apply in your game.

? The game must have a start screen with your name, the title of the program, and a start button. The start button must use the Khan button class. Clicking the start button brings the user to the frogger game screen.

  • ? Save this program as lastname_frogger, where lastname is your last name.
  • Provide sharable link to khan program:

?

Grading Rubric

 

 

 

Frogger Solution Outline

 

You may use the following code outline as a possible solution to help you implement Frogger in

Javascript:

Code additions are in red comments, starting code is in blue

/*

Define 3 global variables:

  • Keep track of the number of cars. Name this variable numCars.
  • Keep track if the game is playing. Name this variable playingGame.
  • Keep track of the current scene. Name this variable currentScene.

*/

var Button = function(config) { this.x = config.x || 0; this.y = config.y || 0; this.width = config.width || 150; this.height = config.height || 50; this.label = config.label || "Click"; this.onClick = config.onClick || function() {};

};

Button.prototype.draw = function() { fill(0, 234, 255); rect(this.x, this.y, this.width, this.height, 5); fill(0, 0, 0);

textSize(19); textAlign(LEFT, TOP); text(this.label, this.x+10, this.y+this.height/4);

};

Button.prototype.isMouseInside = function() { return mouseX > this.x && mouseX < (this.x + this.width) && mouseY > this.y && mouseY < (this.y + this.height);

};

Button.prototype.handleMouseClick = function() { if (this.isMouseInside()) { this.onClick();

}

};

/*

Create a new Button that starts the game (changes scenes) when clicked. Reference the code at the bottom of this page for how to call the Button constructor function.

*/

mouseClicked = function() {

/*

Call your start button’s handleMouseClick() method here if currentScene is your splash screen.

*/

};

/*

Copy and paste function(s) for your Bitmoji.

*/

/*

Define a splash screen function. This should have the following:

  • The title of your program
  • Your name
  • Start button that changes the scene and starts the game

*/

var Bitmoji = function(x, y) { this.x = x; this.y = y; this.cars = 0;

};

Bitmoji.prototype.draw = function() {

this.y = constrain(this.y, 0, height-50);

/*

Call your Bitmoji function here with this.x as the x coordinate and this.y as the y coordinate

*/

};

Bitmoji.prototype.hop = function() {

/*

Call your Bitmoji function here with this.x as the x coordinate and this.y as the y coordinate

*/ this.y -= 5;

};

Bitmoji.prototype.fall = function() {

/*

Call your Bitmoji function here with this.x as the x coordinate and this.y as the y coordinate

*/ this.y += 5;

};

Bitmoji.prototype.checkForCarHit = function(car) { if ((car.x >= this.x && car.x <= (this.x + 40)) &&

(car.y >= this.y && car.y <= (this.y + 40))) {

car.y = -400;

// Decrement 1 from your bitmoji’s score.

// Decrement 1 from numCars.

}

};

var Car= function(x, y) { this.x = x; this.y = y;

// Give each car a new property called speed. Set this property to be a rounded number from 1 to 3.

};

Car.prototype.draw = function() {

/*

Draw a car with at least a body and 2 wheels. Use this.x for the x coordinates and this.y for the y coordinates for your shapes.

*/

};

var bitmoji= new Bitmoji(200, 300);

var cars = []; for (var i = 0; i < 40; i++) { cars.push(new Car(i * 40 + 300, random(20, 260)));

}

// Define a boolean variable “top” to keep track of if the bitmoji gets across the road (to the top of the screen). Set this initially to false.

draw = function() {

// If the scene is your splash screen

// Call splash screen function

// else if the scene is your game and playingGame is true

// Run all of the code below

// If your bitmoji reaches the top of the screen and top is false (meaning top hasn’t been visited)

// Increment 1 to the bitmoji’s score

// Else if your bitmoji reaches the bottom of the screen and top is true (meaning top has been visited)

// Increment 1 to the bitmoji’s score

// static

background(227, 254, 255);

fill(130, 79, 43);

rectMode(CORNER);

rect(0, height*0.90, width, height*0.10); rect(0, height*0, width, height*0.10);

for (var i = 0; i < cars.length; i++) { cars[i].draw(); bitmoji.checkForCarHit(cars[i]);

// Have each car move from left to right, using its random speed property.

}

textSize(18); text("Score: " + bitmoji.cars, 20, 30);

if (keyIsPressed && keyCode === 0) { bitmoji.hop();

} else { bitmoji.fall();

} bitmoji.draw();

// If numCars is equal to 0

// Set playingGame to false (to stop the game)

// Put a message on the screen saying “Game Over”

};

pur-new-sol

Purchase A New Answer

Custom new solution created by our subject matter experts

GET A QUOTE