hello everyone !!
have a easily way to make this Horizontal Roulette in SpiderBasic withou use css or html external ?
example in HTML, JS and CSS : https://codepen.io/waldemar-lima/pen/QW ... itors=1111
Horizontal Roulette Game ?
Re: Horizontal Roulette Game ?
Yes, this should be possible.
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: Horizontal Roulette Game ?
Could anyone who has experience doing something similar to this give me some tips or some examples of how to use it with spiderbasic?
Well, I don't have much experience with pure JavaScript, from what I read, roughly speaking, is the roulette spinning animation in CSS?
Well, I don't have much experience with pure JavaScript, from what I read, roughly speaking, is the roulette spinning animation in CSS?
Code: Select all
$(document).ready(function() {
//setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
initWheel();
$('button').on('click', function(){
var outcome = parseInt($('input').val());
spinWheel(outcome);
});
});
function initWheel(){
var $wheel = $('.roulette-wrapper .wheel'),
row = "";
row += "<div class='row'>";
row += " <div class='card red'>1<\/div>";
row += " <div class='card black'>14<\/div>";
row += " <div class='card red'>2<\/div>";
row += " <div class='card black'>13<\/div>";
row += " <div class='card red'>3<\/div>";
row += " <div class='card black'>12<\/div>";
row += " <div class='card red'>4<\/div>";
row += " <div class='card green'>0<\/div>";
row += " <div class='card black'>11<\/div>";
row += " <div class='card red'>5<\/div>";
row += " <div class='card black'>10<\/div>";
row += " <div class='card red'>6<\/div>";
row += " <div class='card black'>9<\/div>";
row += " <div class='card red'>7<\/div>";
row += " <div class='card black'>8<\/div>";
row += "<\/div>";
for(var x = 0; x < 29; x++){
$wheel.append(row);
}
}
function spinWheel(roll){
var $wheel = $('.roulette-wrapper .wheel'),
order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
position = order.indexOf(roll);
//determine position where to land
var rows = 12,
card = 75 + 3 * 2,
landingPosition = (rows * 15 * card) + (position * card);
var randomize = Math.floor(Math.random() * 75) - (75/2);
landingPosition = landingPosition + randomize;
var object = {
x: Math.floor(Math.random() * 50) / 100,
y: Math.floor(Math.random() * 20) / 100
};
$wheel.css({
'transition-timing-function':'cubic-bezier(0,'+ object.x +','+ object.y + ',1)',
'transition-duration':'7s',
'transform':'translate3d(-'+landingPosition+'px, 0px, 0px)'
});
setTimeout(function(){
$wheel.css({
'transition-timing-function':'',
'transition-duration':'',
});
var resetTo = -(position * card);// + randomize);
$wheel.css('transform', 'translate3d('+resetTo+'px, 0px, 0px)');
}, 8.5 * 1000);
}
function resetar(){
var $wheel = $('.roulette-wrapper .wheel'),
order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
position = order.indexOf(0);
var rows = 12,
card = 75 + 3 * 2,
landingPosition = (rows * 15 * card) + (position * card);
var object = {
x: Math.floor(Math.random() * 50) / 100,
y: Math.floor(Math.random() * 20) / 100
};
$wheel.css({
'transition-timing-function':'cubic-bezier(0,'+ object.x +','+ object.y + ',1)',
'transition-duration':'1s',
'transform':'translate3d(-'+landingPosition+'px, 0px, 0px)'
});
var resetTo = -(position * card);
$wheel.css('transform', 'translate3d('+resetTo+'px, 0px, 0px)');
}
Re: Horizontal Roulette Game ?
a possible solution is to create a long sprite (image) and display it x position shifted in every frame
DisplaySprite() support display out outside bounds so its ok
i am out of office for an example this week
DisplaySprite() support display out outside bounds so its ok
i am out of office for an example this week
Christos
Re: Horizontal Roulette Game ?
I agree with plouf here. Smooth animations like this are possible with the Screen and Sprite command set.
A truly simple and rough example comes here:
A truly simple and rough example comes here:
Code: Select all
;- SETTINGS
#AppName = "Spider Roulette"
#ClrDesk = $38533d
#ClrTitle = $00d8ff
#ClrZero = $4dc700
#ClrRouge = $4651f9
#ClrNoir = $35302d
#BlockSize = 96
#Margin = 2
#Round = 20
#MaxSpeed = 1000.0
#Accel = 2.75
#Brake = 0.95
#Idle = 0
#SpeedUp = 1
#SlowDown = 2
Global mode = #Idle
Global speed.f = 0
;- WINDOW
OpenWindow(0, 0, 0, 0, 0, #AppName, #PB_Window_Background)
SetWindowColor(0, #ClrDesk)
LoadFont(0, "Times", #BlockSize*0.5, #PB_Font_Italic)
LoadFont(1, "Arial", #BlockSize*0.25)
TextGadget(0, 0, #BlockSize*0.5, WindowWidth(0), #BlockSize, #AppName, #PB_Text_Center)
SetGadgetFont(0, FontID(0) )
SetGadgetColor(0, #PB_Gadget_FrontColor, #ClrTitle)
OpenWindowedScreen(WindowID(0), 0, #BlockSize*1.5, WindowWidth(0), #BlockSize)
SetFrameRate(30)
ButtonGadget(1, WindowWidth(0)*0.5-50, #BlockSize*3, 100, 30, "Spin Wheel")
;-IMAGES
CreateSprite(0, 37*#BlockSize, #BlockSize)
StartDrawing(SpriteOutput(0))
RoundBox(#Margin, #Margin, #BlockSize-2*#Margin, #BlockSize-2*#Margin, #Round, #Round, #ClrZero)
For i=1 To 36 Step 2
RoundBox(i*#BlockSize+#Margin, #Margin, #BlockSize-2*#Margin, #BlockSize-2*#Margin, #Round, #Round, #ClrRouge)
RoundBox((i+1)*#BlockSize+#Margin, #Margin, #BlockSize-2*#Margin, #BlockSize-2*#Margin, #Round, #Round, #ClrNoir)
Next
number.s = "00321519042102251734062713361130082310052416330120143109221829072812350326" ; official roulette order
For j=0 To 36
num.s = Str(Val(Mid(number.s,j*2+1, 2)))
DrawingFont(FontID(1))
DrawingMode(#PB_2DDrawing_Transparent)
DrawText((j)*#BlockSize+(#BlockSize-TextWidth(num))*0.5, (#BlockSize-TextHeight(num))*0.5, num, #White)
;Debug Str(j)+": "+num
Next
StopDrawing()
;- UPDATE
Procedure RenderFrame()
Static x, y
Select mode
Case #Idle
speed = 0
Case #SpeedUp
speed*#Accel
If speed>#MaxSpeed
speed = #MaxSpeed
mode = #SlowDown
EndIf
Case #SlowDown
speed*#Brake
If speed<1
speed = 0
mode =#Idle
EndIf
EndSelect
x+speed
If x>SpriteWidth(0)
x=0
EndIf
DisplaySprite(0, x, y)
DisplaySprite(0, x-SpriteWidth(0), y)
FlipBuffers()
EndProcedure
BindEvent(#PB_Event_RenderFrame, @RenderFrame())
Procedure EventHandler()
Select EventGadget()
Case 1 ; spin button
mode = #SpeedUp
speed = 1
EndSelect
EndProcedure
BindEvent(#PB_Event_Gadget, @EventHandler())
;- START
SetActiveGadget(1)
FlipBuffers()
-
- Posts: 120
- Joined: Tue Jun 14, 2016 7:17 pm
Re: Horizontal Roulette Game ?
awesome, works fine . !!!
thanks
thanks