Great video, learning by practicing is so much better. Even if all you do is copying a few lines of code that you see in each lesson. Much more effective than just taking notes. I know this because I tried everything and the only way I could learn (and retain what I learned) was when I started doing that. Once a friend suggested me a few books with interactive content, that made me practice what I learned at each chapter. Edit: For those asking about the books I mentioned, these are the best ones: "Javascript In Less than 50 Pages" "Head First Javascript Programming" If you are into learning Python, "Smarter Way to Learn Python".
Thanks everyone in the FreeCodeCamp community for being so awesome! Hope you enjoy the video 😄 Instagram: instagram.com/aniakubow RUclips: ruclips.net/user/aniakubow
I've tried so many coding tutorials and understood nothing from them, but you make everything so easy and fun! This is the first time i've genuinely followed along, and I even added my own extra features and UI. Love the way you teach.
Day 3 of following the course. I saw the entire whack a mole section, then I had to do something else. That was great as when I came back I remembered the concepts but not the approach taken. Getting the game to work my own way was very satisfying.
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.
I enjoyed quite a lot building the Space Invaders. It blows my mind how many logic can we have behind animation. :D Love your videos Ania and the way you teach them. Rock on!!
3:44:25 emmet is built into vscode so you can just type div*n to get that many divs at, 3:45:15 instead of manually adding the class you can instead make 42 plain divs then add the other 7 with the class using emmet like so, div#taken*7
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.
I'm only on the breakout section (and it's killing me) but just wanted to say how amazing this course is. I have been learning using Udemy and there are hours of theory and not enough practicing fully functioning code. It was hard for me to grasp the functionality of certain aspects of JS in a practical sense. But this has been so useful in helping me determine what I do understand, what I don't understand, and what I thought I didn't understand but actually do when context is added. It's also really nice to see you code in real time and make mistakes. I used to think I was an idiot for forgetting to actually call my function, or forgetting to declare a variable but it's really encouraging to see that even the experts make these little mistakes.
Just finished my first 'game' using JavaScript. Actually I was following a JavaScript tutorial (the 7+ hour FreeCodeCamp one, here on YT), which had the game blackjack in it. But after dropping the tutorial (for several months) after getting discouraged; I took it back up recently, and decided to take the game much further than the initial tutorial, which only had numbers displayed. I put card images in there, and gave them the illusion of flipping over from back to front when selected. Introduced a dealer so you played against the dealer, and added a whole host of other stuff; different sounds for winning, losing and when you tied with the dealer and a few other scenarios. Also, word prompts on screen for what play options you had next. The process was full of joys, frustrations, headaches and mini victories; but mainly exciting to work on.. but I learned so much, and had several 'punching the air' glory moments when I got parts of the game to work. I say this not to boast, but to encourage any of you who are learning JS to push past the pain so you can get that little 'hit' from the reward of solving a problem. It is REALLY worth it. You'll be so proud of yourself. My code is messy, but I'm figuring out how to clean it up and make it more efficient and readable; but just the fact that it works, makes me feel deep satisfaction. This video is going onto my dev playlist so I can learn these games and flesh them out. This learning process has been so much fun and has happened largely due to FreeCodeCamp's herculean efforts to give away free tutorials. Ever grateful.
In the Memory Game, there's a little bug still when you click on the same image: the alert shows up, the cards' choice gets reset, but you still win a point for a match. One way to solve it is by having the conditional statement itself reset the cardsChoice & Id, AS WELL AS typing "return;" at the end to prevent the checkMatch() function from running further. Hope it helps folks!
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!
i have a strong suspicion that someone else prepares her code for her, and that she knows only basic syntax. every video of hers is just her copy pasting or copy-typing the code from somewhere else, with little explanations, and her whole personality looks fake and scripted. can't follow any of her tutorials because of this.
true, i also found that what would help (as you mention why) is before even explaining the code, explain the logic process. "what is needed and therefore i will need to create this function which will do this so it has to communicate with, which means i need to have this..". having to rewind i guess also helps us connect the dots and learn
videos are desined so as to let you ask this question, and understand that you have to paye the course for having more insights about the stuff discussed in these free incomplete tutorials.
A tip for anyone coding the rock vs papers vs scissors challenge. When she begins to type out the conditions for the winner, you only have write conditions for the player has won, otherwise the computer won. This will reduce the amount of if-statements.
vscode Pro tip to copy the current row and place it under or above the original row: hold shift + alt + arrow down/up no need to select the row then go to the end and press enter AND theeen ctrl + v. bonus: holding alt while pressing arrow down/up will move that row up or down a step.
For the breakout game, I found it was much simpler to make a changeDirectionX and changeDirectionY function for each. On a hit, you just determine which is applicable and call only that function.
I have strange things happening with my breakout game. the coordinates that she gives puts my blocks on the bottom of the grid, so I came up with my own that put them where they should be. I can get it to work, but it doesn't register when it hits the actual blocks, it registers the location they would be if i'd used her coordinates!
Have done this course years ago, amazing it is remake, it will help kids develop their html & css & javascript dynamics, with that stack being well developed limits are low, you can build anything, next step is making requests to API, learn basic architeture and some framework for js.
@@jeklo3713If you master js vanilla like she does in this lesson, you can basically shape the UI in real project like anything you want. Years ago I had clients laughing cause I did almost every insane feature in the UI laughing. Mostly because a feature in a real project is is nothing compared to a game! And other devs said omg you used react, angular!!!? How the hell you done this stuff??? You are using a framework, and actually people dont get it how powerful vanilla js can be, later I used JS for tracking criminals.
@@unkn0wnrge189 so you mean I need to be good at it the people I meet on discord said that if I know a JavaScript fundamentals I should move to react and also they said that I can learn React while learning JavaScript that's wwhat they said 😅
For the breakout game, instead of manually inserting all the block positions, I wrote a simple function that inserts them for you: function initBlocks(a, b) { for (let i = 0; i < 3; i++) { let c = a, d = b - (i * 30); blocks.push(new Block(c, d)) for (let i = 0; i < 4; i++) { c += 110 blocks.push(new Block(c, d)) } } } initBlocks(10, 270)
Yes I very much appreciate her tutorials and I'm somewhat of a beginner so please tell me if I'm wrong but the breakout one seemed to be convoluted and I feel like this works much better for the collision detection: function checkForWallCollisions() { if (ballCurrentPosition[0] + ballDiameter >= boardWidth || ballCurrentPosition[0] = boardHeight) { yDirection *= -1; } else if (ballCurrentPosition[1]
If anyone is having problem with the memory game when clicking on the same image twice makes you "match", just change the if(cardsChosen[0] == cardsChosen[1]) to a 'else if' instead of an 'if'
A nice shortcut for all using VS Code. Type in your blank html document ! followed by TAB creats the standard html layout. So you don't need to write it yourself
Thanks to the FreeCodeCamp because of your tutorials and some practise I can finally say proudly I am a developer thanks guys you are the one who teaches for free not even a single penny ! You deserve subs and likes I will try my best to share these awesome tutorials with my friends and mates ☺
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
2:12:00 it's better to make two separate methods to check for vertical and horizontal collision, then pass it as an argument to "changeDirection" method. In change direction method, there's no need to do all the ifs. You can just use xDirection = -xDirection
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
Ditto! I knew some basics, but am definitely still a beginner and even the first game was too fast and lost me quite quickly - I would love a version of this video where you explain in more detail the 'why' on absolutely everything so I could really learn while doing but there is still a too much assumed prior knowledge in this one for me
Same! Seems like most of the coding beyond HTML and CSS is just everyone saying "put this here, add this, put this there" and there's never really any good explanation of why you're doing what you're doing. I felt like this was just a lesson in speed typing trying to keep up with what she was doing. If asked to duplicate this on my own, I would be able to create a js file and that's about it.
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.
For the Whac-A-Mole game, for the following code section: squares.forEach(square => { square.addEventListener('mousedown' () => { if (square.id == hitPosition) { result++ score.textContent = result hitPosition = null } }) }) I'm getting an 'Uncaught SyntaxError:
You need to add a "," after the 'mousedown' event. square.addEventListener('mousedown', () => { etc etc. Took me a bit to figure out why I was getting that error too because the video showed it was working without the comma, but it didn't look right to me in the code. It shows the correct syntax later in the video.
@@christopher-leesantos794 by any chance did you have a problem where result kept increasing by clicking anywhere! for some reason it keeps memory of every square it hit before, and it reaches a point where any click on any square increases the result anyway
squares.forEach(square => { square.addEventListener('mousedown' () => { if (square.id == hitPosition) { result++ score.textContent = result hitPosition = null } }) }) I getting a ton of errors in this and I don't know why.
Hi, i think you forgot a comma right after 'mousedown'. The code should run like this: squares.forEach(square => { square.addEventListener('mousedown', () => { if (square.id == hitPosition) { result++ score.textContent = result hitPosition = null } }) })
it is so hard to follow or trouble shoot code when you cut screens as you cut and copy something. The constant jumping around to put a line here, a line there, without showing the code in its entirety is a really scattered approach. Is it not possible to show the completed code fully at any time? I get that you dont want copy/paste code but its having to rewatch the video over and over to find a 3 second clip, is extremely defeating. I am writing code as she jumps from the top to the bottom constantly, and I have no idea where she just jumped to!! this just reiterates to me how confusing code camp education really is. Ive made leaps and bounds with other sites over fcc, while fcc is constantly confusing in its assignments, this video proves it continues. I honestly didnt relize it was an fcc video. However, I am not surprised.
Stumbled on this video after doing some basic html, css and javascript courses and i was looking for more challenges. I like these projects. So far i've built them but i always try to understand the logic and then built it myself. For example i've used a counter in the Memory game project while checking the conditions. I did like the idea of pushing the clicks inside an array... this is a usefull technique wich i will implement in other projects! Thanks you for this usefull video!
Nice video! However, I would like to mention that the trick used to randomly shuffle the array for the memory game in 29:25 is really a kind of "dirty shortcut". For small arrays and small games like this, it's probably perfectly fine, but for more serious applications and larger arrays, this method is not sufficient, as the probabilities and distribution are very biased.
if you don't mind, for us still trying to learn, can you explain that further or drop a link. thank you... i thought shuffling it was a good way to go about it
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') }
@@jeklo3713 I think we are all a bit like that haha, I just trying to learn a bit from different parts of Javascript, I don't want to go in 20 languages. but different parts for example as I liked this game thing I start with canvas, with looks amazing for gaming. just enjoy the time coding and continue!!!
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.
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()
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.
The problem with these types of courses is that they are more of a workshop, you hardly learn anything, you just follow instructions without foundation
Thats because your supposed to go into it with already some knowledge of javascript. Then you do these project tutorials, already having an idea of what shes doing, and you further memorize the syntax and logic which is the whole point.
what a great idea! full stack dev so dont really have use for this but i do wish i started with something like this, games a great way to deeply understand logic and data manipulation. much more valuable than learning outdated classic dom manipulation.
Great video, learning by practicing is so much better. Even if all you do is copying a few lines of code that you see in each lesson. Much more effective than just taking notes.
I know this because I tried everything and the only way I could learn (and retain what I learned) was when I started doing that.
Once a friend suggested me a few books with interactive content, that made me practice what I learned at each chapter.
Edit: For those asking about the books I mentioned, these are the best ones:
"Javascript In Less than 50 Pages"
"Head First Javascript Programming"
If you are into learning Python, "Smarter Way to Learn Python".
onclick="fun()" it works but in addeventlis it does not work whyy ??
Indeed. Doing is what makes you learn. Passively taking notes won't get you very far.
Great job on this Ciri, I'm sure father Geralt would be proud of you.
This deserves so many likes lmfaooaoaoao
don't know bout that but she's pretty much targaryen for sure
Ahahhaahahha Geralt be tossing coins though.
😂😂😂😂
I'm grandfather Geralt. Indeed, I'm proud of it.
Thanks everyone in the FreeCodeCamp community for being so awesome! Hope you enjoy the video 😄
Instagram: instagram.com/aniakubow
RUclips: ruclips.net/user/aniakubow
You are a great teacher!
@@d4tset785 She is not a teacher she is mother of dragons
You are doing great job 👍 can u provide all the resources for web development i mean road map
Thanks for your free quality content 😍👏🏻
Thank you Ania! I learned a lot from your video tutorials
I've tried so many coding tutorials and understood nothing from them, but you make everything so easy and fun! This is the first time i've genuinely followed along, and I even added my own extra features and UI. Love the way you teach.
Day 2 of following this course. I have made 2 games in 2 days, I have never been this productive!!
You don't made 2 games in 2 days you copy code of 2 games in 2 days this is different things
@@KiraYoshikage555 sorry shaktimaan
@@KiraYoshikage555 how is your progress this year
Using this tutorial, when breakout was done i was able to make my own flappy bird. So it is not just following along, it is super helpful. TY Ania
How'd you make infinite blocks
@@piersStreet I'm guessing it's by using a Math.random for a random height and putting that past the end of a user's screen at intervals.
for those who's struggling with the Whac-a-mole, there should be a comma between 'mousedown' and the ( ) on line 21 1:24:38
THANK YOU
Thank you so much
Thank you.
lol. if you can't figure this out, you'r NOT a programmer. you're a regurgitator.
@@420troll4 Stop discouraging people just because you have no faith in your abilities. Goof.
Day 3 of following the course. I saw the entire whack a mole section, then I had to do something else. That was great as when I came back I remembered the concepts but not the approach taken. Getting the game to work my own way was very satisfying.
Bro its begginer friendly this tutorial ??
@@gabrielcarmnn let me tell you. go watch the basic to javascript first then this will be more easy to understand
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.
What did you learn I am just curios
Ania, Anna - Ann not Anita :D
I enjoyed quite a lot building the Space Invaders. It blows my mind how many logic can we have behind animation. :D Love your videos Ania and the way you teach them. Rock on!!
Thank you very much Miss, you are my superwoman for my learning journey to get a programming job
3:44:25 emmet is built into vscode so you can just type div*n to get that many divs at, 3:45:15 instead of manually adding the class you can instead make 42 plain divs then add the other 7 with the class using emmet like so, div#taken*7
its div.taken*7
not div#taken*7 (# is for id)
@@aleksandromilenkov3615 oh yes sorry
Thank you for the tip!
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.
Thanks for sharing such videos, it's always great to see how to build multiple things
I'm only on the breakout section (and it's killing me) but just wanted to say how amazing this course is. I have been learning using Udemy and there are hours of theory and not enough practicing fully functioning code. It was hard for me to grasp the functionality of certain aspects of JS in a practical sense. But this has been so useful in helping me determine what I do understand, what I don't understand, and what I thought I didn't understand but actually do when context is added.
It's also really nice to see you code in real time and make mistakes. I used to think I was an idiot for forgetting to actually call my function, or forgetting to declare a variable but it's really encouraging to see that even the experts make these little mistakes.
Can you share that course with me?
I'm only on the breakout section (and it's killing me)
......I get it
Just finished my first 'game' using JavaScript.
Actually I was following a JavaScript tutorial (the 7+ hour FreeCodeCamp one, here on YT), which had the game blackjack in it. But after dropping the tutorial (for several months) after getting discouraged; I took it back up recently, and decided to take the game much further than the initial tutorial, which only had numbers displayed. I put card images in there, and gave them the illusion of flipping over from back to front when selected. Introduced a dealer so you played against the dealer, and added a whole host of other stuff; different sounds for winning, losing and when you tied with the dealer and a few other scenarios. Also, word prompts on screen for what play options you had next.
The process was full of joys, frustrations, headaches and mini victories; but mainly exciting to work on.. but I learned so much, and had several 'punching the air' glory moments when I got parts of the game to work. I say this not to boast, but to encourage any of you who are learning JS to push past the pain so you can get that little 'hit' from the reward of solving a problem. It is REALLY worth it. You'll be so proud of yourself. My code is messy, but I'm figuring out how to clean it up and make it more efficient and readable; but just the fact that it works, makes me feel deep satisfaction.
This video is going onto my dev playlist so I can learn these games and flesh them out. This learning process has been so much fun and has happened largely due to FreeCodeCamp's herculean efforts to give away free tutorials. Ever grateful.
In the Memory Game, there's a little bug still when you click on the same image: the alert shows up, the cards' choice gets reset, but you still win a point for a match. One way to solve it is by having the conditional statement itself reset the cardsChoice & Id, AS WELL AS typing "return;" at the end to prevent the checkMatch() function from running further.
Hope it helps folks!
I solved that bug by making the "found a match" an ...) else if (... so the computer wouldn't read it once it went through the first "if".
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!
Same issue I'm facing here.. lol.
i have a strong suspicion that someone else prepares her code for her, and that she knows only basic syntax. every video of hers is just her copy pasting or copy-typing the code from somewhere else, with little explanations, and her whole personality looks fake and scripted. can't follow any of her tutorials because of this.
@@briggskvngzyt7305 yeah, me too
true, i also found that what would help (as you mention why) is before even explaining the code, explain the logic process. "what is needed and therefore i will need to create this function which will do this so it has to communicate with, which means i need to have this..". having to rewind i guess also helps us connect the dots and learn
Awesome! Can't wait to get cracking on this one. Love these tutorials
Ignore the bot reply. Report it.
You explain everything so beautifully! Thank you so much for this amazing tutorial! Lots of love
Thank you, Ania for your help with studying JS 💖💖💖
The explanation is so clear and precise. Thank you freeCodeCamp and Ania for the providing this course.
Are we watching the same video?
I know right
Such incredible value as always. Thanks Ania and Freecodecamp!
It would be nice if you gave more of a explanation for whats happening with the code.
videos are desined so as to let you ask this question, and understand that you have to paye the course for having more insights about the stuff discussed in these free incomplete tutorials.
You are truly an amazing teacher. Love n respect for you. Stay blessed. ❣️
Love 😏
A tip for anyone coding the rock vs papers vs scissors challenge.
When she begins to type out the conditions for the winner, you only have write conditions for the player has won, otherwise the computer won.
This will reduce the amount of if-statements.
why didn't she just do ceil instead of floor and that plus 1?
not only that but she could write an array with rps , and the random will return what is in that index
@@whyrulikedis8248 With "floor", the computer never chooses '"paper". You have to use "ceil" to get that result.
you also have to add an if statement forr a draw
Here is my solution, less lines of code more easy:
const computerChoice = document.getElementById('computer-choice');
const userChoice = document.getElementById('user-choice');
const result = document.getElementById('result');
const rock = document.getElementById('rock');
const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const arr = ["Rock", "Paper", "Scissor"];
rock.addEventListener('click', function(){
userChoice.innerHTML = ' Rock';
let randomChoice = arr[Math.floor(Math.random() * 3)];
computerChoice.innerHTML = randomChoice;
if (computerChoice.innerHTML === 'Paper'){
result.innerHTML = " Computer Win";
} else if (computerChoice.innerHTML === 'Scissor') {
result.innerHTML = " User Win";
} else {
result.innerHTML = " Draw";
}
});
paper.addEventListener('click', function(){
userChoice.innerHTML = ' Paper';
let randomChoice = arr[Math.floor(Math.random() * 3)];
computerChoice.innerHTML = randomChoice;
if (computerChoice.innerHTML === 'Rock'){
result.innerHTML = " User Win";
} else if (computerChoice.innerHTML === 'Scissor') {
result.innerHTML = " Computer Win";
} else {
result.innerHTML = " Draw";
}
});
scissor.addEventListener('click', function(){
userChoice.innerHTML = ' Scissor';
let randomChoice = arr[Math.floor(Math.random() * 3)];
computerChoice.innerHTML = randomChoice;
if (computerChoice.innerHTML === 'Paper'){
result.innerHTML = " User Win";
} else if (computerChoice.innerHTML === 'Rock') {
result.innerHTML = " Computer Win";
} else {
result.innerHTML = " Draw";
}
});
Thanks a gazillion for helping learning JS for game dev :)
vscode Pro tip to copy the current row and place it under or above the original row:
hold shift + alt + arrow down/up
no need to select the row then go to the end and press enter AND theeen ctrl + v.
bonus: holding alt while pressing arrow down/up will move that row up or down a step.
For the breakout game, I found it was much simpler to make a changeDirectionX and changeDirectionY function for each. On a hit, you just determine which is applicable and call only that function.
I have strange things happening with my breakout game. the coordinates that she gives puts my blocks on the bottom of the grid, so I came up with my own that put them where they should be. I can get it to work, but it doesn't register when it hits the actual blocks, it registers the location they would be if i'd used her coordinates!
Have done this course years ago, amazing it is remake, it will help kids develop their html & css & javascript dynamics, with that stack being well developed limits are low, you can build anything, next step is making requests to API, learn basic architeture and some framework for js.
not just kids - i'm 64 and having a blast :-)
Do you think after this course you can learn react
I know JavaScript fundamentals but I still lucking of how to use them in project 🤣 that's why I watched this course
@@jeklo3713If you master js vanilla like she does in this lesson, you can basically shape the UI in real project like anything you want. Years ago I had clients laughing cause I did almost every insane feature in the UI laughing. Mostly because a feature in a real project is is nothing compared to a game! And other devs said omg you used react, angular!!!? How the hell you done this stuff??? You are using a framework, and actually people dont get it how powerful vanilla js can be, later I used JS for tracking criminals.
@@unkn0wnrge189 so you mean I need to be good at it the people I meet on discord said that if I know a JavaScript fundamentals I should move to react and also they said that I can learn React while learning JavaScript that's wwhat they said 😅
For the breakout game, instead of manually inserting all the block positions, I wrote a simple function that inserts them for you:
function initBlocks(a, b) {
for (let i = 0; i < 3; i++) {
let c = a, d = b - (i * 30);
blocks.push(new Block(c, d))
for (let i = 0; i < 4; i++) {
c += 110
blocks.push(new Block(c, d))
}
}
}
initBlocks(10, 270)
very simple yes very simple
Yes I very much appreciate her tutorials and I'm somewhat of a beginner so please tell me if I'm wrong but the breakout one seemed to be convoluted and I feel like this works much better for the collision detection:
function checkForWallCollisions() {
if (ballCurrentPosition[0] + ballDiameter >= boardWidth || ballCurrentPosition[0] = boardHeight) {
yDirection *= -1;
} else if (ballCurrentPosition[1]
@@civilroman Yep that is similar to what I did, nice job.
Do you think after this course you can learn reac.js?
If anyone is having problem with the memory game when clicking on the same image twice makes you "match", just change the if(cardsChosen[0] == cardsChosen[1]) to a 'else if' instead of an 'if'
A nice shortcut for all using VS Code. Type in your blank html document ! followed by TAB creats the standard html layout. So you don't need to write it yourself
thank you!
Thanks to the FreeCodeCamp because of your tutorials and some practise I can finally say proudly I am a developer thanks guys you are the one who teaches for free not even a single penny ! You deserve subs and likes I will try my best to share these awesome tutorials with my friends and mates ☺
❤️
@@shivani9840 fresher , yes I made some
@@aniakubow thnx mam
@@Smokie880 How long did it take u to master js or are u still learning on the go
@@ashutoshtiwary9605 he's not really a developer he works at walmart still only commentating to get his video recognize.
Had to know javascript among other things for my web technology project in my studies. This course has supported me incredibly well, thank you!
Thank you, Mrs Kubów, to teaching us some very helpfull technicals skills. I m happy to follow your sessions :)
I have watched a few project videos on RUclips. Yours are quite beginner-friendly and so easy to follow. Thank you.
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
Queen? Tf bro
She is the mother of dragons bro. 😂
@@kapilbillore452 don't ever simp bro.
"Queen" 😬😬😬
Just what I needed right now, thankyou very much!!
I really enjoyed this course, worth watching and I really learning something new from it. The way of her teaching is super cute.
2:12:00 it's better to make two separate methods to check for vertical and horizontal collision, then pass it as an argument to "changeDirection" method. In change direction method, there's no need to do all the ifs. You can just use xDirection = -xDirection
i did the same thing
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
Ditto! I knew some basics, but am definitely still a beginner and even the first game was too fast and lost me quite quickly - I would love a version of this video where you explain in more detail the 'why' on absolutely everything so I could really learn while doing but there is still a too much assumed prior knowledge in this one for me
Same! Seems like most of the coding beyond HTML and CSS is just everyone saying "put this here, add this, put this there" and there's never really any good explanation of why you're doing what you're doing. I felt like this was just a lesson in speed typing trying to keep up with what she was doing. If asked to duplicate this on my own, I would be able to create a js file and that's about it.
All of her videos are not for beginners at all.. even for myself that I am in an intermediate level is hard to follow...
on Breakout, I was able to use a 'mousemove' event listener to control the game with my mouse instead of arrow keys!
I was thinking about to do that same thing. So cool! :)
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.
bruh you dont learn how to code in a week. but the point still stands. games are a great way to learn
The best course to learn Javascript ... Why? Ania❤
this is awesome thx FCC!
You are an absolute champ, I learnt more in a few hours with this video that with an entire year of JS courses
New here looking forward to starting my coding journey, won't be giving up my day job anytime soon
Thank you very much ania your explanation was very clear and easily understandable
For the Whac-A-Mole game, for the following code section:
squares.forEach(square => {
square.addEventListener('mousedown' () => {
if (square.id == hitPosition) {
result++
score.textContent = result
hitPosition = null
}
})
})
I'm getting an 'Uncaught SyntaxError:
You need to add a "," after the 'mousedown' event.
square.addEventListener('mousedown', () => { etc etc.
Took me a bit to figure out why I was getting that error too because the video showed it was working without the comma, but it didn't look right to me in the code. It shows the correct syntax later in the video.
@@christopher-leesantos794 by any chance did you have a problem where result kept increasing by clicking anywhere! for some reason it keeps memory of every square it hit before, and it reaches a point where any click on any square increases the result anyway
@@memmudmemmed3022 I think you have to check where you declared your hitposition ID. It may either be in the wrong place or not correctly defined.
@@christopher-leesantos794 Thanks for the fix!!
thanks to this tutorial I was able to build a hotline miami clone from scratch
squares.forEach(square => {
square.addEventListener('mousedown' () => {
if (square.id == hitPosition) {
result++
score.textContent = result
hitPosition = null
}
})
})
I getting a ton of errors in this and I don't know why.
Hi, i think you forgot a comma right after 'mousedown'. The code should run like this:
squares.forEach(square => {
square.addEventListener('mousedown', () => {
if (square.id == hitPosition) {
result++
score.textContent = result
hitPosition = null
}
})
})
Thank you so much!!!!
Lovely simple for me as a beginner. And such a lovely teacher
it is so hard to follow or trouble shoot code when you cut screens as you cut and copy something. The constant jumping around to put a line here, a line there, without showing the code in its entirety is a really scattered approach. Is it not possible to show the completed code fully at any time? I get that you dont want copy/paste code but its having to rewatch the video over and over to find a 3 second clip, is extremely defeating. I am writing code as she jumps from the top to the bottom constantly, and I have no idea where she just jumped to!! this just reiterates to me how confusing code camp education really is. Ive made leaps and bounds with other sites over fcc, while fcc is constantly confusing in its assignments, this video proves it continues. I honestly didnt relize it was an fcc video. However, I am not surprised.
Stumbled on this video after doing some basic html, css and javascript courses and i was looking for more challenges. I like these projects. So far i've built them but i always try to understand the logic and then built it myself. For example i've used a counter in the Memory game project while checking the conditions. I did like the idea of pushing the clicks inside an array... this is a usefull technique wich i will implement in other projects! Thanks you for this usefull video!
Nice video!
However, I would like to mention that the trick used to randomly shuffle the array for the memory game in 29:25 is really a kind of "dirty shortcut". For small arrays and small games like this, it's probably perfectly fine, but for more serious applications and larger arrays, this method is not sufficient, as the probabilities and distribution are very biased.
if you don't mind, for us still trying to learn, can you explain that further or drop a link. thank you... i thought shuffling it was a good way to go about it
could you maybe explain that further, cuz I'm trying to learn code and I would like to know the 'why'
big fan of yours Ania, love your other game related videos. Keep up the good work!
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')
}
This was a truly Amazing Tutorial, Thank You!
Gorgeous. 🧡 Makes me want to learn JavaScript.
love the creeps coming out
@@TheStickofWar Says the creepiest avatar EVER. 🤣👍 #punctuationmatters
well am here, might as well learn it
Amazing! after all the tutorials on the web, this with real example step by step is the best help possible!!!
can I watched this 😆 I finished my JavaScript course I understand the fundamentals of it but I don't know what kind of project I should do
I think it's good to watch this right 😆
@@jeklo3713 I think we are all a bit like that haha, I just trying to learn a bit from different parts of Javascript, I don't want to go in 20 languages. but different parts for example as I liked this game thing I start with canvas, with looks amazing for gaming. just enjoy the time coding and continue!!!
@@jeklo3713 yes! and tryto modify it, not only copy it!! :D
@@rubenruben3808 did you try the 30 days vanilla javascript
Projects to start adding to my portofolio 🙂
Yes!!! Hope you can share :)
Thanks so much Ania, for the great tutorial.
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.
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()
Add if (cardsChosen.length < 3) before setAttribute
I feel soo inspiring when I see female programmers and SE as well as IT lecturers🥺❤❤❤
Thank you for uploading this video, I am very much a complete beginner even so I managed to understand some of it! You are a great teacher Thank you
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.
Thank you Ania !! you are awesome 👑✨🏆😎 your explanation is very clear and helpful
The problem with these types of courses is that they are more of a workshop, you hardly learn anything, you just follow instructions without foundation
what would you reccomend?
@@cicada3312 Yeah like, how the hell else you supposed to do it? Death by PowerPoint?
This types of courses are not ment to build foundations. These are more of practice types. They expect you to have foundation in JS.
Thats because your supposed to go into it with already some knowledge of javascript. Then you do these project tutorials, already having an idea of what shes doing, and you further memorize the syntax and logic which is the whole point.
For the Rock paper scissors, I keep getting 'undefined' for my Computer Choice but I'm pretty sure I have everything written the same as her....
I really don't know how to say thank you to freecodecamp and to you. This is really what I need, a learning by application program
Completed, the course was amazing
Don't preface the video by saying it's beginner friendly when it's clearly not. You're literally not explaining anything you're doing.
She did say you need the fundamentals
You are awesome!! thank you very much!
I want to get in touch with her ?
investments with portfolio expert like, alice marcella assure you that in few months your account will be more than you dream.
best feeling is knowing you're going to make a gain today and tomorrow, and you're 100% sure,alice marcella, you're a Genius
Great skills and knowledge about the market. I enjoy full profits and easy withdrawal with no complains, trade with the best.
spam scam lmao
Thank you Ania ,your explanation is very clear.
At 18:30 it would be helpful to know the verbose method as well as the best practice as learning the right way is the best way
excellent course - many thanks, Ania, for sharing your knowledge
this is so helpful learning by doing. Thanks a lot Ania❤
Completed 3 games and now building the 4th One.😍😍
very nicely paced for a beginner ! Thankyou
✨👏🏾🥺 just in time!! Thank you for this awesome video!!!
Very nice! At last, I can fallow your JavaScript tutorial in this summer holidays :) 💥
Thank you Ania! I will start after work 👨🚀
🙌🙌🙌
@@aniakubow wow your actual channel
Love the way you express things ❤️
successfully implemented Rock, Paper and Scissors. Its really easy and cool (y)
Nice job. Easy to understand. Thanks.
59:05 you need to use if (optiononeId==optionTwoId){} followed by else if() & not if again.
Just love her eys and teaching as well :)
Thank you very much for your tutorial. I have learnt many diffrent and new things. Regards!!!
For all the Big Bang Theory fans, we need a game of Rock-Paper-Scissors-Lizard-Spock. Thanks for this excellent video.
Thank you! Can't wait to do this one!
The comma that wasn't there in Whac-a-mole drove me insane for about 10 minutes. Loved it ! Thanks.
Direct from Brazil. Congratulations on the channel. Very didactic.
Thank you so much! I did go along and finished all the lessons.
And what did you learn?
i just finished the video and thanks a lot for your effort this really helped me a lot
SO FAR SO AWESOME!! I've learend a lot... this is my first approach coming from Python
A more concise generateComnputerChoice code could be:
const randomNumber = Math.floor(Math.random() * 3)
computerChoice = ['Rock', 'Paper', 'Scissors'][randomNumber];
what a great idea! full stack dev so dont really have use for this but i do wish i started with something like this, games a great way to deeply understand logic and data manipulation. much more valuable than learning outdated classic dom manipulation.