Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX][PHP]Koło Fortuny
Forum PHP.pl > Forum > Przedszkole
kamilos809
Witajcie,
Temat myślę, że typowo przedszkolny. Otóż trafiłem na skrypt koła fortuny, kod wstawiony, więc myślę, że autor oddał go do użytku każdemu.
No mniejsza. Wygląda on tak:
  1. <script>
  2. var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
  3. "#2E2C75", "#673A7E", "#CC0071", "#F80120",
  4. "#F35B20", "#FB9A00", "#FFCC00", "#FEF200",
  5. "#B8D430", "#3AB745", "#029990", "#3501CB",
  6. "#2E2C75", "#673A7E", "#CC0071", "#F80120",
  7. "#F35B20", "#FB9A00", "#FFCC00", "#FEF200",
  8. "#B8D430", "#3AB745", "#029990", "#3501CB",
  9. "#2E2C75", "#673A7E"];
  10. var restaraunts = ["1", "2", "3", "4",
  11. "5", "6", "7", "8",
  12. "9", "10", "11", "12",
  13. "13", "14", "15", "16",
  14. "17", "18", "19", "20",
  15. "21", "22", "23", "24",
  16. "25", "26", "27", "28",
  17. "29", "30"];
  18.  
  19. var startAngle = 0;
  20. var arc = Math.PI / 15;
  21. var losujTimeout = null;
  22.  
  23. var losujArcStart = 10;
  24. var losujTime = 0;
  25. var losujTimeTotal = 0;
  26.  
  27. var ctx;
  28.  
  29. function draw() {
  30. drawRouletteWheel();
  31. }
  32.  
  33. function drawRouletteWheel() {
  34. var canvas = document.getElementById("wheelcanvas");
  35. if (canvas.getContext) {
  36. var outsideRadius = 200;
  37. var textRadius = 160;
  38. var insideRadius = 125;
  39.  
  40. ctx = canvas.getContext("2d");
  41. ctx.clearRect(0,0,500,500);
  42.  
  43.  
  44. ctx.strokeStyle = "black";
  45. ctx.lineWidth = 2;
  46.  
  47. ctx.font = 'bold 12px sans-serif';
  48.  
  49. for(var i = 0; i < 30; i++) {
  50. var angle = startAngle + i * arc;
  51. ctx.fillStyle = colors[i];
  52.  
  53. ctx.beginPath();
  54. ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
  55. ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
  56. ctx.stroke();
  57. ctx.fill();
  58.  
  59. ctx.save();
  60. ctx.shadowOffsetX = -1;
  61. ctx.shadowOffsetY = -1;
  62. ctx.shadowBlur = 0;
  63. ctx.shadowColor = "rgb(220,220,220)";
  64. ctx.fillStyle = "black";
  65. ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
  66. ctx.rotate(angle + arc / 2 + Math.PI / 2);
  67. var text = restaraunts[i];
  68. ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
  69. ctx.restore();
  70. }
  71.  
  72. //Arrow
  73. ctx.fillStyle = "black";
  74. ctx.beginPath();
  75. ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
  76. ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
  77. ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
  78. ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
  79. ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
  80. ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
  81. ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
  82. ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
  83. ctx.fill();
  84. }
  85. }
  86.  
  87. function losuj() {
  88. losujAngleStart = Math.random() * 10 + 10;
  89. losujTime = 0;
  90. losujTimeTotal = Math.random() * 3 + 4 * 1000;
  91. rotateWheel();
  92. }
  93.  
  94. function rotateWheel() {
  95. losujTime += 30;
  96. if(losujTime >= losujTimeTotal) {
  97. stopRotateWheel();
  98. return;
  99. }
  100. var losujAngle = losujAngleStart - easeOut(losujTime, 0, losujAngleStart, losujTimeTotal);
  101. startAngle += (losujAngle * Math.PI / 180);
  102. drawRouletteWheel();
  103. losujTimeout = setTimeout('rotateWheel()', 30);
  104. }
  105.  
  106. function stopRotateWheel() {
  107. clearTimeout(losujTimeout);
  108. var degrees = startAngle * 180 / Math.PI + 90;
  109. var arcd = arc * 180 / Math.PI;
  110. var index = Math.floor((360 - degrees % 360) / arcd);
  111. ctx.save();
  112. ctx.font = 'bold 30px sans-serif';
  113. var text = restaraunts[index]
  114. ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  115. ctx.restore();
  116. }
  117.  
  118. function easeOut(t, b, c, d) {
  119. var ts = (t/=d)*t;
  120. var tc = ts*t;
  121. return b+c*(tc + -3*ts + 3*t);
  122. }
  123.  
  124. draw();
  125. </script>
  126. <input type="button" value="losuj" onclick="losuj();" style="float: left;" />
  127. <canvas id="wheelcanvas" width="500" height="500"></canvas>


I teraz moje pytanie:
Mógłby ktoś wytłumaczyć mi jak ściągnąć wynik wylosowany z tego koła do PHP? żebym mógł na jego podstawie zrobić resztę?
Kshyhoo
Cycki też są autora skryptu?
kamilos809
Haha, nie smile.gif
Po prostu wpisałem byle co, żeby z ciekawości sprawdzić, czy wyświetli mi na kole coś innego niż liczby i czy nie zaburzy to działania
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.