So I made a Javascript game and I need some feedback

[Aclixion]

Link to Project: GitHub - Aclixion/Bubble-Popper

I was bored one day so I made this little game you can play to pass some time and relieve stress. Here are some things I’m looking for:

1. What are some best practices I should follow? What should I do to improve my code?
2. How should I organize my Javascript code?
3. What are some GitHub best practices I should follow?

[jwilkins.oboe]

HI @Aclixion !

@Aclixion

I was bored one day so I made this little game you can play to pass some time and relieve stress.

I think it would be great if we could play the game and test it out.
Do you have this deployed somewhere?
If not, that would be a good start.
Something like github pages would work.

@Aclixion

What are some best practices I should follow? What should I do to improve my code?

Some of naming for files is a little unconventional.
For example, instead of javascript.js you could something more common like index.js or script.js.

In your css, I would suggest removing the import statement and using the google font link tag in your html instead.
There are a lot of discussions about imports in css and you can read about it here.

Is using @import declarations a bad practice?

@Aclixion

How should I organize my Javascript code?

I think your code structure is pretty easy to follow.
You have all of your variables at the top, followed by your functions and then the eventlistener.

@Aclixion

What are some GitHub best practices I should follow?

Typically for readmes, you would use a markdown file extension (.md) instead of a text file (.txt)

Also, since this is a game, I would suggest adding a link in the readme and possibly some screenshots from the game.

Lastly, I would start getting in the habit of writing more descriptive commit messages.
Right now you are just have one commit message and you are solely focused on personal projects.
But eventually you will be working on a team or open source environment and providing descriptive messages will provide good context on what you worked on.

Here are some good resources to look into.

How to Write Good Commit Messages: A Practical Git Guide

Conventional Commits

Hope that helps!

[Aclixion]

Thanks! This really helped!

May I also request some suggestions on my Javascript in general? For example, is there any unecessary and redundant lines of code that I can remove? Sorry for all the trouble!

[jwilkins.oboe]

I think everything looks clean.

You might consider declaring and initialize these variables at the top

let score = 0;
let secondsLeft = 10;

[bbsmooth]

I just wanted to chime in and say that I am pleasantly surprised that I was able to play this game using the keyboard only. To be honest, I was expecting a bunch of <div>s with a click handler attached for the bubbles and instead you are using <button>s, which automatically make it keyboard accessible. Great job!

[Aclixion]

Thank you! Honestly, I didn’t know that fact when I was working on my project.

I also needed a simple way to make sure that there is a way to turn off the buttons so that they cannot be clicked if the game ends. This is the main reason why I used buttons, because it has the disabled attributes.

[jenovs]

The loooooong list of 156 HTML buttons can be replaced with a JS loop:

const mainSectionEl = document.querySelector('.main-section');

const allBubbles = Array.from({ length: 156 }, () => {
  const bubbleEl = document.createElement('button');
  bubbleEl.classList.add('bubble');
  bubbleEl.setAttribute('disabled', true);
  return bubbleEl;
});

allBubbles.forEach((el) => {
  mainSectionEl.appendChild(el);
});

This way you can easily change the size of the grid.

In startGame() you don’t need ifs to enable all buttons:

  // Enables all bubbles
  for (bubble of allBubbles) {
    bubble.disabled = false;
    bubble.classList.remove('popped');
  }

Same in the endGame():

  // Disables all bubbles
  for (bubble of allBubbles) {
    bubble.disabled = true;
  }