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
Thanks everyone in the FreeCodeCamp community for being so awesome! Hope you enjoy the video 😄
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.
What code editor or ide is she using?
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.
baby good lova
That 1 girl who is in the programming class without stumbling there cause she is lost.
beautiful hairstyles 🙂
Had to know javascript among other things for my web technology project in my studies. This course has supported me incredibly well, thank you!
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
thanks madam for these helpful courses. all these 7 games in 5 hours for me is whole week.
this is not beginner friendly
Thankyou so much!!
She is very beautiful 😍
I really like it but maybe some comments in the code to make it easyier to go through
PRETTY LADE MAEK COURSE
THIS IS GUD THING
I LIEK
Great job on this Ciri, I'm sure father Geralt would be proud of you.
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.
why doesnt she use semicolons???
Pretty eyes, cant focus…..
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.
Ania
Thank you very much for this excellent tutorial, it's great for learning and practicing
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
RPS, memory game, whack a mole, breakout, frogger, connect four, space invaders.
"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….
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')
}
Anyone has a clue on how to remove the delay when you press the left and right arrow in the BreakOut game? Thank you!
Which program you are using?
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.
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()
So, let me guess .. your hobbies include skateboarding 🛹, painting 🖼 and reading 📖
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.
I love my teacher!
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.
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
Great demo.. Good teacher…thanks
…
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.
HI mam….. i dont know why but I love you <3 the way you teach make me like you…love from pakistan<3
just a mindblowing awesome content
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;
}
“`
This gave me brain fck , appreciate it
For a whack-a-mole game you can also use template literals in alert() method 🙂 just add result in ${result}
For rock paper scissors, resultDisplay and computerChoiceDisplay will get updated when you click anywhere on the page, not just on the buttons.