Help with first game project spin a reel

[koolguyme]

hi . i wanted to make my first project.

i have loaded 8 pngs with fruit images .

i want to put them in a vertical 2d reel that spins and stops displaying 3 random fruits on the reel.

the reel should display 3 tiles from a total of 64.

i dont know where to start.

i want to do 2 things:

1. create a grid of 5x3 and have fruits displayed in this grid at random and a way for me to number and detect the tiles so that i can have matching lines of same fruit detected

so something like if tile A1 B1 C1 D1 E1 have fruit banana then it should detect

2. create a reel holding 64 images in vertical order holding fruit images in 150px x 150px tiles and make it spin vertically stopping to show 3 fruit images. and the program to be able to detect which fruit is on which tile and which 3 are being displayed on the reel.

 

i just want someone to point me in the right direction of which documentation api i should use for the easiest way to do this.

like maybe the api for grouping sprites, randomizing, making tiles, detection, spinning the images by vertically moving.. i just want to know what API i can use as i am new to phaser and js

[b10b]

My advice would be don't worry too much about "spinning" reels or "graphics" to start off with (first project afterall).  First think of columns of data  ... each "reel" (x5) is an array of 64 "symbol"s.

Then increment the "index" of that array per reel.  The 3 symbols visible on each reel are: reel[index-1], reel[index], reel[index+1].  Next consider that -1 or +1 might take the array out of range, fix that with modulo: reel[(index-1)%reel.length], reel[index], reel[(index+1)%reel.length].

Starting a spin, stopping a spin, shuffling a spin, even animating the spin are now modifiers of "index".  Winning lines are readily identifable by comparing the values of the data at the respective reels' index when stopped.  When the data model is robust, add graphics and animation.  CanvasRenderingContext2D.drawImage() will do most of the drawing.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage