Simon Game JavaScript Tutorial for Beginners



In this JavaScript game tutorial, you will learn how to create a Simon game using JavaScript, HTML, and CSS. Every line of JavaScript is explained.

🔗Full code: https://github.com/beaucarnes/simon-game
🔗HTML file: https://raw.githubusercontent.com/beaucarnes/simon-game/master/index.html
🔗CSS file: https://raw.githubusercontent.com/beaucarnes/simon-game/master/css/style.css

Tutorial by Beau Carnes.

🐦Follow Beau on Twitter: @BeauCarnes

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 37 Comments

  1. Suraj Kumar

    @freeCodeCamp.org at 32:26 in the video I attempt to print to the console the filled array but nothing happens when I click start. Just to verify the project worked I copied the JS script and pasted it and run it. However I get an uncaught error property play or null for the function “four” audio.play(). Can someone explain why this happens. I am using sublime text with google chrome browser.

  2. kreglfromworld

    On 1.25x speed, he actually talks with exact normal talking speed

  3. P. S.

    Thank you so much. I started to learn java last week.

  4. e u

    amazing, really learned a lot thanks beau

  5. Eric Reddy

    At 47:26 I am getting this console error:
    index.js:124 Uncaught TypeError: Cannot read property 'style' of null
    at clearColor (index.js:124)
    at gameTurn (index.js:76)

    Anyone have thoughts on this?

  6. Abhishek shah

    Hey Beau, would like to ask you a question. When the user presses a button you setTimeout( () => { clearColor()} , 300); which makes the color disappear after 300 ms. However I'd like to keep the button lit up as long as the user holds down his click button. Is there a way in JS to achieve this?

  7. Bayron Anaya

    What software is he using? I need links, I'm totally lost…

  8. IT

    20 rounds? Here I thought the game was virtually infinite. I made one in C# and its virtually infinite.

  9. yowiehopper

    Thank you very much, Beau Carnes. I really appreciate you taking the time to create this video. I am also glad that you provided us the code in case we got stuck. I was trying to keep up with the video and missed some brackets.

  10. Akarsh Kumar

    Bug: If user wins and untick power off and clicks on start button still he can play the game because of if(on|| win) at line 43

  11. Elias Prado

    There's a bug in this code that I am for months trying to fix. When I click multiple times on the same button in less than a second the game crashes. I even have added async to the check() function and added good = true after noise = false; in check() function but it doenst solve the problem. Does anybody knows how to fix it?

  12. Asadex

    Well I didn't code along with this tutorial, I just tried to understand how to build it by myself, I didn't use noise and seems to work well, but I have the same thing as your game: When you click fast on your turn , somehow it doesn't stop and the turn of the pc becomes faster

    The game becomes crazy and starts displaying a lot of buttons, how to fix that bug?

  13. Tamir Polyakov

    Thank you for doing so many js game tutorial I have been binge coding them. Please make more thank you

  14. This is the best video ever for tutorial of Simon Game Thanks for this amazing video

  15. Eric Hamm

    I learned JS on FreeCodeCamp and Udemy. One of my first projects was building a Memory Game, I.E. Simon. This really opened my eyes to how much I could improve it. I couldn't figure out how to get the sequence to repeat every time but you made that clear. Love your videos, hope you keep putting them out.

  16. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

  17. Dr John Pollard

    WOW, this is clear and informative, unlike so many other tutorials. Well done!

  18. Derda

    Hello, if you wanted the game to have no consecutive same tile, how would you do it?

  19. Laura Dangler

    Can somebody please tell me where to get the Audio files that are in the html? I dont see the Audio anywhere inside the full code Zip??

  20. John K

    looks so hard, how is this beginners XD

  21. any chance you could provide the project requirements, I see the course has been updated and no longer has that project. I checked the wayback machine and still couldn't find it.

  22. Mem

    Hi, I have a question. Why he used querySelector() and not getElementById() ??

Leave a Reply