Search the Community
Showing results for tags 'slot machine'.
Found 8 results
-
Hi everyone, I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js. My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions): I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and display them again. I got randomness dsiplaying but no spinning animation. So tried next step -> Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution -> Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)): this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]); then, creating TilingSprite from this rectangle, and positioning it: this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height) this.tilingReelThree.position.set(363, 210); this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y); of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: this.y_3; // this one to pass value for moving sprite on y axis this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops. realization is the following: var position = function () { // this function is called from update() main animating function if (this.y == 0) { } else { this.tilingReelOne.tilePosition.y += this.y_1 * 12; this.tilingReelTwo.tilePosition.y += this.y_2 * 13; this.tilingReelThree.tilePosition.y += this.y_3 * 14; } this.distance_1--; this.distance_2--; this.distance_3--; if (this.distance_1 <= 0) this.y_1 = 0; if (this.distance_2 <= 0) this.y_2 = 0; if (this.distance_3 <= 0) this.y_3 = 0; }; //this one is trigerred on Spin button push var spin = function () { this.state = SLOT_STATE.SPINNING; this.y_1 = 1; this.y_2 = 1; this.y_3 = 1; this.distance_1 = 150; this.distance_2 = 220; this.distance_3 = 275; }; As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. So here are the questions: Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? Thank you in advance,
-
So I'm practicing Phaser by creating a slot machine, I've got most of it down but I'm having some issues with getting the reels to move and stop randomly. Here is my current code: <!DOCTYPE HTML><html> <head> <meta charset="UTF-8"/> <title>Slots </title> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript" > window.onload = function () { var game = new Phaser.Game(640,480, Phaser.CANVAS, 'd',{ preload: preload, create: create, update: update }); var seven; var bar; var twobar; var cherry; var cherry2; var tween; var spinning = false; var timer; var tick = 0; var reel1; var reel2; var reel3; var reel4; function preload() { // Pre load all images. //Cherry game.load.image('cherry', 'img/cherry.png'); // Bar game.load.image('bar', 'img/bar.png'); // TwoBars game.load.image('twoBar', 'img/twobar.png'); //seven game.load.image('seven', 'img/seven.png'); // Spin Button game.load.image('spin_button', 'img/spin_button.png'); // Machine_body game.load.image('machine_body', 'img/machine__body.png'); } function create() { var items = ['cherry', 'bar', 'seven', 'twoBar', 'cherry', 'bar', 'seven', 'twoBar']; reel1 = game.add.group(); // first reel. reel2 = game.add.group(); reel3 = game.add.group(); reel4 = game.add.group(); for(var i = 0; i < 5; i++) { sprite = reel1.create(5, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite2 = reel2.create(131, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite3 = reel3.create(258, i * 98 +3, items[game.rnd.integerInRange(0,5)]); sprite4 = reel4.create(386, i * 98 +3, items[game.rnd.integerInRange(0,5)]); } var body = game.add.sprite(0,0, 'machine_body'); var button = game.add.button(175, 400,'spin_button', actionOnClick, this); game.stage.backgroundColor = '#FFFFFF'; timer = game.time.create(false); timer.loop(3000, updateTicks, this); timer.start(); } function actionOnClick () { spinning = true; } function update() { if(spinning) { reel1.y += 50 reel2.y += 40; reel3.y += 57; reel4.y += 60; if(reel1.y >= 400){ reel1.y = 0; } if(reel2.y >= 400){ reel2.y = 0; } if(reel3.y >= 400){ reel3.y = 0; } if(reel4.y >= 400){ reel4.y = 0; } } var tween = game.add.tween(reel1); var tween2 = game.add.tween(reel2); var tween3 = game.add.tween(reel3); var tween4 = game.add.tween(reel4); tween.to({y: 180}, 60); tween2.to({y: 180}, 70); tween3.to({y: 180}, 80); tween4.to({y: 180}, 90); tween.start(); tween2.start(); tween3.start(); tween4.start(); } function updateTicks() { if(spinning){ spinning = false; } } } </script> </body></html> The idea is to have each reel as a group move down until it hits a threshold and then return to 0, after a timer expires it will tween to a stop with the closest element to the middle. The issue I have with this is that the final tween always seems to move the top element to the position rather than the closest element which is what I assume happens to a real slot machine leaving a gap on the top of the reel (see attached image). Assistance on getting each reel to move randomly and sorting out my button would also be great Thanks!
-
Hi! Are you looking for High Quality HTML5 Games to publish on your website? Take a look at our portfolio! We have developed more than 170 game! We are top seller and elite author on CodeCanyon. In our portfolio you'll find all sort of game play: Arcade, Puzzle, Casino Games and many many more. Here there are some of our Flagships: Penalty Kicks The Sorcerer Greyhound Racing You'll get the whole source code, so you'll be free to customize the games as you want. We are also available to customize the games for you. Do not hesitate to contact me for any further info at [email protected] Cheers! -Ida
-
Hello to everyone, I am new to Phaser.js and wanna create a Slot machine game with it as i requested to create the flash game in html5 canvas. After research i understand that is better to use either Pixi.js or Phaser.js framework. I have read the Phaser Getting started guide and did the small game with the tutorial but need some help, guide for my Real game. Am attaching a screenshot with game view. I need something to start with, like the structure and other stuff. Are there any limitations from the design point? ANy help is appreciated from game gurus. Thanks in advance.
-
First time poser here. I am starting to work on a simple 3 reel slot machine. A working jQuery version is here:http://104.236.144.16/tests/ I would like to convert this to a Phaser game to take advantage of all the features. I am looking for any type of help or direction in planning this project. I am very new to Phaser. What I would like to have is 3 reels, each reel will have a varying number of tiles/sprites. To spin the reels should I be using gravity to make them fall or a tween animation? I would like to have a designated area where the reels spin but have the overflow hidden from the rest of the stage. When the spinning stops I would like to show 3 tiles/sprites for each reel and then I will be drawing lines connect the sprites to show the user the winning combination. I have attached an image to show what I am trying to describe. I am not looking for someone to do this for me, I am just looking for help, I've scanned through the API but the terminology is all new to me and cant seem to find answers there YET. Should me reels be groups? Can I animate a group as a whole or does the animation only affect the individual sprites? Thanks in advance to anyone who can shed some light.
-
This is a simple game. Guess different fruits get gold play links Retro fruit machine lampstudio.net~
-
Hi, Check out my new word game at http://samulikuusisto.com/SlotMachineGameAlphabetBlocks/wordreelAlphabetBlocks.html and http://samulikuusisto.com. Feel free to comment! Game Copyright Ⓒ 2016 Samuli Kuusisto. All Rights Reserved. Note: for some reason doesn't work on Safari version below 6, try instead Chrome, Edge, Firefox, IE or Opera. Thanks, Samuli Kuusisto
-
LIVE PREVIEW PURCHASE ONLY FOR 11$ Beautiful and flexible HTML5 Slot Machine. Features: Realistic spinning Special sound effects Customize your winning values Customize your slot images Stunning custom graphics Customize the entire look and feel Ability to control when to win and lose from a back-end Touch and mouse input Optimized for desktop AND tablets Customizable text animations for game messages Beautiful animation Web and native app-ready
