Puppy Pong Challenge Project

/ fhcxvqf1919 / By

DescriptionChallenge 2: Puppy Pong!
Description
Welcome to Challenge 2! Now we know that so far, we have been doing a lot of interesting
informative things, like creating a blog and working with APIs and web serving. But now, it’s time
to do something fun! In this challenge, you’re gonna create a game called Puppy Pong.
The rules of the game are very simple. There’s a puppy floating around on your screen. And
every time it comes down, you need to have your “Save The Puppy” bar right below it, to make
sure it does not touch the ground. Isn’t that easy?
To begin this challenge, create a folder called Challenge_2 inside your Tech Assignment 3
folder, with the following file structure:
Challenge_2
├─ index.html
├─ puppy_pong.html
├─ app.py
└─ public
├─ puppy_pong.js
└─ main.css (required for making the puppy bounce)
└─
Here are the requirements for each of these files:
app.py – Server (backend) code
● There should be three routes:
○
“/”, corresponding to index.html (i.e. the main homepage)
○
“/puppy_pong“, corresponding to puppy_pong.html
index.html – the main homepage
● Create a landing page that gives you a link to the Game. Clicking on this link should route
you to the “/puppy_pong” route where you will start playing the game.
● Using the tag, add a hyperlink to the puppy_pong game.
puppy_pong.html – Puppy Pong View
● This page should first and foremost, contain a link back to your main landing page index.html.
● The game should be an extension of the puppy screensaver we did in class
(https://codepen.io/rickgessner/pen/vYaRjEm?editors=0110)
● The puppy:
○
The motion of the puppy image should start from the left top corner, and be
downwards and rightwards. Everytime it hits a boundary, it should switch the
direction based on the boundary hit. E.g. If the block was going right and down,
and it hit the bottom boundary(your bar), it should start going up and still keep
going right, until it hits the right boundary or the upper boundary. (Same as in
class)
○
Of course, you need the Puppy itself to play the game. Take an image of a puppy.
You can save one on your computer, or you can simply find one with the following
url: https://source.unsplash.com/random/300×200?puppy
● Game elements:
○
Absolute Positioned Elements on the top right of the screen:
■ There should be a field which counts the time for which you have been
playing.
■ There should also be a field to count your score in the game (otherwise
why play at all?). This score will increase every time the puppy photo hits
your bar at the bottom.
○
There should be a bar at the bottom of the screen, which will move as your mouse
moves. (You need to addEventListener to see when and where the mouse is
moving)
○
There needs to be a “death-zone” which is at the bottom of the screen. This is the
place where, if the puppy image touches, you lose and the puppy stops moving
and a “Game Over!” Text is displayed.
○
There should be a reset button, which would allow you to play again if you lose.
■ When you lose, there should be text on the screen which says “Game
Over!” This text should disappear, when you reset the game.
■ The score, timer, and “Game Over” text should reset
■ Finally, the Puppy should start moving again
README.md
In your README.md for Tech Assignment 3, add a subheading for Challenge 2 and include the
following:
● Write a brief explanation of how your Javascript code works, what functions you needed
to use and how did you come up with conditions for the following problems:
○
Image motion flipping on hitting the boundary
○
The movement of the bar with the motion of the mouse.
○
The condition at which the collision between the bar and image is considered to
be valid.
● Include a screenshot of when you’ve lost and right after you click reset.
Submission Details
Submit all the code files to your repository, following the submission structure mentioned at the
top of this document. Make sure your README.md follows the instructions above.

Purchase answer to see full
attachment

DescriptionChallenge 2: Puppy Pong! Description Welcome to Challenge 2! Now we know that so far, we have been doing a lot of interesting informative things, like creating a blog and working with APIs and web serving. But now, it’s time to do something fun! In this challenge, you’re gonna create a game called Puppy Pong. The rules of the game are very simple. There’s a puppy floating around on your screen. And every time it comes down, you need to have your “Save The Puppy” bar right below it, to make sure it does not touch the ground. Isn’t that easy? To begin this challenge, create a folder called Challenge_2 inside your Tech Assignment 3 folder, with the following file structure: Challenge_2 ├─ index.html ├─ puppy_pong.html ├─ app.py └─ public ├─ puppy_pong.js └─ main.css (required for making the puppy bounce) └─ Here are the requirements for each of these files: app.py – Server (backend) code ● There should be three routes: ○ “/”, corresponding to index.html (i.e. the main homepage) ○ “/puppy_pong“, corresponding to puppy_pong.html index.html – the main homepage ● Create a landing page that gives you a link to the Game. Clicking on this link should route you to the “/puppy_pong” route where you will start playing the game. ● Using the tag, add a hyperlink to the puppy_pong game. puppy_pong.html – Puppy Pong View ● This page should first and foremost, contain a link back to your main landing page index.html. ● The game should be an extension of the puppy screensaver we did in class (https://codepen.io/rickgessner/pen/vYaRjEm?editors=0110) ● The puppy: ○ The motion of the puppy image should start from the left top corner, and be downwards and rightwards. Everytime it hits a boundary, it should switch the direction based on the boundary hit. E.g. If the block was going right and down, and it hit the bottom boundary(your bar), it should start going up and still keep going right, until it hits the right boundary or the upper boundary. (Same as in class) ○ Of course, you need the Puppy itself to play the game. Take an image of a puppy. You can save one on your computer, or you can simply find one with the following url: https://source.unsplash.com/random/300×200?puppy ● Game elements: ○ Absolute Positioned Elements on the top right of the screen: ■ There should be a field which counts the time for which you have been playing. ■ There should also be a field to count your score in the game (otherwise why play at all?). This score will increase every time the puppy photo hits your bar at the bottom. ○ There should be a bar at the bottom of the screen, which will move as your mouse moves. (You need to addEventListener to see when and where the mouse is moving) ○ There needs to be a “death-zone” which is at the bottom of the screen. This is the place where, if the puppy image touches, you lose and the puppy stops moving and a “Game Over!” Text is displayed. ○ There should be a reset button, which would allow you to play again if you lose. ■ When you lose, there should be text on the screen which says “Game Over!” This text should disappear, when you reset the game. ■ The score, timer, and “Game Over” text should reset ■ Finally, the Puppy should start moving again README.md In your README.md for Tech Assignment 3, add a subheading for Challenge 2 and include the following: ● Write a brief explanation of how your Javascript code works, what functions you needed to use and how did you come up with conditions for the following problems: ○ Image motion flipping on hitting the boundary ○ The movement of the bar with the motion of the mouse. ○ The condition at which the collision between the bar and image is considered to be valid. ● Include a screenshot of when you’ve lost and right after you click reset. Submission Details Submit all the code files to your repository, following the submission structure mentioned at the top of this document. Make sure your README.md follows the instructions above. Purchase answer to see full attachment

Why Choose Us

  • 100% non-plagiarized Papers
  • 24/7 /365 Service Available
  • Affordable Prices
  • Any Paper, Urgency, and Subject
  • Will complete your papers in 6 hours
  • On-time Delivery
  • Money-back and Privacy guarantees
  • Unlimited Amendments upon request
  • Satisfaction guarantee

How it Works

  • Click on the “Place Your Order” tab at the top menu or “Order Now” icon at the bottom and a new page will appear with an order form to be filled.
  • Fill in your paper’s requirements in the "PAPER DETAILS" section.
  • Fill in your paper’s academic level, deadline, and the required number of pages from the drop-down menus.
  • Click “CREATE ACCOUNT & SIGN IN” to enter your registration details and get an account with us for record-keeping and then, click on “PROCEED TO CHECKOUT” at the bottom of the page.
  • From there, the payment sections will show, follow the guided payment process and your order will be available for our writing team to work on it.