Simple Slot game, Struggling.

[Euden]

I'm trying to create a simple slot game. I have several images for the game: a cherry, a bar, a 7, 2 bars, spin button and a 640x480 black image with 4 'slots' that are transparent for the slots to roll in.

 

I'm struggling to grasp the best way to do this, the basic Idea I had was to create 5 canvases. one to hold the base image and 4 others filled with several images for the slots that are behind the base image that then move.

 

Problem is. I can't find any tutorials on this nor where to begin.

[Bananaoomarang]

You don't want multiple canvases, that wouldn't work. You can draw it on one canvas and it'll be a lot more efficient! I've never done this with a canvas 2d context, but it's definitely possible.

 

You'll need to set up the right blend mode, then draw the objects in a logical order, ie the slot machine last. 

 

If that's too vague and you need any help/clarification just ask

[ericjbasti]

I'm just going to throw this out there, not knowing your final plan. You could also get away with using 3 divs and a background image that is the slot strip. What would work out nicely for you here is that you can set the background to repeat-y (no need to manually loop the image), and change the backgrounds y position value. You could even use css transitions to animate the position change. Just some thoughts.

[IamThatGuy]

I'm trying to create a simple slot game. I have several images for the game: a cherry, a bar, a 7, 2 bars, spin button and a 640x480 black image with 4 'slots' that are transparent for the slots to roll in.

 

I'm struggling to grasp the best way to do this, the basic Idea I had was to create 5 canvases. one to hold the base image and 4 others filled with several images for the slots that are behind the base image that then move.

 

Problem is. I can't find any tutorials on this nor where to begin.

 

 

1 canvas as that banna guy said. Your be placing images in different locations.

[ishan]

I'm trying to create a simple slot game. I have several images for the game: a cherry, a bar, a 7, 2 bars, spin button and a 640x480 black image with 4 'slots' that are transparent for the slots to roll in.

 

I'm struggling to grasp the best way to do this, the basic Idea I had was to create 5 canvases. one to hold the base image and 4 others filled with several images for the slots that are behind the base image that then move.

 

Problem is. I can't find any tutorials on this nor where to begin.

Tutorial - http://bravenewmethod.com/2013/03/14/simple-slot-machine-with-html5/