Candy Crush in React
Vložit
- čas přidán 16. 07. 2024
- ⭐ Sign up for my Full Stack Developer Course: www.codewithania.com
In this video I show you how to make a game of Candy Crush in React!
00:00 Introduction
01:37 Setting up our project
07:25 Creating our Game Board
24:48 Checking for matches
42:46 Moving Candies down
48:42 Dragging and Dropping in React
01:07:20 Adding Images in React
01:11:43 Adding the score
01:17:25 Checking for blanks
01:19:23 Suggestions for refactoring
01:20:00 Where to go next? Saving High Scores ( • Video )
Final code available here: github.com/kubowania/candy-cr...
Learn how to add Game State in a database: • Video
___
⭐ Use promo code ANIAKUBOW for 3 months free of WebStorm IDE here (I get no commission from this link, but am in a partnership): jb.gg/get_webstorm
⭐ New to code and none of this is making sense? Watch my '12hr+ CZcams Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership): bit.ly/tabnine-top-tool
⭐ You can get a blockchain domain with my affiliate link here: bit.ly/get-a-crypto-domain
⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : www.buymeacoffee.com/aniakubow
⭐ Sign up for weekly coding tips from my newsletter partnership: bit.ly/JS-tips
You can also find me on:
Twitter: / ania_kubow
Instagram: / aniakubow
#codingbootcamp #coding
This is actually something I've been waiting for months. I subscribed when I saw the Candy Crush with Javascript and followed along with the video. I've been waiting for you to show us a neat project with ReactJs, because that's what I've been working with mostly.
You need to know plain js at first to learn react properly.
@@fuXas1000 Not really. But I did code with the Javascript Candy Crush video too, I just meant that I've moved on from JS to ReactJS
That's an amazing project to practice React, I'll definitely try it on my own and then come back to see how you did it.
This is one of the best practices in ReactJs. I definitely try it my own. Keep rocking Ania..I'll support...
yeah
I discovered your channel 2 days ago, but your tutorials are legendary
This looks like a fun project. I subscribed and saved video to come back to during my Christmas break. Keep up the good work Ania!
I have completed the video and code along with you. It's amazing, I will add styling to this project and share it with you over twitter soon. Thanks for the Video, I hope we will see more videos on ReactJS.
Amazing content as always.
Well done Ania :)
Wow! Thank you so much for this :D After following your vanilla Javascript candy crush tutorial, i had a go at making it again in React, but had some errors... this helps so much! :D
CZcams recommended to watch this! and after watching the first few minutes! I did subscribed! Very well explained! Thanks a ton!
i love these tutorials :D already addicted.
I love how you explain everything part by part.. thank you 😊
another lovely Ania's development video with artistic manner. :)
Thank you! That was better than great. Looking forward to more great and helpful content!
Really enjoyed the project. I did add a bit of styling to make the counter look better and put a black background on the board which looks great. I'm going to add a restart so that it can be run again without having to update the site. Thank you.
This is amazing video tutorial on react. I've followed along and have understood every logic you have explained. The explanation are also very simple and clear. I will
Now be more confident to try react. Just realize react can do games , no need to learn ios or android dev haha. You deserve more subscriber!!! Maybe a million !
I watched the same for js. Omg i really wanted one in react. Thanks Ania.
Thank you so much for this project ❤️
Recently I found your channel. Really amazing content!!!
Awesome as always Ania 😀👌
You're a real queen. see you at 300k subs hopefully by the end of the year!
Well done!!! Great video.👍
This is a pretty cool game and tutorial, really awesome 🤩
Love this project ❤️❤️
Ana you are just amazing 💜💜💜 Im on my way to React. Thanks to you :)
Crushed it, Ania!😂
Thank you for this great tutorial!
I love this segment of you videos on coding. Candy crush is a fantasy favorite. Very fine coding.
This was a lot of fun! As a MERN bootcamp grad and recent AAS/CIS grad it was very straightforward and easy to understand. I wouldn't be able to replicate on my own just yet, but I'm close, and I think that first job is right around the corner too, especially as things like this get more and more clear over time 🤞 At least my son thinks I'm a genius coder right now so that's a win anyway.
Hi, I am following this tutorial and got stucked can u help me
I can't switch colours
@@mahrukhsajjad2020 Sorry no. I haven't done anything programming related in over half a year. 10's of thousands of dollars, 500+ applications and years of applying were enough for me. I honestly don't even remember making this comment, but if me now could tell me then what I know now I wouldn't have bothered with it anyway.
I guess I gotta first learn react as a fresh beginner, but I've saved this video so I can revisit in the future and follow along.
Thank you for all your effort in these videos!
Yay! Thanks for watching Ard!
Simply Amazing. This is called the real Code.
Thank you for another wonderful tutorial :)
nice job! thank you for share with us!
Super , I'm Waiting ⏳⏳⏳
You are an amazing developer!!
Ma'am you are doing a great job and motivate us to learn more
Thank you so much Vishal! 🙏
thanks so much, Tr.Ania...I have learned from you a lot...
Thank you so much.. I love this kind of videos
you're one of a kind, thanks for this
Thank you Ania ❤️
Nice tutorial, thanks for sharing!
That was superbb❤👌🏻
Thanks very much for sharing your knoledge, please keep like that!!
Omg, I remember when I followed on your channel it was only 5k subs. Great Job!!
Thank you so much Bohdan!
Thank you Ania 🏆👑 you are the best
Very good - you make it look so easy! Would be nice if you actually complete the full game (essentially covering more topics) - maybe part 2 😊
She already made the second part! 😎👉🏻 czcams.com/video/ARL0NuIQNjY/video.html&ab_channel=CodewithAniaKub%C3%B3w
Thank you so much for your assistance it really means a lot me ... 😄
Thanks for sharing, i've been doing the similar thing in my free time as front end developer, can try with Tetris in React as well :)
wow, this is great, the best way to learn react
As a person trying to change careers and learning as much as I can, I can't tell you enough how useful and amazing your content is. Thank you!
gracias ania!
it was very fun thank you for the knowldge !
Good job very good tutorial. Good explanation and simple
Awesome video, thank you very much
Amazing video thank you
Wonderful 😍❤️
Hi, thank you for the tutorial, it is very helpful
Amazing content.
Nice video! :)
amazing thank you
Nice video Ania Didi !
Unique video!
Can't wait
Love your thumbnails, you are so gorgeus and funny
You are a great explainer
Ania you're a content making machine!
Super kind of you to say Scott!
Nice video 😮
This is great, I love Candy and you are my Crush.
Hi, thanks for this. notValid arrays are not changing in any iteration so they can be outside the loops 🙂
in 39:07 I think that notValid array is incorrect, the correct values should be
6
7
14
15
22
23
30
31
38
39
46
47
54
55
62 => instead of 63
63 => instead of 64
I'm going to continue watching the video, I don't know if this error is corrected during the tutorial, but if you can put a mark can be useful.
Thanks for your videos, they are amazing!
Ania Kubów, how are you? I'm very happy for your video to be released, we wait for you huu
THANKS ANIA , I LOVE YOU 👍🍷💖
Nice tutorial, althought I've spotted one thing.
When You are adding useEffect dependencies in at 32:04, theres quite crucial mistake.
checkFor... methods are defined inside of component, therefore on each rerender new reference is created for every of these methods. Therefore setInterval is always executed once, it triggers rerender, and on next rerender useEffect is called, clearing already defined interval, and setting up new interval.
You don't need the interval at all, since You want to perform a check only when currentColorArrangement reference changes, so thats Your only dependency.
Going further, You could parametrize all checkFor... methods, and define them outside of Your component. This approach doesn't cause confusion about should these methods be added to dependencies array, and it tends to increase readability of Your components.
Good luck with next tutorials!
Hi, many thanks for your suggestion! This is what it’s all about :) This is not a mistake however - maybe more of a dirty fix haha . Using the currentColorArrangement to trigger the useEffect was my original plan. In theory as you say, this should work. However sadly using the currentColorArrangement reference was not enough to make the game function as intended - mainly due to the candies needing to drop continuously.
If you trigger the useEffect every time the currentColorArrangement changes, it will only move down all the candies once (by calling moveIntoSquareBelow once) - when in fact we need this function to be called more times than that. We need it to be called continuously to then in turn change the currentColorArrangement array. I hope that makes sense. Sorry it’s hard to explain over text sometimes.
In addition to this I needed to change the array using setState inside the useEffect - which causes too many re-renders. Hence me using the setInterval to fix the issue, so that I control the rerenders.
If you have any working though solutions though please feel free to make a pull request so others can see :) thanks so much gor the contribution - you rock! 💚 if anyone else has any other solutions then please share too :)
Ania you are awesome!!
You are Joseph! 😄
If I may say this, you're one of the talented women in tech I've seen on CZcams. ❤️👍👍 keep it up, you are an inspiration to others out there.
amazed 😯
Your coding tutorials are as beautiful as you❤️
What i really appreciate, Ania, that this video is live coding. Tell me now if i am mistaken but in other videos for JS topic i noticed that you coded before and then just narrated in the video. Otherwise really great content, keep getting better in what you love the most.
In my early videos yea, but people said they prefer live coding so now i do that (and edit out long pauses etc) :D
@@aniakubow And that is why i will watch it all, Ania :) Great stuff :) All the best :)
Te Amo! saludos desde Chile
Znowu wspaniale Aneczko!
I definately like the programming works and tutorials when it's about making a game. Especially, when a gorgeous woman gives the lectures. So keep going Ania!
Great tutorial! I learned a lot from this. One question - in several places the 'currentColor' array element is alterred directly . It is a state variable and I'm confused on why it's being updated directly instead of using the state setter. It's certainly working but i thought it's against the best practice to change the state variable directly.
TDD and Patterns should focus on your next projects, also templates to manage UI. Nice work !!!
I know we're here to code but your eyes are so captivating 😊, thanks for this though
Grazie!
Hi, great tutorial! I have noticed that the score keeps updating n * row +1 times )when the blank squares are falling.
If the match happens on the 3rd row, the score increases with by 4 times the value of the matching squares , ie value= 3, the updated score will be + 32..
And the app is continuously re-rendered even though there aren't other matching squares.
I tried to use useCallback hook for each function that was called inside the useEffect but that didn't change the outcome. Any ideas how to fix that?
Thanks
Great video. Learned a lot. I have two bugs I'm trying to figure out. Maybe someone can solve them.
#1 Dragging with a touch screen instead of a mouse.
#2 when the game starts or when the screen refreshes due to no legal moves, any matches that occur get added to the score. My game starts with 30 points sometimes.
You stole my ❤️❤️😘
I love webstorm!
Great thank you very much for the video the truth, I hope I can apply it in something greetings
I am a big fan
And Your sincere Student tooo
thanks
Hey, nice video! A simple question, what extension do u use for automatic inferred types like in min 50:00
more react content wohooo ❤️
It's realy cool i like it react JS the best program of projects 😍😊
Rock star status... you are Ania!
Thank you so much 😊😄💃
An alternative way for checking of candies in a row :
const checkForRowOfThree = () => {
let row = 1;
for (let i = 0; i < 62; i++) {
if (row * width - 2 === i) {
continue;
}
if (row * width - 1 === i) {
row++;
continue;
}
const rowOfThree = [i, i + 1, i + 2];
const decidedColor = currentColorArrangement[i];
if (
rowOfThree.every(
(square) => currentColorArrangement[square] === decidedColor
)
) {
rowOfThree.forEach((square) => (currentColorArrangement[square] = ""));
}
}
};
const checkForRowOfFour = () => {
let row = 1;
for (let i = 0; i < 61; i++) {
if (row * width - 3 === i) {
continue;
}
if (row * width - 2 === i) {
continue;
}
if (row * width - 1 === i) {
row++;
continue;
}
const rowOfFour = [i, i + 1, i + 2, i + 3];
const decidedColor = currentColorArrangement[i];
if (
rowOfFour.every(
(square) => currentColorArrangement[square] === decidedColor
)
) {
rowOfFour.forEach((square) => (currentColorArrangement[square] = ""));
}
}
};
You remind me of Angela from App Brewery. Great video dear. ...
Thanks Ania for the good video. If I can allow myself a few pieces of advice:
1. Your constants like width need to be written ALL CAPS. Also, a better name for "width" would have been "TILES_PER_ROW"
2. A coherent CSS naming convention like BEM would have been welcome
3. Instead of magic numbers like 560px or 70px in CSS, some CSS variables would have been better, eg:
::root {
--numberOfTiles: 8;
--tileSideLength: 70
}
.app__game {
--gameSide: calc(var(--numberOfTiles) * var(--tileSideLength) * 1px)
width: var(--gameSide);
length: var(--gameSide);
}
4. It is bad practice to use index as keys
5. I don't see the use of using nested flexboxes.
6. Instead of using the magic number 47, you could have used:
const ROWS_TO_CHECK = 6
const TILES_TO_CHECK = ROWS_TO_CHECK * TILES_PER_ROW - 1
7. Since you have two functions that are very similar (checkColumnsOfThree, checkColumnsOfFour, checkRowOfThree, checkRowOfFour), some refactoring or currying would have been in order
8. For the tiles that you do not want to check, a formula would have been more elegant, along with a better name
const allIndexes = [...Array.from({length: TILES_PER_ROW ** 2})].map((_,i) => i)
const redundantIndexes = allIndexes.filter(index => [0,TILES_PER_ROW-1].includes(index % TILES_PER_ROW-1))
// [6,7,14,15...]
I learned how to write APIs because of your video's.
I tried making a game like this using a 2D array. Now wondering if there would be an advantage to using a 2D array over a single array. A single array for tracking the board wasn't even on my radar when I designed. Seems to simplify the entire app, especially in state management when you want to copy the array and reset.