ratulsharker / dx-ball Goto Github PK

1. Increase life.
2. Decrease life.
3. Increase Bat size.
4. Decrease Bat size.
5. Increase Ball size.
6. Decrease Ball size.
7. Speed up Ball.
8. Slow Ball.

While a power drops to the right side of the bat, it applied. Debug it properly.

1. Turn off canvas transparency for performance reason.
2. In Readme.md include client side validation + Show nicer toast instead of window.alert

In the Readme.md write how to setup this project.

Re-calculate ball angle, while hitting the bat.

After hitting the bat if the ball angle is between 76 Degree to 104 Degree, then move it to either way to 76 or 104.

It's needed to be done, due to a bug arise. While ball going straight up, if it hit side then vertical flip is not doing anything.

Another thing, after dying in the first part, second session starts with 90 Degree angle. Make sure it starts with initial 45 Degree.

In which size images are drawn, that size is now available. So canvas don't have to resize them.

Whole application needed to be dockerized, so that anyone wanted to run this project can easily test it out.

1. Put an exotic background.
2. Place register / login / forgot password.
3. Show dialog using bootstrap to register / login / forgot password.

Currently dx-ball game is split into two separate html which are

• index.html
• gameplay.html

Goal of this task is to move all the implementation into a single html index.html. This goal will help us to bundle the whole application using a javascript bundler i.e webpack.

While there is only one brick, auto destroy with 1 min interval.

We want to completely redesign the main menu screen

Notable features of this page.

• There is long arc from the top left screen to the bottom left screen.
• A moving ball will always move from top to bottom, following the arc over time.
• Main menu buttons will be shown along with the arc.
  • Closely observe the button left side, it is align with the curve itself.
  • Also observe the button's placement following the curved outlines.
  • Upon mouse hover, these button's should be inverted.
• Randomly stellar will be spawn in different places of the screen.
  • These stellar will grow bigger and become smaller over the time.
  • Closely observe the shape. They are diamond shaped.
• Overall menu page's background color will be dark color.
• Applying a neon light glowing effect to the overall screen component is a plus.

1. Add to continuously play and electrical noise sound, which will gradually increase in volume.
2. Add a thunder implementation in canvas from top center to the last brick.

Until now jQuery is used in dx-ball in following processes

• Querying DOM.
• Event binding.
• Bootstrap's underlying usage (i.e modal)

We want to get rid of jQuery implementations. Scope of this task is to convert followings

• Instead of querying DOM using jQuery, use native javascript.
• Use javascript native event binding instead of jQuery.

Getting rid of the Bootstrap will be a big task itself.

If Game is over (somehow), bricks, ball & bat remain on screen. all of these should be cleared up.

Following improvement can be done according to mdn

1. Stop transparency for the canvas.
2. Prepare separate canvas element for the bat movement. Only update canvas if mouse is moved.
3. Prepare separate canvas for the top element (score - stage name - life) bar. Update that canvas only while score / stage changed / life count updated.
4. Prepare separate canvas for stage drawing. Update that canvas only while brick collision happen or stage changes.
5. Ball movement and power movement will be in a single canvas, where it currently resides.
6. Resize images to size which are drawn.

1. Refactor existing the api calls.
2. Do silent score update api call.

Following things needed to be done

1. Setting .gitignore.
2. npm init.
3. express setup.
4. serving hello world index.html.

Prepare following apis

1. Register new user.
2. Login existing user.
3. Forgot password (Basically reset password to something known).
4. Prepare api for put score.
5. Prepare api for getting top max-scored users.

1. Implement api hall of fame.
2. Show hall of fame inside a dialouge.

1. In each stage, apply a background music.
2. While ball hitting the ball, play a music.
3. While ball hitting the wall / brick play a music.

This is the second thing after score, which we want to store at user's side.

User will be able to select one of the preset screen resolutions

• 16:9
• 18:9

After experimentation more resolutions might appear.

From main menu, user can access a screen named Settings, where user can choose the appropriate resolution for the user. Once the game is loaded, that preferred resolution will be applied to the overall gameplay and main menu showing.

This issue depends on the following issue

• Issue-90

Following function names needed to be updated

1. Ball.prototype.stickBottom
2. Ball.prototype.handleCollisionWithWindowReportBottomCollision
3. Ball.prototype.handleBrickCollisionResult
4. Ball.prototype.collisionWithBat
5. Ball.prototype.hitDirection
6. Bat.prototype.repositionBat
7. Game.prototype.operateBallBasedOnState
8. Game.prototype.operatePowerBasedOnState
9. Power.prototype.handleCollisionWithWindowReportBottomCollision.
10. Power.prototype.reportBatCollision
11. Stage.prototype.brickCollisionResult

Remove following functions (checking usage)

1. Ball.prototype.isInsideCircle
2. Ball.prototype.distance
3. module.exports.AppError = AppError

Find better place for function

1. getPowerTypes
2. roundRobinPowerProvider

Design two decent looking levels.

Following apis needed to be integrated into game play

1. New user registration.
2. Existing user registration.
3. Allow user to reset password.
4. After successful login, show user Play, Hall of fame & logout button.

Create a catalog, showing off all the powers in menu.

Following things needed to be done

1. Remove the jwt asynhronus keys from the repository.

Create a new power involving multiple balls.

1. Prepare the gameplay page.
2. Explore the possibility of responsive layout.
3. Prepare the game loop.
4. Try drawing the dx-ball bat.
5. Move bat across mouse move.
6. Draw ball.
7. Draw stages.
8. Control game play (manage life, score etc).

Current implementation of dx-ball occupies the whole screen of the browser.

We want a fixed screen resolution (18:9) for now. Whole game will be rendered under this screen resolution.

While updating speed, ball direction changes sometimes.