https://github.com/ratulsharker/dx-ball

This is a simple clone of dx-ball arcade game
https://github.com/ratulsharker/dx-ball

bricks dx-ball dx-ball-game game game-development gameplay javascript javascript-canvas stages

Last synced: 1 day ago
JSON representation

This is a simple clone of dx-ball arcade game

• Host: GitHub
• URL: https://github.com/ratulsharker/dx-ball
• Owner: ratulSharker
• Created: 2020-07-14T07:54:01.000Z (over 4 years ago)
• Default Branch: web
• Last Pushed: 2023-01-24T19:37:50.000Z (almost 2 years ago)
• Last Synced: 2023-08-06T22:06:04.273Z (over 1 year ago)
• Topics: bricks, dx-ball, dx-ball-game, game, game-development, gameplay, javascript, javascript-canvas, stages
• Language: JavaScript
• Homepage:
• Size: 16.2 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DX-Ball

This is a simple web based clone of dx-ball arcade game.

## Gameplay 🎥

[](https://www.youtube.com/watch?v=bP4f78ZB80g)

## Play It 🎮

[Click to play 🕹](https://ratulsharker.github.io/dx-ball/)

## Server Version 🖥

There is a nodejs application along with followings ([Can be access in master branch](https://github.com/ratulSharker/dx-ball/tree/master))

 - API Server.

 - Authentication.

 - Score Management.

 - Fully containerized.

## Further Improvement 🧑‍💻

There are several [MDN Guideline](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas), read and improve performance. Following is a small list which can improve performance.

- [x] Disable canvas transperancy.

- [x] Separate canvas for Bat. Update only while mouse moved.

- [ ] Separate canvas for top score-stage_name-life. Update only while they updates.

- [x] Separate canvas for stage drawing. Update only while brick ball collide or stage updates.

- [x] Resizing images to size which they are drawn.

- [ ] Instead of clearing whole screen, only update the portion where the ball or power last time was present.

- [ ] Calculate collision and movement related tasks in a separate web worker, keep runloop only for rendering.

- [ ] Experimenting with `window.requestAnimationFrame`.

- [ ] Optimize stage brick collision by considering is the ball inside the stage area or not.

- [ ] Show nicer toast instead of showing `window.alert('msg')`.

- [ ] Introduce inter-ball collision.

- [ ] Introduce more power like following:

  - [ ] Shooting capabilities.

  - [ ] Fireball (blasting few neighbouring blocks).

  - [ ] Invincible ball (do not bounce back from bricks).

  - [ ] Introduce more that two ball.

- [ ] Put a screen of available stages.

- [ ] Ability to pause in the middle of game & quit from game.

- [ ] Ability to control SFX and Gameplay volume.

- [ ] Pacakge the whole js, css using a bundler.

- [ ] Introduce aspect ratio of gameplay screen.

- [x] After gameplay:

  - [x] Prompt user for name (In local storage)

  - [x] Store the score with given name.

  - [x] Show the hall of fame according to that.

- [ ] Hide the mouse cursor while playing the game.

- [ ] Introduce more natural fun stages.

- [ ] Show a nice loader, while the whole game is being loading.

- [ ] Show a intuitive messages.

  - [ ] Left click to start the game.

  - [ ] Right click to pause the game.

- [ ] Think of an idea, how mobile user will play this game.