Learn JavaScript by Building 7 Games – Full Course

Learn JavaScript by Building 7 Games – Full Course

Learn JavaScript by building 7 retro games.

✏️ Ania Kubów created this course. Check out her channel:

💻 GitHub Links:
Rock Paper Scissors:
Memory Game:
Connect Four:
Space Invaders:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:56) Rock Paper Scissors
⌨️ (0:18:42) Memory Game
⌨️ (1:04:37) Whac-a-mole
⌨️ (1:30:39) Breakout
⌨️ (2:31:10) Frogger
⌨️ (3:40:02) Connect Four
⌨️ (4:08:23) Space Invaders

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

#Learn #JavaScript #Building #Games #Full

learn javascript


47 Replies to “Learn JavaScript by Building 7 Games – Full Course”

  1. Please explain the code more thoroughly. You say this is geared for real beginners, but you only just say out loud what you type in.

  2. As I'm following along with these tutorials I find myself wondering why certain elements or functions are used at certain instances and feel, as others have stated, if Ania could explain the 'why' behind why we're putting a for loop here, or a using this.topRight over there or why certain elements are doing what they're doing it would greatly help. I understand that there is some assumptions going into this that the watchers already have some familiarity with JavaScript, but even as someone that's gone through the entire JS curriculum on FCC's website, I still was struggling here and there to fully follow along and had to rewind and rewatch many moments. I think stating out loud why you're doing what you're doing, even if it's simply a brief refresher can help us newbies out substantially. Regardless though, awesome content and building these projects was a lot of fun and a great way to dive deeper into JavaScript! Thank you Ania and FCC for another great tutorial!

  3. there is an error if the user selects the same card twice solve this problem with add return at the end of the if statement like this

    if(optionOneId === optionTwoId) {

    alert('You are choose the same card');

    card[optionOneId].setAttribute('src', './images/blank.png');

    card[optionTwoId].setAttribute('src', './images/blank.png');

    if (cardChosenIds.length === 3) {

    card[cardChosenIds[2]].setAttribute('src', './images/blank.png'); /* If the user selects one card twice the before this function end he chose another card the `cardChosenIds` will contain three indexes not 2*/


    cardChosen = [];

    cardChosenIds = [];



  4. I would tackle checking for winners by checking 4 ranges from the piece you just played (if you're including diagonals: vertical, horizontal, two diagonals). You would go 3 units out in each direction to obtain your ranges ie: (3 to the left, 3 to the right — since the piece you just played could complete the 4th if placed at the end of a contiguous line) then you would check the range you obtain to see if there are at least 4 contiguous pieces that match the current player that just dropped their piece.

    This would allow for any sized board, as well as any amount of players given that you're only checking for the current player that just dropped their piece.

  5. Hi Queen , one suggestion, whenever u make project videos, it is very good if you give us a demo of all the functionalities u have added to it so that we have clear picture of what are we going to implement. It helps us to understand the way u are thinking while coding. It's good for learning for the noobs like us. Thanks

  6. Thank you Anita. I’ve rarely explored coding for making games but recently had a project and realized how important it is to challenge myself to creating games and how important it is to learn some of those hidden gems in JS and upping my skills.

  7. I'm a beginner but have been practicing and learning to code for 3 months and when I saw this complete video I felt so low as was disappointed by my self as I understood the code and every thing but I was unable to write even few lines without looking at what is next…….if any pros or senior developers here plz help me out.

  8. On the memory game if you click fast enough you can select 3 images and the third card will remain displayed , to solve that setTimeout( checkMatch, 90) on function flipCard()

  9. You are very beautiful and also intelligent. My first time watching your videos and it's very detailed and easy to understand. I'm happy I came across your page. God bless you for all you do.

  10. In the memory game code I can still click on the same card twice and that will trigger the cardsChosen[0] === cardsChosen[1] condition. We do blank the images and reset everything BUUUUT the code still goes through the second if statement inside our checkMatch function. I did a quick fix which is to empty both cardsChosen[0] and cardsChosen[1] upon detecting the user clicked on the same image, like so:

    if (optionOneId == optionTwoId) {
    alert('You have clicked the same image!');
    cardsChosen[0] = [];
    cardsChosen[1] = [];
    cards[optionOneId].setAttribute('src', 'images/blank.png')
    cards[optionTwoId].setAttribute('src', 'images/blank.png')

  11. "Rock, Paper…"
    Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')… I even change it to textContent but not display.

    but when I console.log it is giving the right output so don't why….

  12. I really like your tutorials and this video made me discover your channel but i think you should explain a little bit more like for exemple ''why did we put this here'' and things like that
    Your videos are really good but i think they are more for upper intermediate than for begginers, i will continue to learn and then i will come back to do the rest of the projects because i was lost a little bit

  13. Anna, I notice you use a mac. Do you suggest I invest in a mac instead of keep using a PC? Those three little dots in the upper left part of the screen suggest to me that you are using ann Apple computer.

  14. thank you very much for this!!! so much to learn:)

    I just went through the Memory Game and noticed that clikcing the same card would trigger two alerts (same card and finding a match) – I changed a line 82 from the video (checking a match for chosen cards) to if(cardsChosen[0] == cardsChosen[1] && optionOneId != optionTwoId){.. so it gets blank and does not clear out to white.png.

Leave a Reply