5 |
4 |
5 |
12 |
13 | ## Contributions / Suggestions / Feedbacks
14 | ```
15 | Contributions, Suggestions & Feedbacks are Most Welcome
16 | Get in touch with me at gadadarshan[at]gmail[dot]com
17 | ```
18 |
19 | That's all Folks !! Enjoy.
20 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | // the game itself
2 | var game;
3 |
4 | var gameOptions = {
5 |
6 | // slices (prizes) placed in the wheel
7 | slices: 6,
8 |
9 | // prize names, starting from 12 o'clock going clockwise
10 | slicePrizes: [
11 | "🎉 5% OFF",
12 | "🎉 10% OFF",
13 | "🎉 15% OFF",
14 | "🎉 25% OFF",
15 | "🎉 50% OFF",
16 | "🎉 FREE PASTRY 🍰"
17 | ],
18 |
19 | // wheel rotation duration, in milliseconds
20 | rotationTime: 3000
21 | }
22 |
23 | // once the window loads...
24 | window.onload = function () {
25 |
26 | // game configuration object
27 | var gameConfig = {
28 |
29 | // render type
30 | type: Phaser.CANVAS,
31 |
32 | // game width, in pixels
33 | width: 850,
34 |
35 | // game height, in pixels
36 | height: 850,
37 |
38 | // game background color
39 | backgroundColor: 0x880044,
40 |
41 | // scenes used by the game
42 | scene: [playGame]
43 | };
44 |
45 | // game constructor
46 | game = new Phaser.Game(gameConfig);
47 |
48 | // pure javascript to give focus to the page/frame and scale the game
49 | window.focus()
50 | resize();
51 | window.addEventListener("resize", resize, false);
52 | }
53 |
54 | // PlayGame scene
55 | class playGame extends Phaser.Scene {
56 |
57 | // constructor
58 | constructor() {
59 | super("PlayGame");
60 | }
61 |
62 | // method to be executed when the scene preloads
63 | preload() { // loading assets
64 |
65 | this.load.image("wheel", window.location.href + "images/wheel.png");
66 | this.load.image("pin", window.location.href + "images/pin.png");
67 | }
68 |
69 | // method to be executed once the scene has been created
70 | create() {
71 |
72 | // adding the wheel in the middle of the canvas
73 | this.wheel = this.add.sprite(game.config.width / 2, game.config.height / 2, "wheel");
74 |
75 | // adding the pin in the middle of the canvas
76 | this.pin = this.add.sprite(game.config.width / 2, game.config.height / 2, "pin");
77 |
78 | // adding the text field
79 | this.prizeText = this.add.text(game.config.width / 2, game.config.height - 35, "SPIN TO WIN", {
80 | font: "bold 64px Rajdhani",
81 | align: "center",
82 | color: "white"
83 | });
84 |
85 | // center the text
86 | this.prizeText.setOrigin(0.5);
87 |
88 | // the game has just started = we can spin the wheel
89 | this.canSpin = true;
90 |
91 | // waiting for your input, then calling "spinWheel" function
92 | this.input.on("pointerdown", this.spinWheel, this);
93 | }
94 |
95 | // function to spin the wheel
96 | spinWheel() {
97 |
98 | // can we spin the wheel?
99 | if (this.canSpin) {
100 |
101 | // resetting text field
102 | this.prizeText.setText("");
103 |
104 | // the wheel will spin round from 2 to 4 times. This is just coreography
105 | var rounds = Phaser.Math.Between(4, 6);
106 |
107 | // then will rotate by a random number from 0 to 360 degrees. This is the actual spin
108 | var degrees = Phaser.Math.Between(0, 360);
109 |
110 | // before the wheel ends spinning, we already know the prize according to "degrees" rotation and the number of slices
111 | var prize = gameOptions.slices - 1 - Math.floor(degrees / (360 / gameOptions.slices));
112 |
113 | // now the wheel cannot spin because it's already spinning
114 | this.canSpin = false;
115 |
116 | // animation tweeen for the spin: duration 3s, will rotate by (360 * rounds + degrees) degrees
117 | // the quadratic easing will simulate friction
118 | this.tweens.add({
119 |
120 | // adding the wheel to tween targets
121 | targets: [this.wheel],
122 |
123 | // angle destination
124 | angle: 360 * rounds + degrees,
125 |
126 | // tween duration
127 | duration: gameOptions.rotationTime,
128 |
129 | // tween easing
130 | ease: "Cubic.easeOut",
131 |
132 | // callback scope
133 | callbackScope: this,
134 |
135 | // function to be executed once the tween has been completed
136 | onComplete: function (tween) {
137 | // displaying prize text
138 | this.prizeText.setText(gameOptions.slicePrizes[prize]);
139 |
140 | // player can spin again
141 | this.canSpin = false;
142 | }
143 | });
144 | }
145 | }
146 | }
147 |
148 | // pure javascript to scale the game
149 | function resize() {
150 | var canvas = document.querySelector("canvas");
151 | var windowWidth = window.innerWidth;
152 | var windowHeight = window.innerHeight;
153 | var windowRatio = windowWidth / windowHeight;
154 | var gameRatio = game.config.width / game.config.height;
155 | if (windowRatio < gameRatio) {
156 | canvas.style.width = windowWidth + "px";
157 | canvas.style.height = (windowWidth / gameRatio) + "px";
158 | }
159 | else {
160 | canvas.style.width = (windowHeight * gameRatio) + "px";
161 | canvas.style.height = windowHeight + "px";
162 | }
163 | }
164 |
--------------------------------------------------------------------------------
/images/wheel.svg:
--------------------------------------------------------------------------------
1 |
144 |
--------------------------------------------------------------------------------