PHPfrance

la communauté d'entraide francophone dédiée au PHP

roue de la chance

5 messages   •   Page 1 sur 1
   Outils de sujet
Avatar du membre
bibou51
Eléphant du PHP | 60 Messages

27 juil. 2019, 17:46

Bonjour,
J'essaie de créer une roue de la chance :
Du genre on appuie sur un bouton et ça fait tourner une roue un ceratin temps et quand la roue s'arrête ça affiche un gain.
Pour l'instant j'ai bien la roue et le bouton mais la roue tourne dés qu'on va sur la page , je solicite donc votre aide pour donner cette fonction de mise en route de la roue au bouton.
Merci d'avance.
Voici le code de la page ;

Code : Tout sélectionner

<?php define('include',NULL); include('core.php'); if (!isset($_SESSION['membre']) || $_SESSION['connect'] != true) { header('Location: /compte/login'); die(); } $nompage = 'Roue De La Chance'; $descpage = 'Roue De La Chance'; include('header.php'); include('sidebar.php'); $message = ''; $sqlinfos = $db->prepare('SELECT euros, credits, pseudo, avatar, clicsjour, bonusptc FROM membres WHERE id = :id'); $sqlinfos->execute(array(':id' => $_SESSION['membre'])); $infos = $sqlinfos->fetch(PDO::FETCH_OBJ); $avatar = ($infos->avatar == '') ? '/theme/images/noavatar.png' : $infos->avatar; echo '<div id="content" class="float_r"><h2 class="center">Roue De La Chance</h2><div class="center"></div><br> <div class="topart center"><h3>Roue De La Chance</h3><div class="sidehead2"><div class="sidehead3"></div></div></div> <div class="padding center"> '.$infos->pseudo.'<br><br> <img id="avatar" src="'.$avatar.'" alt="avatar" style="border-radius:10%;max-width:60px" /> <br><br> <div class="center"><button type="button" class="btn" onclick="location.href=\'/roue-de-la-chance\'">Tentez Votre Chance<br />En faisant Tourner La Roue</button></div><br /> <style> #roue { width: 400px; height: 400px; border-radius: 50%; margin: calc(((204px * 1.4142) - 204px) / 2); background: wheat; background-image: url("/theme/images/roue.png"); border: 2px solid; animation: example 1s linear 0s infinite; } #roue:hover{ animation-play-state: paused; } @keyframes example { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <center><div id="roue"></div></center> </div><br></div><br /><br />'; include('footer.php'); ?>
Mammouth du PHP | 2703 Messages

27 juil. 2019, 17:59

https://codepen.io/anon/pen/QeGmWe
Avatar du membre
Eléphant du PHP | 60 Messages

27 juil. 2019, 18:24

bonjour Or 1 et merci pour la réponse.
c'est bien ce que je cherche a faire mais je ne sais pas ou mettre le code js dans ma page
Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

29 juil. 2019, 15:38

Salutations !

En fait, ta roue tourne dès que tu arrives sur la page parce que dans ton css (la balise style), tu indiques une animation pour celle-ci ("animation: example 1s linear 0s infinite;"). Si tu retires ceci de ta classe css, la roue ne tournera plus toute seule. Le javascript proposé par Or1 te permet alors d'ajouter (ou de retirer) ce style en cliquant sur ton bouton.

Le javascript se met entre balises <script> </script> et peut se placer à peu près n'importe où dans ta page, le plus simple est peut être de le mettre après ta balise <style></style>.
Nota : pour que cela fonctionne, il te faudra utiliser la librairie jquery et ajuster le code pour qu'il contrôle le clique de ton bouton.

Pour autant, cela n'aura pour effet que de faire tourner un élément dans la page. Cela ne permet pas de gérer un ralenti, un arrêt de la rotation et surtout de déterminer sur quel "nombre" ta roue s'est arrêtée. Le plus simple est d'ailleurs de fonctionner à l'envers. C'est à dire de déterminer au départ le nombre sur lequel va s'arrêter la roue (avec un random lorsque l'utilisateur clique sur le bouton), lui faire faire 3-4 tours, puis calculer la rotation nécessaire pour amener celle-ci dans la position du nombre désiré :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...
Avatar du membre
Eléphant du PHP | 60 Messages

02 août 2019, 11:51

Bonjour,
Sinon j'ai aussi cette page avec une roue qui fonctionne quand on appuie sur "spin" et ça affiche bien le gain obtenu.
Par contre je n'arrive pas à extraire ce gain pour ensuite l'insérer dans la base de données.
Comment je peut faire ?
Merci d'avance pour le coup de main.

Code : Tout sélectionner

<?php define('include',NULL); include('core.php'); if (!isset($_SESSION['membre']) || $_SESSION['connect'] != true) { header('Location: /compte/login'); die(); } $nompage = 'Roue De La Chance'; $descpage = 'Roue De La Chance'; include('header.php'); include('sidebar.php'); $message = ''; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wheel of Fortune Bingo</title> <style type="text/css"> text{ font-family:Helvetica, Arial, sans-serif; font-size:20px; pointer-events:none; } #chart{ width:500px; height:500px; top:0; left:0; padding: 80px; } #question{ width:400px; height:500px; top:0; left:520px; } #question h1{ font-size: 20px; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0; margin: 0; top:50%; -webkit-transform:translate(0,-50%); transform:translate(0,-50%); } </style> </head> <body> <?php echo' <div id="content" class="float_r"><h2 class="center">Roue De La Chance</h2><div class="center"></div><br> <div class="topart center"><h3>Roue De La Chance</h3><div class="sidehead2"><div class="sidehead3"></div></div></div> <div class="padding center"> <span style="color:#FFD700">Tentez votre chance en tournant la roue une fois par jour !</span> '.$message.' <center><div id="chart"></div> <div id="question"><h1></h1></div> </center> '; ?> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var padding = {top:20, right:40, bottom:0, left:0}, w = 500 - padding.left - padding.right, h = 500 - padding.top - padding.bottom, r = Math.min(w, h)/2, rotation = 0, oldrotation = 0, picked = 100000, oldpick = [], color = d3.scale.category20();//category20c() //randomNumbers = getRandomNumbers(); //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results var data = [ {"label":"10 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 10 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"20 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 20 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"30 crédits", "value":1, "question":"BRAVO ! Vous gagnez 30 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"40 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 40 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"50 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 50 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"60 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 60 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"70 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 70 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"80 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 80 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"90 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 90 crédits"}, {"label":"PERDU", "value":1, "question":"DESOLE ! Vous avez perdu"}, {"label":"100 Crédits", "value":1, "question":"BRAVO ! Vous gagnez 100 crédits"}, ]; var svg = d3.select('#chart') .append("svg") .data([data]) .attr("width", w + padding.left + padding.right) .attr("height", h + padding.top + padding.bottom); var container = svg.append("g") .attr("class", "chartholder") .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")"); var vis = container .append("g"); var pie = d3.layout.pie().sort(null).value(function(d){return 1;}); // declare an arc generator function var arc = d3.svg.arc().outerRadius(r); // select paths, use arc generator to draw var arcs = vis.selectAll("g.slice") .data(pie) .enter() .append("g") .attr("class", "slice"); arcs.append("path") .attr("fill", function(d, i){ return color(i); }) .attr("d", function (d) { return arc(d); }); // add the text arcs.append("text").attr("transform", function(d){ d.innerRadius = 0; d.outerRadius = r; d.angle = (d.startAngle + d.endAngle)/2; return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")"; }) .attr("text-anchor", "end") .text( function(d, i) { return data[i].label; }); container.on("click", spin); function spin(d){ container.on("click", null); //all slices have been seen, all done console.log("OldPick: " + oldpick.length, "Data length: " + data.length); if(oldpick.length == data.length){ console.log("done"); container.on("click", null); return; } var ps = 360/data.length, pieslice = Math.round(1440/data.length), rng = Math.floor((Math.random() * 1440) + 360); rotation = (Math.round(rng / ps) * ps); picked = Math.round(data.length - (rotation % 360)/ps); picked = picked >= data.length ? (picked % data.length) : picked; if(oldpick.indexOf(picked) !== -1){ d3.select(this).call(spin); return; } else { oldpick.push(picked); } rotation += 90 - Math.round(ps/2); vis.transition() .duration(3000) .attrTween("transform", rotTween) .each("end", function(){ //mark question as seen d3.select(".slice:nth-child(" + (picked + 1) + ") path") .attr("fill", "#111"); //populate question d3.select("#question h1") .text(data[picked].question); oldrotation = rotation; container.on("click", spin); }); } //make arrow svg.append("g") .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")") .append("path") .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z") .style({"fill":"gold"}); //draw spin circle container.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 60) .style({"fill":"gold","cursor":"pointer"}); //spin text container.append("text") .attr("x", 0) .attr("y", 15) .attr("text-anchor", "middle") .text("Lancer") .style({"font-weight":"bold", "font-size":"30px"}); function rotTween(to) { var i = d3.interpolate(oldrotation % 360, rotation); return function(t) { return "rotate(" + i(t) + ")"; }; } function getRandomNumbers(){ var array = new Uint16Array(1000); var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]); if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){ window.crypto.getRandomValues(array); console.log("works"); } else { //no support for crypto, get crappy random numbers for(var i=0; i < 1000; i++){ array[i] = Math.floor(Math.random() * 100000) + 1; } } return array; } </script> </body> </html> <?php echo' </div></div>'; include('footer.php'); ?>
   Répondre
5 messages   •   Page 1 sur 1
   Outils de sujet