Ik heb een script, maar is in javascript. Nu wil ik dat als leden bijvoorbeeld 10 miljoen geld winnen dat het word geupdate via dit script. Alleen de normale query kan ik hier niet gebruiken. Weet iemand hoe ik dit moet doen. Heb geen links nodig naar externe websites met hoe javascript werkt, want ben al de hele dag aan het googlen en kom nergens wijs uit.
Code:<tr> <td class='inhoud'><span href="#" onClick="startSpin();" id="spin_button"><input type="button" value="Draai aan het rad!"></span></td> </tr> </table> </td> <td class='container' style="vertical-align: top" width="55%"> <div class="wheel"> <canvas id="canvas" width="434" height="434"> <p style="color: white;" align="center">Sorry, your browser doesn't support canvas. Please try another.</p> </canvas> </div> </td> </tr> </table> <script> // Create new wheel object specifying the parameters at creation time. let theWheel = new Winwheel({ 'numSegments' : 6, // Specify number of segments. 'outerRadius' : 212, // Set outer radius so wheel fits inside the background. 'textFontSize' : 18, // Set font size as desired. 'textDirection' : 'reversed', 'textAlignment' : 'outer', // Align text to outside of wheel. 'segments' : // Define segments including colour and text. [ // font size and test colour overridden on backrupt segments. {'fillStyle' : '#f7ff15', 'prize' : '0', 'text' : '25 Eerpunten'}, {'fillStyle' : '#f56d23', 'prize' : '1', 'text' : '10 Credits'}, {'fillStyle' : '#D0138C', 'prize' : '2', 'text' : '250 Hoeren'}, {'fillStyle' : '#67D574', 'prize' : '3', 'text' : '$10.000.000'}, {'fillStyle' : '#000000', 'prize' : '4', 'text' : 'Geen Prijs', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'}, {'fillStyle' : '#42a6c6', 'prize' : '3', 'text' : '2 Kluiscredits'} ], 'animation' : // Specify the animation to use. { 'type' : 'spinToStop', 'duration' : 10, // Duration in seconds. 10 'spins' : 3, // Default number of complete spins. 3 'callbackFinished' : alertPrize, // 'callbackSound' : playSound, // Function to call when the tick sound is to be triggered. //'soundTrigger' : 'pin' // Specify pins are to trigger the sound, the other option is 'segment'. }, //'pins' : // Turn pins on. //{ //'number' : 24, //'fillStyle' : 'silver', //'outerRadius': 4, // } }); // Loads the tick audio sound in to an audio object. let audio = new Audio('tick.mp3'); // This function is called when the sound is to be played. function playSound() { // Stop and rewind the sound if it already happens to be playing. audio.pause(); audio.currentTime = 0; // Play the sound. audio.play(); } // Vars used by the code in this page to do power controls. let wheelPower = 0; let wheelSpinning = false; // ------------------------------------------------------- // Function to handle the onClick on the power buttons. // ------------------------------------------------------- function powerSelected(powerLevel) { // Ensure that power can't be changed while wheel is spinning. if (wheelSpinning == false) { // Reset all to grey incase this is not the first time the user has selected the power. document.getElementById('pw1').className = ""; document.getElementById('pw2').className = ""; document.getElementById('pw3').className = ""; // Now light up all cells below-and-including the one selected by changing the class. if (powerLevel >= 1) { document.getElementById('pw1').className = "pw1"; } if (powerLevel >= 2) { document.getElementById('pw2').className = "pw2"; } if (powerLevel >= 3) { document.getElementById('pw3').className = "pw3"; } // Set wheelPower var used when spin button is clicked. wheelPower = powerLevel; // Light up the spin button by changing it's source image and adding a clickable class to it. document.getElementById('spin_button').src = "spin_on.png"; document.getElementById('spin_button').className = "clickable"; } } // ------------------------------------------------------- // Click handler for spin button. // ------------------------------------------------------- function startSpin() { // Ensure that spinning can't be clicked again while already running. if (wheelSpinning == false) { // Based on the power level selected adjust the number of spins for the wheel, the more times is has // to rotate with the duration of the animation the quicker the wheel spins. if (wheelPower == 1) { theWheel.animation.spins = 3; } else if (wheelPower == 2) { theWheel.animation.spins = 6; } else if (wheelPower == 3) { theWheel.animation.spins = 10; } // Disable the spin button so can't click again while wheel is spinning. document.getElementById('spin_button').src = "spin_off.png"; document.getElementById('spin_button').className = ""; // Begin the spin animation by calling startAnimation on the wheel object. theWheel.startAnimation(); // Set to true so that power can't be changed and spin button re-enabled during // the current animation. The user will have to reset before spinning again. wheelSpinning = true; } } // ------------------------------------------------------- // Function for reset button. // ------------------------------------------------------- function resetWheel() { theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function. theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees. theWheel.draw(); // Call draw to render changes to the wheel. document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators. document.getElementById('pw2').className = ""; document.getElementById('pw3').className = ""; wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again. } // ------------------------------------------------------- // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters. // ------------------------------------------------------- function alertPrize(indicatedSegment) { // Just alert to the user what happened. // In a real project probably want to do something more interesting than this with the result. if (indicatedSegment.text == 'Geen Prijs') { alert('Helaas! Je hebt niks gewonnen!'); } else if (indicatedSegment.text == '2 Kluiscredits') { alert('Gefeliciteerd! Je hebt 2 Kluiscredits gewonnen!'); } else if (indicatedSegment.text == '25 Eerpunten') { alert('Gefeliciteerd! Je hebt 25 Eerpunten gewonnen!'); } else if (indicatedSegment.text == '10 Credits') { alert('Gefeliciteerd! Je hebt 10 Credits gewonnen!'); } else if (indicatedSegment.text == '250 Hoeren') { alert('Gefeliciteerd! Je hebt 250 Hoeren gewonnen!'); } else if (indicatedSegment.text == '$10,000,000') { alert('Gefeliciteerd! Je hebt $10,000,000 gewonnen!'); } else if (indicatedSegment.text == '1 Kluiscredit') { alert('Gefeliciteerd! Je hebt 1 Kluiscredit gewonnen!'); } else if (indicatedSegment.text == '50 Eerpunten') { alert('Gefeliciteerd! Je hebt 50 Eerpunten gewonnen!'); } else if (indicatedSegment.text == '20 Credits') { alert('Gefeliciteerd! Je hebt 20 Credits gewonnen!'); } else if (indicatedSegment.text == '500 Hoeren') { alert('Gefeliciteerd! Je hebt 500 Hoeren gewonnen!'); } else if (indicatedSegment.text == '$25,000,000') { alert('Gefeliciteerd! Je hebt $25,000,000 gewonnen!'); } else { alert("You have won " + indicatedSegment.text); } } </script> </body> </html>
- Javascript
-
21-05-2023, 15:09 #1Particulier
- Berichten
- 20
- Lid sinds
- 5 Jaar
Javascript
-
22-05-2023, 00:06 #2
- Berichten
- 519
- Lid sinds
- 15 Jaar
Re: Javascript
Had het niet andersom gemoeten? Server side bepalen wat de speler gewonnen heeft, dan een call maken naar de backend zodat de prijs wordt bijgeschreven en dan de prijs client side animeren? Want het lijkt me dat je het spelletje nu wel heel gemakkelijk kunt beďnvloeden. En je kunt nu de call naar de backend niet maken omdat de prijs client side wordt bepaald.
-
22-05-2023, 08:53 #3Particulier
- Berichten
- 20
- Lid sinds
- 5 Jaar
Re: Javascript
Ik ben niet zo goed in javascript, dus ik heb echt geen idee.
-
22-05-2023, 10:29 #4
- Berichten
- 146
- Lid sinds
- 9 Jaar
Re: Javascript
Het is wel mogelijk om vanuit de browser javascript naar een database te schrijven:
Can JavaScript connect with MySQL? - Stack Overflow
Maar... omdat het script client-side in de browser draait, kan de gebruiker hem zelf aanpassen en runnen. Ik zou dus vrij makkelijk kunnen zorgen dat ik de prijs krijg die ik wil. Server side bepalen en dan client side alleen animeren zoals Dennis aangeeft is een betere oplossing.
-
22-05-2023, 10:36 #5
- Berichten
- 1.274
- Lid sinds
- 16 Jaar
Re: Javascript
Staat het allemaal niet uitgelegd op orginele website? dougtesting.net
-
22-05-2023, 11:35 #6Particulier
- Berichten
- 175
- Lid sinds
- 4 Jaar
Re: Javascript
Je zou in de callback functie een request kunnen doen naar de server met de prijs die gewonnen is, en dit server-side dan wegschrijven in de database.
Wel absoluut niet aangeraden: alles zou in broncode staan en bezoekers zouden de request kunnen aanpassen of meermaals kunnen uitvoeren met een gekozen prijs. Best is idd om server-side een prijs te kiezen, dit door te sturen naar de browser en de animatie te doen en ervoor te zorgen dat het wiel op de gekozen prijs stopt. Op deze pagina staat uitgelegd hoe je het wiel laat stoppen op een vooraf gekozen prijs.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic