How To Code Rock Paper Scissors In JavaScript
Vložit
- čas přidán 27. 08. 2024
- 🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.n...
Use code KYLE for an additional $50
Rock paper scissors is a classic game with a very simple rule set which makes it perfect for a beginner game project. In this video I will show you exactly how I would setup a rock paper scissors game with HTML, CSS, and JavaScript.
📚 Materials/References:
GitHub Code: github.com/Web...
Emoji Copy/Paste Site: getemoji.com
🧠 Concepts Covered:
- How to simplify complex game logic
- How to use CSS grid and flexbox to layout game elements
- How to create an AI to play against
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#WebDevelopment #WDS #JavaScript
I'm doing a course called The Odin Project and I'm here because I'm completely stuck on the Rock, Paper, Scissors project we need to do. Even after watching this video, I still only partially understood what's going on. I feel like I was going alright with that course right up until we started doing DOM manipulation, Event Listeners and Query Selectors, etc., and now I'm feeling very stupid because I'm just not getting it at all.
Same
same here buddy
relateable
I felt the same, kept tinkering for a week and things clicked! Hope you managed to get through your slump!
@Anubhav Barooah let me know if you need help bro. I was able to complete it just now :)
I understood only 30% of it all, but this was still very fascinating to watch! The way how easy and effortlessly it looks! Hope I can get to same level one day!
same
Same
update?
@@marius2000b what you mean update? xD
@@hikari1690 By update I was asking for an update to the situation because he said someday he will be on the same level one day.
you should replace the fist emoji with a picture of Dwayne Johnson
Dang. I wish i had done that now
this is one of the nicest outcomes i've seen, having the selections / choices in an object with the emoji + what it beats kills so many birds with one stone! lovely
Man, you can't imagine how much I love every js tut from yours, I really enjoy coding step by step 'cause I understand and see at the same time what's happening in the browser, thank you so much Kyle.
Video Idea: Mario in JavaScript
I worked step by step with you. You are awesome! I even modified the finished game to make it unique. Thank you so much!!!
You are a genius!
I really like your JavaScript tutorials. With their help I managed to understand many concepts.
Thank you very much!
Goodness gracious. I was stuck on applying if else statements and functions to actual applications, but this is on a whole different level, incorporating CSS, DOM, and doing it in a way that shows you have many, many hundreds, if not thousands of hours of practice. I'll just stick to asking GPT to explain things and then asking it to explain things more simply for the foreseeable future. It was still a good video that gave insight into what is possible with experience. Right now, it's taking me about five times as long as the course length of 12 hours of pausing to understand the content while completing exercises.
I'm new to JS, but I feel that this code is a little bit overengineered, even though I can't exactly say why
Either way, I love your tutorials. I've watched a few dozen within last two weeks and they helped me a lot
You're like Bob Ross but for coding. I decided to switch careers entirely so I can provide better for my family so everything here has been new to me. Your vids have been coming in handy a lot. Especially this one.
My versions is this complex, I could understand half of it. It would be great if you explain the flow of the program at beginning or end. It will help newbies like us.
13:48 my grandpa woke up after that
@Boston Mendonca "9 9 9 9 nein... "
Grandpa: "God damn, krauts" *loads M1 Garand with malicious intent *
I love your videos! I am still learning and I am still a beginner. Sadly, I don't have Git for the Bash terminal yet, but I still love your videos and you make me happy! I can always build new things with code, your channel is awesome! Keep up the good work!
Really smart use of emoticons, no special graphics needed! And I'd seen the code on your GitHub already 😄
Great video as always, you made it seem soo simple and fun.
Daanng i used switch case for my rock, paper, scissors game. This is 200 IQ solution
I know right! This was a wonderful example of how smartly made objects can simplify the code
thank you this was very fun to do and help me with my understanding of javascript
You are amazing. Thank you so much for your videos. I often find myself not understanding anything and then I look up same project on YT and your Vids is always the best. Thanks
I would probably rotate the emojis to make them better rock paper and scissors
Channel Name: Web Dev Simplified.
Rock Paper Scissors: The Most Complicated Way to Do It.
Thanks for the video, really really like this channel, please don't stop.
Any reason why you didn't lay out how you want to structure the code first instead of jumping right into the coding part? Similar to algorithms interviews, in which you are supposed to write pseudo code first before you start writing code.
your code is hella clean. love it!
The Best Js Coder ✔ ..
Thanks for your simple and short tutorials. They are a huge resource for people learning the latest in web dev. Here's my feedback: Take some more pauses or repeat major steps, to allow the brain to process the overall program design. These punctuations in your speedy flow would allow the material to sink in more. Also, start out an outline of your program - ie in pseudocode - to frame the program structure for a quick overview.
Thanks! It is really ease when you teaches)
I took a 6 month boot camp last year and it went so fast I feel like I forgot most of it maybe I'm just bad at this stuff, but I don't want to quit so these videos do help and I was making a rock paper scissors game but had no idea where to start and what to do so thank you for doing this video.
Thanks, Kyle. I really Loved and understood your way of the Rock Paper Scissors game.
Very smart solution using modern JS. Thanks! ✌️✊✋
Thanks, Kyle for your great video and efforts.
I understood almost half of it, so I wonder if it's for ultimate beginners?
The line 26 is pretty confusing. I can't understand how did we extracted name with selection.name. I did understand that we compare it with selectionName, but how can we get it from data-selection?
Thanks for sharing this. I did get stuck on one part but followed through with the build to the end. In the developer, when I go to the console and click on one of the buttons from the page, nothing is appearing in my console, but everything seems to work okay... ?
super easy and clean code love it so muc
Even doing step by step what you show, I get this weird non functioning justify-content. Class result still on the left corner of the page. Any tip around this?
I love you! You helped me so much! Cool choice with objects
I've said it before but I'll say it again. THANKS KYLE!!
Keep up the hard work 🔥
Oh..and congrats on your engagement :)
thanks for the high quality content
This is awesome!
I had no idea you could put emoji's into HTML *and* Javascript directly and have them render like this. Does this work with literally any emoji you copy paste from say stuff like Whatsapp or Discord?
Really entertaining and informative video. Fun showcase on how to make javascript that is both easy to understand and teaches you how to make use of some of the core functions in a fun way.
Thanks for the video and keep up the good work =)
Great Video as always. Please bring Advance Js course.
Good project. A lot of good techniques.
Problem = script.js:45 Uncaught TypeError: Cannot read property 'after' of null.
Please Tell how to Solve ?
Thank you for creating and sharing this video! I had no idea how to start this RPS project until I came across this video.
My code is exactly like yours now, and now I'm wondering how I can add a restart button and have it function after a "Best out of 5" game??
Man you are the best
how to find ho is winner after the player or computer point is 5,10 final result
Great tutorial man!! It's really good tnx.
Great technique. Thanks.
Nice brother ..
Love
you & your videos are so good...!!
You are a hero.
Great tutorial as usual.
I was wondering if it was better or not to create SELECTIONS as an object rather than an array such as:
SELECTIONS = { 'rock' : { emoji: '✊', beats: 'scissors'},
'paper': {emoji: '✋', beats: 'rock'},
'scissors': {emoji: '✌', beats: 'paper'}
}
That way we can access details using map notation: SELECTIONS[selection].
What do you think?
this tutorial is unnecessarily difficult.
i keep getting undefined on the you side of the screen !
If anyone is having trouble on Windows 10 getting the styles or javascript to work. It is NOT your coding. My windows is just not letting me link or use external style/script files on my local machine. They probably consider it too dangerous for security reasons. I recommend the easiest, cheapest way to follow along is to use codepen.io. Once I copied my files there, they started to work perfectly.
Please Build a path finding visualizer project
Awesome! You make javascript easier for us, genius. Greetings from Perú.
It's really web a web simplified video, thank you sir Kyle for share with us your opinions and projects, it is verry helpful
Can you explain how the dataset.collection works
Since the selectionButtons is a const variable, does that mean selectionButton afterward also a variable?
thank for this video
Yo, you should really make a flappy bird game
my emojis dont change in size, why is this?
You need to work on your explanation skills. This video SHOULD NOT be titles as a tutorial, instead more of a Stream Code along to a project you thought of. This video has less than 5% explanation and more than 95% just aimless coding. Also your monotone is unbelievably horrid. Add some personality to your videos.
yo im pretty new but im just getting the aski for the emoji (fist) U+270A and it runs it as that in the web browser (U+270A). using web storm is there someway i can just click the option?
You have a great knowledge about Web development. So I think you should start a udemy course for the same.
Check out his courses website in the description. He already has 1 on React and 1 on CSS!
@@nsharma4981 oh will check it out then
if you dont have devtools can it still work??
my buttons don't work
what app did you use?
I currently learn html css and js but when it come dom i still get lost so much i even stuck on button selection on rock paper sciccor 😂
Somebody can tell me how to print images instead of emojis in results?
I stop and do the pro challenges I COULD do if I was a pro user on codecademy. This was one. My solution was to nest a bunch of if statements. You can learn all the languages you want but you can't fix stupid when it comes to logic.
I guess.. l'm first😍😍😍
iam unable to understand javascript code properly
Hey buddy,
Do you know how to implement --> call api after previous api execution completed in express js with response of previous api, if yes can you give me code as early as possible? Please please please
what if I use atom
Where do I get the emojis?
You can copy and paste them from a site like :
unicode.org/emoji/charts/full-emoji-list.html
Yeah I couldn't keep up either, he goes very fast and this is obviously not for a beginner skill level.
Hey can you create a video - how to create your own face avg animation on webpage 😍😍😍😀, I saw a website that guy added their own face and that face draw automatically on that website ♥️♥️♥️ please help how can we made that type animation.
I created rock-paper-scissors-lizard-spock inspired by this video. Check it out:
rock-paper-scissors-lizard-spock.netlify.app/
Github Repo: github.com/keithmchd48/rock-paper-scissors
you gotta stop calling code alongs "how to code" videos. Teaching is very different with showing.
I challenge you not to use conditionals ??
🤚✌✊
bro youre going way too fast
✊✋✌️
overcomplicated
Awosem
you pidr
im feeeling like an idioot
bad!
bad!