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: https://www.youtube.com/aniakubow

💻 GitHub Links:
Rock Paper Scissors: https://github.com/kubowania/rock-paper-scissors-x3
Memory Game: https://github.com/kubowania/memory-game
Whac-a-mole: https://github.com/kubowania/whac-a-mole
Breakout: https://github.com/kubowania/breakout
Frogger: https://github.com/kubowania/Frogger
Connect Four: https://github.com/kubowania/connect-four
Space Invaders: https://github.com/kubowania/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: https://www.freecodecamp.org

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

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

source

This Post Has 42 Comments

  1. Thanks everyone in the FreeCodeCamp community for being so awesome! Hope you enjoy the video 😄

  2. John Richards

    Simple games are honestly the best way to learn to code. I learned when I bought Flash back in the day and discovered actionscript. I went out and bought a book that taught me how to code a few simple games, it clicked, and I learned to code in about a week.

  3. Lance

    Ok Ania seems good but I felt sometimes lost because you are not commenting on your code as well you were making such a long file that I was completely lost but in the end, it a really good lesson and we also want to you made us a kind of prototype of your programs in that like blueprints, to be honest, will be helpful as I told you I was lost by the end thank you so much for your great lessons.

  4. Mark zabelis

    That 1 girl who is in the programming class without stumbling there cause she is lost.

  5. Dominik Grothe

    Had to know javascript among other things for my web technology project in my studies. This course has supported me incredibly well, thank you!

  6. amgde G

    in the second game I used a forEach method (which automatically passes in the index number and the item) .
    ok now
    and set
    card.index = index ( index is passed from the original cardArray )
    card.item = item ( same for the item )

    when adding the flipCard() "click" function
    when doing * console.log( this.item + this.index ) *
    it surprisingly know what are these and console.log them correctly

    HOW and WHY is that possible

  7. Looker Lucky

    thanks madam for these helpful courses. all these 7 games in 5 hours for me is whole week.

  8. Addy Schroeders

    I really like it but maybe some comments in the code to make it easyier to go through

  9. Praff Sphr

    PRETTY LADE MAEK COURSE

    THIS IS GUD THING

    I LIEK

  10. Velin

    Great job on this Ciri, I'm sure father Geralt would be proud of you.

  11. Piotr Mic

    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.

  12. William Thompson

    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.

  13. eduardo besquin

    Ania
    Thank you very much for this excellent tutorial, it's great for learning and practicing

  14. Young Wolf

    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

  15. Haqua

    RPS, memory game, whack a mole, breakout, frogger, connect four, space invaders.

  16. "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….

  17. Cris M

    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')
    }

  18. Maqam Rast

    Anyone has a clue on how to remove the delay when you press the left and right arrow in the BreakOut game? Thank you!

  19. 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.

  20. 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()

  21. Gary Chike

    So, let me guess .. your hobbies include skateboarding 🛹, painting 🖼 and reading 📖

  22. harish bodhu

    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.

  23. Tech Taley

    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.

  24. Kapil Billore

    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

  25. CTSSTC

    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.

  26. HI mam….. i dont know why but I love you <3 the way you teach make me like you…love from pakistan<3

  27. king joo

    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 = [];

    return;

    }
    “`

  28. Caege

    This gave me brain fck , appreciate it

  29. Mr Rough

    For a whack-a-mole game you can also use template literals in alert() method 🙂 just add result in ${result}

  30. eddydude100

    For rock paper scissors, resultDisplay and computerChoiceDisplay will get updated when you click anywhere on the page, not just on the buttons.

Leave a Reply