Page 1 of 1

Horizontal Roulette Game ?

Posted: Sun Apr 17, 2022 6:13 am
by skinkairewalker
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

Re: Horizontal Roulette Game ?

Posted: Fri Apr 22, 2022 10:39 am
by bembulak
Yes, this should be possible.

Re: Horizontal Roulette Game ?

Posted: Fri Apr 22, 2022 11:01 am
by Peter
bembulak wrote: Fri Apr 22, 2022 10:39 amYes, this should be possible.
:mrgreen:

Re: Horizontal Roulette Game ?

Posted: Sat Dec 16, 2023 4:07 pm
by skinkairewalker
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?

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 ?

Posted: Sat Dec 16, 2023 6:07 pm
by plouf
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

Re: Horizontal Roulette Game ?

Posted: Sat Dec 23, 2023 4:28 pm
by munfraid
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:

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()

Re: Horizontal Roulette Game ?

Posted: Sat Jan 06, 2024 9:01 pm
by skinkairewalker
awesome, works fine . !!!
thanks :D