Question: Need this wrote in javascript constructor (name, radius, speed) Parameters name radius (range of values: 10 to 50) speed (range of values: 0 to 25)

Need this wrote in javascript

constructor(name, radius, speed)

  • Parameters
    • name
    • radius (range of values: 10 to 50)
    • speed (range of values: 0 to 25)
  • Process
    • Assign the name, radius, and speed values to the appropriate class variables
      • Be sure to use the this keyword
    • Generate a random starting position (xPos and yPos) for the circlethis.xPos = Math.floor(Math.random() * (MAX_WIDTH - radius * 2)); this.yPos = Math.floor(Math.random() * (MAX_HEIGHT - radius * 2));
  • Output
    • None

get name() , get radius() and get speed() functions Note: Each of these functions differ only by the variable value affected.

  • Parameters
    • None
  • Process
    • Return the value of the requested class variable (name, radius or speed)
      • Be sure to use the this keyword
  • Output
    • The requested value

set name(name), set radius(radius), and set speed(speed) functions Note: Each of these functions differ only by the variable value affected.

  • Parameters
    • Various (i.e., name, radius or speed)
  • Process
    • Assign the provided value to the appropriate call variable (name, radius or speed)
      • Be sure to use the this keyword
  • Output
    • None

checkForWallCollision()

  • Parameters
    • None
  • Process Note: Use the movingDown and movingRight class variables to control the circle's direction.
    • Determine if the circle has hit the right edge of the canvasthis.xPos >= (MAX_WIDTH - this.radius * 2)
      • If so, change the horizontal direction of the circle from right to left
    • Determine if the circle has hit the left edge of the canvasthis.xPos <= 0
      • If so, change the horizontal direction of the circle from left to right
    • Determine if the circle has hit the bottom edge of the canvasthis.yPos >= (MAX_HEIGHT - this.radius * 2)
      • If so, change the vertical direction of the circle from down to up
    • Determine if the circle has hit the top edge of the canvasthis.movingDown = true;
      • If so, change the vertical direction of the circle from up to down
    • Update the circle's color by calling the updateColor() function
  • Output
    • None

draw(canvas) Note: This is the only class function that is called directly from the general JavaScript code.

  • Parameters
    • canvas
  • Process
    • Check to see if a collision has occurred by calling the checkForWallCollision() function
    • Update the circle's position by calling the updatePosition() function
    • Prepare to draw the circle using the current color
    • Draw the circle on the canvascanvas.arc(this.xPos + this.radius, this.yPos + this.radius, this.radius, 0, 2 * Math.PI);
    • Prepare to draw the circle's name on the circlecanvas.font = "bold 14pt Calibri";
    • Draw the circle's name on the circlecanvas.fillText(this.name, this.xPos + this.radius, this.yPos + this.radius + 5);
  • Output
    • None

updateColor() Note: Use the movingDown and movingRight class variables to determine the circle's direction.

  • Parameters
    • None
  • Process
    • Determine the color of the circle based on its current direction
      • Red - If the circle is traveling down and to the right
      • Green - If the circle is traveling down and to the left
      • Blue - If the circle is traveling up and to the right
      • Orange - If the circle is traveling up and to the left
  • Output
    • None

updatePosition()

  • Parameters
    • None
  • Process
    • Compute the new horizontal position (xPos) of the circle
      • Moving from left to right: xPos + speed
      • Moving from right to left: xPos - speed
    • Compute the new vertical position (yPos) of the circle
      • Moving from top to bottom: yPos + speed
      • Moving from bottom to top: yPos - speed
  • Output
    • None

Step by Step Solution

3.45 Rating (168 Votes )

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock

Heres a basic implementation of the described functionality in JavaScript javascript const MAXWIDTH ... View full answer

blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!