Spin the Wheel Game | HTML,CSS,Javascript tutorial
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- easeOutSine function: easings.net/#e...
canvas draw arc: developer.mozi...
source code: github.com/nvm...
Leave a comment if you have any question.
"Purrple Cat - Lullaby" is under a Creative Commons (CC BY-SA 3.0) license
Music promoted by BreakingCopyright: bit.ly/b-lullaby
Why is it that always cat pointed the arrow when every spin
you use the code from github?
Plz change the key 'cat' to other key you want the spin to stop.
If you want it random, follow the code in the video
@@codecc9 okay i will follow your code in your video, can you give me some code to have a confiti in a winner that pointed out the arrow and the pointed name will be remove after pointed the arrow. how to code like that.. ?
can we add sound for this one and time. More over after the spin finished, how can we show which is the arrow spin to?
moreover i want to increase the size of the wheel
how can we show which is the arrow spin to?
-> you mean the winner? plz check winner value, after the wheel stop, you can still use it
can we add sound ?
-> yes, plz try it yourself first.I'm busy now, You can pay me to do it for you, contact me : mao.nguyen.8.8.8.8@gmail.com
increase the size of the wheel
-> try change the css, width height of the canvas
I make a new issue in your github, please help
Hello, I have question. Can we change the arrow to top of the wheel? right now it in right. If yes which code to change?
You can change it with css, search ".triangle" Line 34. Change top,down,left,right
@@codecc9 do we need to change the degree of value in javascript too?
@@martingutierez-t1k yes, change winning condition to =
@@codecc9 if(startDeg%360 = 270 && endDeg % 360 > 0 && endDeg%360 < 90 ){
this will point at wrong value
@@martingutierez-t1k it should be like this:
if(startDeg%360 = 270 )
is it possible to put in pictures instead of text on each part of the wheel?
yes, for more detail you can google : how to draw image on js canvas
const img = document.getElementById("yourImage3");
ctx.drawImage(img, x, y);
Nice tutorial here, can we stop the spin in amount we want?
Yes, try change maxRotation then see if it works
@@codecc9 How to know the value of each items? the cat should 1-20 degree? or something?
@@cloudmining8835each piece has "startRad" and "endRad" in the for loop. Get the one you want then convert rad to degree
@@codecc9 Can you help me out? Can setting it to stop where the value we want? please make a new tutorial of it
@@cloudmining8835 I push the new code in github link, change itemDegs['cat'] to your favorite animal!
is it possible to rig the wheel so that the winner is once out of two "cat"?
something like this ?
winner = 'cat'
maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10
winner = ['cat1','cat2'].randomChoice()
maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10
@@codecc9 I think it should be good ty! But can i have an information where i have to put it pls?
@@rayane2604 replace the part maxrotation = 360...
Easier : You can paste the code to chatgpt and ask it to code it
how calculate other direction for the winner?
winner = 'cat'
maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10
you can change 'cat' to other
use the code on github
@@codecc9 no, i would change deg winner of 90 to 0 degrees
@@riden6487 the arrow right now is at 0 degree
if you change it to 90 then winning condition would be something like this "startDeg < 90 < endDeg"
I want the wheel to be big and to add sound and acceleration
If you can do this during the day, contact me
bro the winner will be same everytime "cat"
Plz change the key 'cat' to other key you want the spin to stop.
If you want it random, follow the code in the video
omd quick reply thanku bdy i want random and its now working correctly@@codecc9
@@codecc9 now its work thanku.
can you help about These codes
Hi, Tell me the part you don't understand