Guaranteed upvote for correct coding and explanation, Thanks!

Refer to the screenshots

INSTRUCTIONS:

$-1.$ You must use template given to you. You are NOT allowed to modify CSS or HTML code.

You can only modify JavaScript code. You'll get zero grade if this requirement not met.

$-2.$ Please do NOT change the initial location and speed of the $$ball$$ object.

$-3.$ Please do NOT change the initial location of the red $$racket$($see $$#racket$$ CSS declarations$).$

$-4.$ Please define "Racket" constructor function and create racket object $($hint: see "ball" object$).$

The speed of the "racket" should be at least $7$ px$.$

$-5.$ You must control the $$racket$$ with keyboard keys $($left$/$right arrow keys$).$

$-6.$ The green square $$shape$($see $$shape$$ object$)$ must be randomly placed somewhere in the

upper right location of the $$container$($x coordinate is at least $200$px and y is less than

$250$px$).$ The size of the $$shape$$ must be randomly generated between $5$px and $30$px$.$

$-7.$ The $$racket$,$ball$$ and $$shape$$ object must always stay within the $$container$$ element. I.e$.$

"racket" should not move outside container and the $$ball$$ must correctly bounce off the $$racket$.$

$8.$ If the $$ball$$ misses the $$racket$$ it should slowly $$disappear$$ at the bottom of the container.

The game ends and the red message $$You lost$$ is shown.

$-9.$ When the $$ball$$ object $$hits$$ the $$shape$$ the game ends and blue message $$You win$$ is shown.

$-10.$ The game ends if you don$$t win or loose after $20$ seconds of playing. A green message $$Draw$$

must be shown. Make sure this message doesn$$t appear after you win or loose the game!

$-11.$ When the game ends, you must cancel all the events $($keyboard$,$ mouse$),$ and clear setInterval$()$

and setTimeout$().$ You must also $$hide$$ both the $$ball$$ and $$shape$$ elements, but not $$racket$.$

$-12.$ The height and weight of the $$ball$$ and $$racket$$ shapes must be determined from the CSS

styles $($see comments inside DOMElement constructor function!$).$

$-13.$ Your code must be reasonably optimized: do not pollute global scope with variables! Create$/$use

methods in the appropriate objects & functions, avoid duplicate code, cache selectors, etc.

$-14.$ Make sure there are no console messages of any kind and no debugging code left!

$-15.$ JavaScript code must be in the index.html file. Do not use external JS files!

$-16.$ Do NOT modify DOMElement Constructor function! Modify only Ball and Racket functions.

Additional:

$-1.$ To randomly place green $$shape$$ you can use Math.random$()$ function.

Don$$t forget that $$shape$$ must be placed in the upper right location

$-2.$ Use a constructor function to create a $$racket$$ JavaScript object that inherits properties of the

DOMElement object

$-3.$ To detect $$collision$$ between objects $($ball$$ and $$racket$$ or $$ball$$ and $$shape$)$ please check

collision$()$ function in DOMElement.

Check also Axis$-$Aligned Bounding Box collision detection condition.

$-4.$ You should attach $$keydown$$ event to window object.

$-5.$ To hide$/$show elements you should use $.$show$()$ and $.$hide$()$ methods defined in DOMElement.

$-6.$ To avoid ball "bouncing" between racket and bottom of the container you need to check the

following condition: ball.y $+$ ball.height $>=$ racket.y $+$ racket.height

$-7.$ The $$ball$$ can $$disappear$$ at the bottom of the container when you reduce its height slowly at

each move until the height becomes less than ball.y$\_$speed.

When ball.y $+$ ball.height $>=$ boundary.height it means "ball" reached the bottom of the

container and it's time to reduce is height: this.setDimensions$($this$.$boundary.height $-$ this.y$)$;

Note: this must be done in combination of Hint N$6.$

$-8.$ To stop the game just call gameOver$()$ function, where you$$d need to hide objects $($ball and

shape$),$ remove all event handlers, and clear setInterval$()$ and setTimeout$()$ functions:

CSS CODE:

#container $\{$

position:absolute;

top:$50$px;

left:$50$px;

height:$500$px;

width:$800$px;

border: $1$px solid black;

$\}$

#ball $\{$

position:absolute;

width:$40$px;

height:$40$px;

background$-$color:blue;

display:block;

border: $1$px solid black;

$\}$

#racket $\{$

position:absolute;

width:$80$px;

height:$7$px;

background$-$color:red;

border: $1$px solid black;

display:none;

top:$480$px;

left:$360$px;

$\}$

#shape $\{$

position:absolute;

width:$10$px;

height:$10$px;

background$-$color:green;

border: $1$px solid black;

display:none;

$\}$

#message $\{$

position:absolute;

top:$210$px;

left:$250$px;

width:$300$px;

padding:$10$px;

text$-$align:center;

background$-$color:blue;

color:white;

border: $1$px solid black;

font$-$family:monospace;

font$-$weight:bold;

display:none;

font$-$size:$50$px;

$\}$