Emanuele Feronato
Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.
Create a wheel of fortune for your HTML5 games with Phaser in only a few lines
When you want to reward your players with some random gift, a wheel of fortune is what you need. In one of the games in am currently playing, Down The Mountain, there is a fortune wheel spinning every six hours which can make you win prizes. Here it is, using the same graphics, hope Umbrella Games guys won’t mind: Click anywhere to spin the wheel, and have a look at the prize. And here is the full commented source code, just a few lines of code thanks to tweens and easing.
// the game itself var game; // the spinning wheel var wheel; // can the wheel spin? var canSpin; // slices (prizes) placed in the wheel var slices = 8; // prize names, starting from 12 o'clock going clockwise var slicePrizes = ["A KEY. ", "50 STARS", "500 STARS", "BAD LUCK. ", "200 STARS", "100 STARS", "150 STARS", "BAD LUCK. "]; // the prize you are about to win var prize; // text field where to show the prize var prizeText; window.onload = function() < // creation of a 458x488 game game = new Phaser.Game(458, 488, Phaser.AUTO, ""); // adding "PlayGame" state game.state.add("PlayGame",playGame); // launching "PlayGame" state game.state.start("PlayGame"); >// PLAYGAME STATE var playGame = function(game)<>; playGame.prototype = < // function to be executed once the state preloads preload: function()< // preloading graphic assets game.load.image("wheel", "wheel.png"); game.load.image("pin", "pin.png"); >, // funtion to be executed when the state is created create: function()< // giving some color to background game.stage.backgroundColor = "#880044"; // adding the wheel in the middle of the canvas wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel"); // setting wheel registration point in its center wheel.anchor.set(0.5); // adding the pin in the middle of the canvas var pin = game.add.sprite(game.width / 2, game.width / 2, "pin"); // setting pin registration point in its center pin.anchor.set(0.5); // adding the text field prizeText = game.add.text(game.world.centerX, 480, ""); // setting text field registration point in its center prizeText.anchor.set(0.5); // aligning the text to center prizeText.align = "center"; // the game has just started = we can spin the wheel canSpin = true; // waiting for your input, then calling "spin" function game.input.onDown.add(this.spin, this); >, // function to spin the wheel spin()< // can we spin the wheel? if(canSpin)< // resetting text field prizeText.text = ""; // the wheel will spin round from 2 to 4 times. This is just coreography var rounds = game.rnd.between(2, 4); // then will rotate by a random number from 0 to 360 degrees. This is the actual spin var degrees = game.rnd.between(0, 360); // before the wheel ends spinning, we already know the prize according to "degrees" rotation and the number of slices prize = slices - 1 - Math.floor(degrees / (360 / slices)); // now the wheel cannot spin because it's already spinning canSpin = false; // animation tweeen for the spin: duration 3s, will rotate by (360 * rounds + degrees) degrees // the quadratic easing will simulate friction var spinTween = game.add.tween(wheel).to(< angle: 360 * rounds + degrees >, 3000, Phaser.Easing.Quadratic.Out, true); // once the tween is completed, call winPrize function spinTween.onComplete.add(this.winPrize, this); > >, // function to assign the prize winPrize() < // now we can spin the wheel again canSpin = true; // writing the prize you just won prizeText.text = slicePrizes[prize]; >> Through 202 pages, 32 source code examples and an Android Studio project I will teach you how to build cross platform HTML5 games and build a game with you along the way.
Then you can turn your game into a native mobile App.
Never miss an update!
Join more than 13,000 developers and follow me on Facebook and Twitter
Subscribe to Emanuele’s newsletter. 12,000 subscribers already receive news and special offers!
Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.
jrue / index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Thanks for sharing. This is excellent.
I want to move the rotation from client side to server side. Is there any way that we can directly select question 1 programatically, after rotating wheel?
I created a wordpress plugin called RafflePress see here https://www.youtube.com/watch?v=TV0ZKt12gOM&t=29s — i just want to thank the author for this amazing script, without it I would have never been able to create it.
Hope this will be of help to somebody:
1) To increase/decrease spin time edit the x in:
vis
.transition()
.duration(x)
2) To have an answer value that can never be chosen/won:
include the answer’s data array index value in the oldpick array at the very top of js script
Hi
Is it possible to make the questions appear in the center of the screen and make everything else fade into the background in the meantime?
is there any way to set background image for each slice?
is there any way to set background image for each slice?
Yes, you’ll need to modify the color variable. Look for this line of code:
The category20 basically pulls from this D3 color pallet
If you want your own custom colors, just modify the code, replacing the line of code like so, to include as many colors as you want.
color = ["#111111", "#222222", "#333333", "#444444", "#555555"]; thanks, color is a solid color but I want use images as background not solid colors
this is the code i use to put images in slices
`var defs = arcs.append(«defs»);
var pattern = defs.append(«pattern»)
.attr(«id», function (d, i) < return "img" + i; >)
.attr(«patternUnits», «userSpaceOnUse»)//objectBoundingBox,userSpaceOnUse
.attr(«width», «1000»)
.attr(«height», «1000»)
;
var image = pattern.append(«image»)
.attr(«xlink:href», function (d, i) < return data[i].background; >)
// .attr(«x», «-200»)
// .attr(«y», «-200»)
.attr(«width», «1000»)
.attr(«height», «250»)
/**/.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) + «)»;
>)
arcs.append("path") .attr("fill", function (d, i) < return color(i); >) // .attr("fill", function(d, i)< return data[i].color; >) // .attr("fill","url(#img1)") // .attr("fill", function (d, i) < return "url(#img" + i + ")"; >) .attr("d", function (d) < return arc(d); >)` but its not working properly
Thanks for this amazing code!
There is only one thing: I cannot change the position. It will always be at the same place. Could someone tell me where in the code I can change that?
Thanks a lot . same question as trtrancuong751984 — how could we add a link to the answer?
Thanks a lot . same question as trtrancuong751984 — how could we add a link to the answer?
Thanks again
@wpswpswps I haven’t tested this, but try changing line 157 from
Then to add a link, just put some html in the question. You’ll need to use single quotes
Виджеты колеса удачи для сайта
Всем — привет. Многие из вас, наверное, знают, что я увлекаюсь созданием виджетов для сайтов и около года назад был создан SmartRoulette. Это скрипт колеса фортуны, который в игровой и ненавязчивой форме помогает получать контакты потенциальных клиентов. Но дело в том, что способ подключения виджета исключает возможность использования его на конструкторах. При этом меня часто спрашивают о такой возможности и мне приходиться объяснять, что это нереально, так как конструкторы не позволяют грузить на хостинг PHP-файлы, а именно в PHP происходит процесс выбора ячейки, чтобы исключит возможность манипуляции результатом.
В связи с этим я решил сделать эту статью и собрать здесь лучшие сервисы, предлагающие виджет колеса удачи, который можно подключить к любому типу сайтов будь то CMS, самописный сайт или конструктор.
Game Lead
GameLead – неплохой сервис с адекватными ребятами (общался с техподдержкой). В свое время был небольшой конфликт, но при общении все претензии разрешились.
В колесо, на момент написания статьи, можно добавить до 8 секторов с возможностью выбора вероятности выпадения. Присутствует возможность выбора шаблона колеса (темы, скина) и изменения цвета текста в секторе.
Также можно кастомизировать цвет фона, кнопки, формы и изменять текст сообщений.
Есть настройка ограничения количества вращений на 1 пользователя или вообще запретить повторную заявку на тот же контакт.
Присутствует интеграция с Telegram, CRM-системами Битрикс24 и AmoCRM, а также возможность передавать информацию о лиде на свой сервер посредством вебхука в виде json.
Тариф – 990 рублей без ограничения по заявкам (заявки приходят в личный кабинет, Телеграм или CRM-систему). Дополнительно можно отправлять письма с выигрышем пользователю и письмо о новой заявке администратору (стоимость — 290 рублей за 1000 писем).
Попросил у ребят промокод для читателей блога. В личном кабинете в разделе «Оплата» введите SMART10 и получите скидку 10%. Действует до 31 декабря 2022 года. Количество промокодов ограничено. Сейчас доступно 50 штук.
Lp9
Lp9 – совсем простой виджет колеса удачи без особых настроек дизайна. Можно выбрать только цвет колеса, настроить сообщения приглашения и выигрыша. По секторам — тоже максимум 8 штук. Собирать, пока, можно только телефоны, но в разработке и почтовые адреса. Есть интеграция с Telegram, Вконтакте и CRM-системой Битрикс24, метрикой и возможность отправить POST-запрос на внешний URL.
На сайт виджет встраивается путем добавления js-скрипта.
Минимальный тариф от 990 рублей в месяц, при котором можно получать до 100 заявок в месяц.
Playlead
Playlead – еще один сервис без особых настроек, но с возможностью заказать брендирование и визуальную кастомизацию под свой проект у разработчиков. Собирать можно телефоны, e-mail, логины в Instagram или любые произвольные данные. Количество секторов – 2, 4, 6 или 8. Заявки попадают во Вконтатке, Телеграм, по SMS или отправляются на указанный URL.
Интеграция с CRM-системами, пока, в разработке.
Цена – от 490 рублей в месяц.
У меня, пока, на этом – все. Если вы знаете еще какие-то стоящие сервисы, то добавьте их в опрос ниже или напишите в комментариях, я сам добавлю. Хочу собрать действительно стоящие проекты, с которыми можно работать и рекомендовать клиентам и читателям. Пока, из онлайн-сервисов, могу рекомендовать только GameLead, так как там есть, более-менее, нормальные настройки внешнего вида и интеграции.