DEV Community

Cover image for 🎲🎲 Build the Simon game with JavaScript: a guide

🎲🎲 Build the Simon game with JavaScript: a guide

Dumebi Okolo on August 27, 2023

Hello and welcome! 🤩🤩 When you journey into web development, there are tiers of challenges, and conquering javascript is one of them! In my experi...
Collapse
 
jonrandy profile image
Jon Randy 🎖️

There are quite a few issues with your code. In (presumably) the original version, you were obviously using jQuery, but here you seem to have replaced the jQuery function $ with document.querySelector. This means that any methods like .addClass, .fadeIn, .fadeOut etc. will not work. Most of the example code you show here will not run.

Collapse
 
dumebii profile image
Dumebi Okolo

I'm so ashamed of myself rn.. I don't know why I entirely missed that!
Thank you so much for taking the time to read through a and notice.
It's such a clumsy mistake.
Thank you!

Collapse
 
robsongrangeiro profile image
Robson Grangeiro

Nice post! Sometimes we need only a good idea to learn new skills. Thanks!

Maybe, do you consider to cover in the next post how to use a javascript sandbox (playcode.io/ or codepen.io) to run simple projects.

Collapse
 
dumebii profile image
Dumebi Okolo

Hmm. Do you mean to write an article where I teach how to use online IDEs, or is it specific to this project?

Collapse
 
robsongrangeiro profile image
Robson Grangeiro

Could be this project, but is only a suggest.

Thread Thread
 
dumebii profile image
Dumebi Okolo

Alright. Will do.

Collapse
 
jd2r profile image
DR

Cool post!

From a styling note, I think it would be more user-friendly if you blinked the entire pattern every round instead of just the one color that comes next. The current game is pretty difficult, but that's ok too.

Collapse
 
dumebii profile image
Dumebi Okolo

I'm sorry, but I don't understand what you mean by blinking the entire pattern every round. If you do that, the game loses its essence.
The whole point of the game is for you to remember the patterns and follow along with the computer.
You can learn better how to play the game here.

PS, the game isn't meant to be easy. 😉

Collapse
 
jd2r profile image
DR • Edited

If you were going for a direct clone of Simon, you'd have to have the pattern flash from the first light all the way to the last light on every cycle. As of right now, the game only flashes the very next light in the sequence, which is good, but a more traditional game would flash every light and not just the current one.

Here's a quick example to illustrate what I'm talking about.

Computer: 🟢
Player: 🟢
Computer: 🟢🟡 (yours would have just flashed 🟡)
Player 🟢🟡
Computer 🟢🟡🔵 (yours would have just flashed 🔵)
Player 🟢🟡🔵

And so on.

The video explanation actually backs me up on this. I totally understand if you decided to alter some things, but I was just making a statement on the official rules if this was intended to be an exact clone.

All of that being said, it's your game to build as you like - and I really like what you've done with this one! I'd just shy away from calling it an exact recreation of the game when it's not exactly that.

Just my thoughts, feel free to use or not use. I think the game illustrates the material you're trying to teach and your message of problem-solving very well as it is currently.

Thread Thread
 
dumebii profile image
Dumebi Okolo

Oh. I understand what you mean now.
However, doesn't this (the method you just explained now) negate the whole point of the game being a memory game? If the computer keeps flashing previous entries for you, you don't have to work much towards remembering what entries you've made so far.

Do not think though that I do not appreciate your comment. I appreciate you taking out time to read through, play and understand. Thank you.

Collapse
 
snickdx profile image
Nicholas Mendez

Nice post, high quality approved.

Collapse
 
dumebii profile image
Dumebi Okolo

Thank you!!