This looked like a good way to spend an hour or so of lockdown (as well as providing a neat addition to my collection of demos), so I prototyped the same thing using my own DSL. My main aim was to see how efficient I could make the algorithm for drawing the dots, so I used a table of coordinates, with 6 rows each having 6 pairs of values that specify the top/left coordinates of a dot, which is itself constructed as a rounded DIV with absolute positioning. The renderer runs along the row for the dot count requested and stops when it hits a zero. I added a simple animation for when a dice is clicked.
I've put it up on a demo website. The script is in the BODY of the page and is compiled and run by a JS library called in by the HEAD. The actual code looks like this:
! Twin dice roller
script DiceRoller
div Screen
div Dice
div Dot
variable NDice
variable M
variable N
variable D
variable Index
variable Row
variable Dots
variable Patterns
variable Left
variable Top
! Set up constants
put 2 into NDice
! Poke some CSS styles into the HEAD
set style `.ec-dice` to `{width:100px;height:100px;margin:20px;`
cat `background:yellow;border:1px solid black;display:inline-block;`
cat `position:relative}`
set style `.ec-dot` to `{width:20px;height:20;position:absolute;`
cat `background:black;border-radius: 10px}`
! 'Patterns' contains 6 rows of data. Each is a set of 6 top/left pairs
! to set the dot positions. Iteration stops at the first zero.
set Patterns to
40 40 0 0 0 0 0 0 0 0 0 0
10 40 70 40 0 0 0 0 0 0 0 0
10 40 40 40 70 40 0 0 0 0 0 0
10 10 70 10 10 70 70 70 0 0 0 0
10 10 70 10 10 70 70 70 40 40 0 0
10 10 10 70 40 10 40 70 70 10 70 70
! Create the screen
create Screen
set the style of Screen to `padding:1em`
set the elements of Dice to NDice
! Draw or redraw
Redraw:
! Run the randomiser 10 times to simulate the dice spinning
put 0 into M
while M is less than 10
begin
! Create a single dice
put 0 into N
while N is less than NDice
begin
index Dice to N
remove element Dice
create Dice in Screen
set the class of Dice to `ec-dice`
gosub to RandomiseDots
add 1 to N
end
wait 10 ticks
add 1 to M
end
on click Dice go to Redraw
stop
! Randomize the dots for a single dice
! This is done by reading from the appropriate row of the data table.
RandomiseDots:
put random 6 into Dots
multiply Dots by 12 giving Row
put 0 into D
while D is less than 12
begin
add D to Row giving Index
index Patterns to Index
put Patterns into Top
add 1 to D
if Top is not 0
begin
add 1 to Index
index Patterns to Index
put Patterns into Left
create Dot in Dice
set the class of Dot to `ec-dot`
set style `top` of Dot to Top
set style `left` of Dot to Left
on click Dot go to Redraw
end
add 1 to D
end
return
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This looked like a good way to spend an hour or so of lockdown (as well as providing a neat addition to my collection of demos), so I prototyped the same thing using my own DSL. My main aim was to see how efficient I could make the algorithm for drawing the dots, so I used a table of coordinates, with 6 rows each having 6 pairs of values that specify the top/left coordinates of a dot, which is itself constructed as a rounded DIV with absolute positioning. The renderer runs along the row for the dot count requested and stops when it hits a zero. I added a simple animation for when a dice is clicked.
I've put it up on a demo website. The script is in the BODY of the page and is compiled and run by a JS library called in by the HEAD. The actual code looks like this: