Feedback on a game I made using Canvas

Code Feedback
1

Hey There!

I created a game using canvas API in Javascript. It’s usually called breakout.

BREAKOUT LINK

Controls:

You start the game, and the Ball starts moving, and you can move the paddle by using left/right arrow keys.

Objective:

You have to destory all the bricks by hitting them with the ball.

Mechanics:

The ball rebounds if it hits left/right/top edges or if it hits the paddle.

If the ball hits the lower edge, the game’ll end and you will lose!

If you destroy all the bricks, You’ll WIN!

Features

  1. Offline Support, You can load it once and then if your browser supports Service Workers it’ll also work when you are offline

Why I made this game?

I wanted to build something relatively simple with canvas few months back and it was very confusing at that time, So I left it there and went on to learn more and more about javascript, Now 2 days ago, I had nothing better to do, So I thought that maybe I should improve my canvas skills and then started working on this game and I had a list of features that I wanted in this game and I have achieved all those objectives.

Please tell me if you like it and what can I improve in this game?

PS: I really like javascript and I am looking for projects I can contribute to, Please let me know if you want to build something and can use a hand,

PROJECT GITHUB

GITHUB

Also, Ask me if you need any help in understanding any part of the code I wrote for this game. I’ll be very happy to help.

2

Hey man,

Cool concept. Unfortunately it doesn’t really work on my pc because the bottom footer covers the paddle:

image.png1366×736 24.3 KB

1 Like
3

Oh, I am so sorry, I only tested it on 1080p/900p resolution. I’ll push a fix for this, So if the window height is below 900px, it’ll decrease footer’s height or remove it altogether…

4

hey, well done! it works awesome. The only suggestion I can think of would be to start with the ball placed higher, because it get’s very difficult to start. Congratulations for the hard work! :slight_smile:

1 Like
5

Thanks for the feedback, Sure, I’ll change the spawn location of ball so it always spawns above a line… Thank you for playing this game.

6

Cool its working now. Pretty fun! Did you use any frameworks for this?

1 Like
7

No frameworks. Plain javascript only.

I first used canvas on my Website to implement an animation like anypixel.js website and I failed to do that.
I used this as motivation to make it only using vanilla javascript and no libraries.