Euden Posted November 4, 2014 Share Posted November 4, 2014 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. Quote Link to comment Share on other sites More sharing options...
Bananaoomarang Posted November 6, 2014 Share Posted November 6, 2014 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 Quote Link to comment Share on other sites More sharing options...
ericjbasti Posted November 15, 2014 Share Posted November 15, 2014 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. ishan and IamThatGuy 2 Quote Link to comment Share on other sites More sharing options...
IamThatGuy Posted November 16, 2014 Share Posted November 16, 2014 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. Quote Link to comment Share on other sites More sharing options...
ishan Posted November 16, 2014 Share Posted November 16, 2014 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/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.