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

ความคิดเห็น • 42

  • @gilbertnasayao4939
    @gilbertnasayao4939 11 วันที่ผ่านมา

    Why is it that always cat pointed the arrow when every spin

    • @codecc9
      @codecc9  11 วันที่ผ่านมา

      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

    • @gilbertnasayao4939
      @gilbertnasayao4939 2 วันที่ผ่านมา

      @@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.. ?

  • @namtrungvo7582
    @namtrungvo7582 6 หลายเดือนก่อน +1

    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?

    • @namtrungvo7582
      @namtrungvo7582 6 หลายเดือนก่อน

      moreover i want to increase the size of the wheel

    • @codecc9
      @codecc9  6 หลายเดือนก่อน

      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

  • @martingutierez-t1k
    @martingutierez-t1k 9 หลายเดือนก่อน +1

    I make a new issue in your github, please help

  • @martingutierez-t1k
    @martingutierez-t1k 9 หลายเดือนก่อน +1

    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?

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      You can change it with css, search ".triangle" Line 34. Change top,down,left,right

    • @martingutierez-t1k
      @martingutierez-t1k 9 หลายเดือนก่อน

      @@codecc9 do we need to change the degree of value in javascript too?

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      @@martingutierez-t1k yes, change winning condition to =

    • @martingutierez-t1k
      @martingutierez-t1k 9 หลายเดือนก่อน

      @@codecc9 if(startDeg%360 = 270 && endDeg % 360 > 0 && endDeg%360 < 90 ){
      this will point at wrong value

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      @@martingutierez-t1k it should be like this:
      if(startDeg%360 = 270 )

  • @r-l-h7p
    @r-l-h7p หลายเดือนก่อน

    is it possible to put in pictures instead of text on each part of the wheel?

    • @codecc9
      @codecc9  หลายเดือนก่อน

      yes, for more detail you can google : how to draw image on js canvas
      const img = document.getElementById("yourImage3");
      ctx.drawImage(img, x, y);

  • @cloudmining8835
    @cloudmining8835 9 หลายเดือนก่อน

    Nice tutorial here, can we stop the spin in amount we want?

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      Yes, try change maxRotation then see if it works

    • @cloudmining8835
      @cloudmining8835 9 หลายเดือนก่อน

      @@codecc9 How to know the value of each items? the cat should 1-20 degree? or something?

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      ​@@cloudmining8835each piece has "startRad" and "endRad" in the for loop. Get the one you want then convert rad to degree

    • @cloudmining8835
      @cloudmining8835 9 หลายเดือนก่อน

      @@codecc9 Can you help me out? Can setting it to stop where the value we want? please make a new tutorial of it

    • @codecc9
      @codecc9  9 หลายเดือนก่อน

      @@cloudmining8835 I push the new code in github link, change itemDegs['cat'] to your favorite animal!

  • @rayane2604
    @rayane2604 3 หลายเดือนก่อน

    is it possible to rig the wheel so that the winner is once out of two "cat"?

    • @codecc9
      @codecc9  3 หลายเดือนก่อน

      something like this ?
      winner = 'cat'
      maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10
      winner = ['cat1','cat2'].randomChoice()
      maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10

    • @rayane2604
      @rayane2604 3 หลายเดือนก่อน

      @@codecc9 I think it should be good ty! But can i have an information where i have to put it pls?

    • @codecc9
      @codecc9  3 หลายเดือนก่อน

      @@rayane2604 replace the part maxrotation = 360...
      Easier : You can paste the code to chatgpt and ask it to code it

  • @riden6487
    @riden6487 2 หลายเดือนก่อน

    how calculate other direction for the winner?

    • @codecc9
      @codecc9  2 หลายเดือนก่อน

      winner = 'cat'
      maxRotation = (360 * 6) - itemDegs[winner].endDeg + 10
      you can change 'cat' to other

    • @codecc9
      @codecc9  2 หลายเดือนก่อน

      use the code on github

    • @riden6487
      @riden6487 2 หลายเดือนก่อน

      @@codecc9 no, i would change deg winner of 90 to 0 degrees

    • @codecc9
      @codecc9  2 หลายเดือนก่อน +1

      @@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"

  • @flyseason2559
    @flyseason2559 6 หลายเดือนก่อน

    I want the wheel to be big and to add sound and acceleration

    • @flyseason2559
      @flyseason2559 6 หลายเดือนก่อน

      If you can do this during the day, contact me

  • @VirancheeKumar
    @VirancheeKumar 7 หลายเดือนก่อน

    bro the winner will be same everytime "cat"

    • @codecc9
      @codecc9  7 หลายเดือนก่อน

      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

    • @VirancheeKumar
      @VirancheeKumar 7 หลายเดือนก่อน

      omd quick reply thanku bdy i want random and its now working correctly@@codecc9

    • @VirancheeKumar
      @VirancheeKumar 7 หลายเดือนก่อน

      @@codecc9 now its work thanku.

  • @RashidChandia786-jc1fl
    @RashidChandia786-jc1fl 3 หลายเดือนก่อน

    can you help about These codes

    • @codecc9
      @codecc9  3 หลายเดือนก่อน

      Hi, Tell me the part you don't understand