Vanilla Javascript - Wheel Of Fortune mini game
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- #javascript #css #programming #code
Part 2 here, new for 2021! : • Vanilla Javascript - W...
In this video I show how to create a rotating wheel of fortune with a little JS and CSS. Less is more!
Code:
github.com/wei...
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀
Check out my premium courses at www.weibenfalk...
-
Find me somewhere below:
Linkedin: / thomas-weibenfalk-7635...
Twitter: / weibenfalk
Github: github.com/wei...
FreeCodeCamp: www.freecodeca...
Dev.to: dev.to/weibenfalk
you are a great teacher, your enthusiasm makes the tutorial interesting! awesome job
Thanks! Highly appreciate that comment.
Loved it! Please more typescript! please please
you did explained it in a well known manner, this is one of the best content on youtube thankyou so much for providing this content to the community!!
Beautiful!! Thank you 🙂
Coding Journey thank you for your support!
@@Weibenfalk I really interested. Can you teach me the code for show the result of spin wheel? Let say the result in text box. I will add the code. Thank you for your kind, sir. :)
In the UK we call it a ladybird. Cool project!
Aha! Thank you! Great to know =)
Could you make a tutorial that is related to this one, explaining how to read the outcome on the wheel? The wheel is an image, with different "outcomes" such as the frog, the snowman, the koala etc. How to code a function that captures the outcome (once the wheel stopped spinning)? Let's say, the koala pays SEK 500,000. But how can we tell JavaScript that the wheel stopped at the koala?
Hey and thanks. You can calculate this by the amount of degrees the wheel Han spun. When it stops you know the degrees and each section on the wheel is a certain amount of degrees.
@@Weibenfalk Tackar! Jag skall försöka det! :-)
I will add this in my today's project
Wonderful .. thank you! =)
Thanks a lot
Thanks for your support.
đi lạc gặp idol , e đang tìm làm vòng quay -:D
Hey great video🙌💥.....can you make us another video on how to display the results (icons) on where the pointer stops?..
I've struggled to make one
Riktigt bra tutorial!
Tack. Det glädjer mig att höra! =)
Nice tutorial, thanks! Instead of using the image you used, i used one of a roulette with 37 colors: 18 red, 18 black and 1 green. My question is: for example if it goes red, I will know, but the site will not, because it is just an image. how can i tell to the site what color came out?
Thanks! You have to use Javascript and do some calculations for that ... There's many approaches you can choose from to achieve what you want. If you know the rotation on the wheel when it stops and you also know the degrees intervals on your image where the colors appear you can calculate it from that. But it requires more work than in this video. =)
@@Weibenfalk can you be a little more specific?
Coolie woolie WOWIE boi its coool
Thank you, !!
Very cool 👍🏼
Hey! that is a nice video and you have done a great job. I just want to know how to find in javascript at which icon the wheel is stopped?
i mean suppose i have created wheel using html and and i have given a unique id to each icon. How will i find out at which position the wheel is stopped.
Hey, thanks. Glad you enjoyed it. It all depends on how you've structured your html/code. If you know the rotation of the div that you rotate and also know the position of all the icons you can calculate it that way. So if you're starting from 0 degrees rotation and then place the icons around the axis you know the degrees that the icons will "cover" ... Hard to explain in a comment like this but hope you understand what I'm getting it. =) Haven't tried it out myself but I think that's a way that will work.
thank you for this great video!!! I'm trying to improve this wheel putting an alert at the end of the transition with a random message of success. Do you think I can recall it inside the function in wheel.addeventListener(transitioned)?
great code, sir. Can we pick the result & the code?
It requires some more code to pick the result also. In this case I did it just visually like a real “analog” wheel :)
this is really cool, thanks :)
is there a way to slow down how quickly the wheel spins?
Thanks! =) Yes, you can modify the CSS properties for that as the animation is made with only CSS. Play around with the values and you can see how it changes =)
@@Weibenfalk ah yes. thanks again :)
@@Weibenfalk me again :) could you please tell me if theres a way to add a pop-up for when you land on one of the segments?
@@siennakei6128 There's always a way to do anything. =) That would require some Javascript. There's an event listener that's called onTransitionEnd in Javascript. Would require a little bit of thinking but it should be possible with that one: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend
@@Weibenfalk amazing :) ty
Hello, Thomas! Thanks for your videos! Like them all! By the way, which license is your code under (particular this one, Wheel of Fortune)? How free may anyone use it?
Thanks .. appreciate the support! Use whatever you want of my own code ... I don't care =)
@@Weibenfalk , thank you! 👍
@@Weibenfalk , thank you! 👍
You just save me!
Hello, can I ask a question? I have to want to know what the result is. Thank you.
Well. This was meant to be visual. That is to display on the screen ... if you want to type out and calculate the result you would want to calculate depending on the degrees rotated and give the different values an interval between different degree angels for example
Swedish accent for the win! :-)
Thanks! Yeah ... it's pretty cool ;)
and how to get name of picture in innerHTML or input value? when spinning finished
You can calculate that by assigning different degree intervals to the different sections and then check against what degree the wheel have when it stops
@@Weibenfalk good but i have not coding idea please make a video? i am just copy paste coder.
I could make it transform rotation, but next click, The button could not get event 'click'. I had to reload by "F5" to rotate again.
So, what dit I get wrong? Plz guide me that prob. Thanks a lot!
Hard to tell by just this info. I suggest you check the finished code from the Github repo and compare to yours. =)
Thanks,
I wonder how to calculate the finished position after ending wheel transition then show the result.
Sorry Im a newbie.
so i want to get the value ..... any logic ?🤔
Got a part two for that on my channel if you search for it
Hi there can i know if you have a similar wheel of fortune code that is more catered for python?
Hey ... I don't work with Python unfortunately =/
is it possible to control which prize will be most drawn?
Everything is possible with code ;) But that would be cheating!
@@Weibenfalk no cheating, just control!
ty
Hey is it possible to add events to this code? For exemple if it lands on a specific it’ll redirect us to a random website
Yes. You have to calculate this based on the rotation of the wheel. Every section on the wheel has a range of rotated degrees. So you can create for example a switch or an if statement that does different things depending on what range it stops in.
I would calculate the angle each pic takes in the wheel, based on the number of pics on your wheel/360°, then knowing the value of deg defined in the code you can calculate the offset of the pic you landed on (number 1, or 2 or 3, etc ...) and according to this number then trigger whatever code you want .
@@angladephil That's a great way of doing it.
can you add pop up box after wheel stop running
Hey .. you can listen for the event transitionend with JS and activate a pop up when the css transition ends.
@@Weibenfalk help me, im newbie🙄
@@hafizynadzli54 Would love to but I'm in the middle of a lot of stuff now so can't do it now I'm afraid. Google for onTransitionEnd and try to understand how it works. It's a big part of being a coder; To look things up and learn new stuff. =) So ... see it as a fun challenge for yourself and do some trial and error =) That's the best tip I can give right now.
what is the software name
like program software name
Not sure I understand but if you mean the code editor it's Visual Studio Code
Hey bro can you make it from using boostrap
Hi! In my opinion : we have here very basic CSS, why the hell use a huge CSS library for this ?
can you make this on wix?
Never used wix
Any one know how to this in android app pls help ❤️ ?
why are you screaming?