Ruletka

0

Witam,

Chciałbym zrobić ruletkę (w kształcie Koła), od liczby 1 do liczby 30. I w PHP mam napisany kod który generuje liczbę i nadpisuje plik numer.txt. W kodzie js, bym tę liczbę zapodał do zmiennej "numer"
var numer = <?php include("numer.txt"); ?> ;

I teraz mając liczbę która ma się "wylosować", chce żeby przy grafice ruletki, ruletka obróciła się i na właśnie tę liczbe w zmiennej numer, wskazała jako wylosowaną.

3

A czy masz już cokolwiek zrobione? Jakiś układ tej ruletki? Bo samo wstawienie numerka wybranego do kodu przez PHP to jakieś pół procenta z całości - trochę mało :P

1

https://github.com/jptweb/php-roulette-script 30 sekund z wujkiem google. nie bawilem sie w to ;) ale podejrzewam, ze potrzeba obracac jakims wskaznikiem po grafice o zadany kat ;). Ale najpierw bym obadal tego GitHuba

0
<script>
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200",
               "#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200",
               "#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E"];
  var restaraunts = ["1", "2", "3", "4",
                     "5", "6", "7", "8",
                     "9", "10", "11", "12",
                     "13", "14", "15", "16",
                     "17", "18", "19", "20",
                     "21", "22", "23", "24",
                     "25", "26", "27", "28",
                     "29", "30"];
 
  var startAngle = 0;
  var arc = Math.PI / 15;
  var losujTimeout = null;
 
  var losujArcStart = 10;
  var losujTime = 0;
  var losujTimeTotal = 0;
 
  var ctx;
 
  function draw() {
    drawRouletteWheel();
  }
 
  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 200;
      var textRadius = 160;
      var insideRadius = 125;
 
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,500,500);
 
 
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
 
      ctx.font = 'bold 12px sans-serif';
 
      for(var i = 0; i < 30; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = colors[i];
 
        ctx.beginPath();
        ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
        ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
 
        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = restaraunts[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      }
 
      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }
 
  function losuj() {
    losujAngleStart = Math.random() * 10 + 10;
    losujTime = 0;
    losujTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }
 
  function rotateWheel() {
    losujTime += 30;
    if(losujTime >= losujTimeTotal) {
      stopRotateWheel();
      return;
    }
    var losujAngle = losujAngleStart - easeOut(losujTime, 0, losujAngleStart, losujTimeTotal);
    startAngle += (losujAngle * Math.PI / 180);
    drawRouletteWheel();
    losujTimeout = setTimeout('rotateWheel()', 30);
  }
 
  function stopRotateWheel() {
    clearTimeout(losujTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = restaraunts[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
    ctx.restore();
  }
 
  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }
 
  draw();
</script>
<input type="button" value="losuj" onclick="losuj();" style="float: left;" />
<canvas id="wheelcanvas" width="500" height="500"></canvas>

No taki kod tego posiadam i Nwm co z tym zrobić żeby było tak jak opisałem na początku .

1

A czy możesz wrzucić to na http://jsfiddle.net i podesłać link? Łatwiej będzie gadać mając działającą wersję przed oczami.

1

Ok, a tak szczerze - czy rozumiesz, jak ten kod działa?

Czy wiesz, co robi funkcja losuj oraz za co odpowiadają zmienne losujAngleStart oraz losujTimeTotal?

Mam nadzieję, że uda mi się Ciebie naprowadzić na rozwiązanie ;)

0

No Math.random() – zwraca liczbę pseudolosową z zakresu od 0 do 1, więc w tych dwóch Start i Total jest generowana liczba 0 lub 1 i potem mnożone jest jak dalej itd. Nazwa funkcji losuj wskazuje na losowanie, a że to są losowane liczby, to raczej tu zachodzi proces losowania. Ale dokładnie później do czego są stosowane te zmienne losujAngleStart oraz losujTimeTotal, to nie jestem pewien, ale podejrzewam, ze to odpowiada za wylosowana liczbe

0

Zmieniłem sobie wartości tychże dwóch zmiennych

IosujAngleStart służy jako szybkość obracania się koła
zamiast tego

losujAngleStart = Math.random() * 10 + 10;  

dałem to

losujAngleStart = Math.random() * 10 + 100; 

losujTimeTotal służy jako długość obracania się koła.
zamiast tego

losujTimeTotal = Math.random() * 3 + 4 * 1000; 

dałem to

losujTimeTotal = Math.random() * 3 + 4 * 3000; ```
0

I co dały te zmiany, które wprowadziłeś?

0

No zmieniły tylko szybkość i długość obracania się koła

1

Zgadza się. A czy wiesz, za co one dokładnie odpowiadają?

Podpowiedź - wpisz sobie tam, zamiast tych random coś na sztywno - np. losujAngleStart = 90; losujTimeTotal = 340;.
Następnie w jsfiddle wciśnij przycisk RUN w lewym górnym rogu, a potem znajdujący się koło ruletki "losuj". Wypadnie jakiś numer. Następnie znowu "Run" i "losuj". Zrób tak kilka razy i powiedz, co zauważyłeś :)

EDIT
poprawiona wersja (tylko w zakresie edycji wizualnej) jest tutaj - https://jsfiddle.net/me5bg93y/

0

No ciągle wypada jedna liczba 23

1

Dokładnie :D

Skoro manipulując wartością przypisaną do tych dwóch zmiennych jesteśmy w stanie określić, jaki numer wypadnie, to teraz zastanów się, jakie wartości należy wpisać, aby uzyskać oczekiwany wynik. Właściwie jak to rozkminisz to będziesz miał zadanie rozwiązane :)

0

Hmmm, bardzo dziękuję, za pomoc, w sumie chyba nigdy bym na to nie wpadł :). Dziękuję

0

Ale jest jeden problem zmieniłem te wartości na 90 i 341 i teraz za każdym razem i tak mam inny numer

1

a czy wciskasz po każdym losowaniu "RUN" na górze po lewej? Bo ustawiając te dane określasz to, co wypadnie jako pierwsze. Potem zresztą wyniki są powtarzalne. https://jsfiddle.net/me5bg93y/ - po odpaleniu tego, u mnie za każdym razem wychodzą te same wartości: 5, 18, 30, 12

0

No ja to testuje tez na własnym serwerze, bo to tam głównie będzie, i tam zawsze właśnie wyskakuje inny numer

0

A w sumie teraz zauważyłem ze po każdym odświeżeniu strony w stylu Ctrl+R po kliknięciu losuj jest to samo. Tylko po kolei jak wciskam losuj bez odświeżenia mam inny. W przypadku 23 nawet nie musiałem odświeżać strony i tak mi wyskakiwało 23.

1

No właśnie o to chodzi :D
Po każdym odświeżeniu jest to samo - w przypadku jsfiddle odświeża się przez wciśnięcie "Run", w przypadku "zwykłej" strony mamy F5.
Ustalając jak dobrać wartość tych zmiennych, będziesz miał odpowiedź, co zrobić, żeby za pierwszym razem wypadła wartość, jaką chcesz uzyskać. Później już będą wypadać inne. To jest chyba to rozwiązanie, jakie chciałeś uzyskać, prawda?

0

Na początku myślałem o innym, ale to jest o wiele lepsze. Bo potem nie musze porównywać czy następna liczba jest taka sama jak wcześniejsza i jeżeli jest dawać inną, żeby nie wyszło ze jest ustawione. I bardzo dziękuję, ale to bardzo :)

1

To jeszcze jedna uwaga na koniec, skoro się obawiasz, żeby nie wydało się, że losowanie jest ustawione.
Wartość losujTimeTotal daj tak z 2000. Im ona jest większa, tym dłużej będzie się koło kręcić. Jak dasz mało, to koło szybko się zatrzyma, co może wyglądać podejrzanie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1