Graphics example 2 - Solitaire
This is the traditional Solitaire game. You click on a (red) piece then on an empty (gray) space to move it and remove the one in between. You can only move 2 places up, down, left or right. The aim is to remove all but one piece.
In order to avoid creating too many graphic variables we use two arrays of 49 elements each; one for the background gray circle and the other for the pieces themselves. Much of the script is logic for checking if a move is legal.
Graphics - Intro
Graphics example 2 - Calculator
Graphics example 3 - Wacky Drumkit
Graphics example 5 - A factory simulation
<div id="ec-container" style="width:256px;height:320px;border:1px solid black"></div>
<div id="ec-gameover" style="text-align:center;font-size:90%;display:none">No more moves are possible - game over.</div>
<!-- EasyCoder script ======================================================-->
<pre id="easycoder-script" style="display: none;">!
! Solitaire
! The map of the board.
variable Map
set Map to
0 0 2 2 2 0 0
0 0 2 2 2 0 0
2 2 2 2 2 2 2
2 2 2 1 2 2 2
2 2 2 2 2 2 2
0 0 2 2 2 0 0
0 0 2 2 2 0 0
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Variables.
div Container
div GameOver
svg Stage
circle Box
circle Piece
variable Width
variable N
variable M
variable X
variable Y
variable R
variable C
variable S
variable Radius
variable Offset
variable Selected
variable Previous
variable Row
variable Column
variable Valid
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Set the title and background.
attach Container to `ec-container`
create Stage in Container
set the elements of Box to 49
set the elements of Piece to 49
if mobile
begin
put the width of Container into Width
end
else
begin
put 500 into Width
set style `width` of Container to Width cat `px`
end
set style `height` of Container to Width cat `px`
set style `background-size` of Container to Width cat `px`
divide Width by 7 giving S
divide S by 7 giving Radius
multiply Radius by 3
divide S by 2 giving Offset
put 0 into Previous
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Draw the initial board layout.
put 0 into N
while N is less than 49
begin
index Map to N
if Map is not 0
begin
divide N by 7 giving Row
multiply Row by S giving Y
add Offset to Y
put N modulo 7 into Column
multiply Column by S giving X
add Offset to X
index Box to N
create Box in Stage
style `cx:` cat X cat `;cy:` cat Y cat `;r:` cat Radius cat `;fill:#888;stroke:#444`
index Piece to N
create Piece in Stage
style `cx:` cat X cat `;cy:` cat Y cat `;r:` cat Radius cat `;fill:#f00;stroke:#800`
if Map is 1 gosub to Hide
end
add 1 to N
end
on click Piece go to Tap
stop
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Here when we tap one of the pieces.
Tap:
! Check if there are any moves left.
put 0 into N
while N is less than 49
begin
index Map to N
if Map is 2
begin
divide N by 7 giving Row
put N modulo 7 into Column
! Try the left
take 1 from Column giving C
if C is not less than 0
begin
multiply Row by 7 giving M
add C to M
index Map to M
if Map is 2
begin
take 1 from C
if C is not less than 0
begin
multiply Row by 7 giving M
add C to M
index Map to M
if Map is 1 go to Continue
end
end
end
! Try the right
add 1 to Column giving C
if C is less than 7
begin
multiply Row by 7 giving M
add C to M
index Map to M
if Map is 2
begin
add 1 to C
if C is less than 7
begin
multiply Row by 7 giving M
add C to M
index Map to M
if Map is 1 go to Continue
end
end
end
! Try up
take 1 from Row giving R
if R is not less than 0
begin
multiply R by 7 giving M
add Column to M
index Map to M
if Map is 2
begin
take 1 from R
if R is not less than 0
begin
multiply R by 7 giving M
add Column to M
index Map to M
if Map is 1 go to Continue
end
end
end
! Try down
add 1 to Row giving R
if R is less than 7
begin
multiply R by 7 giving M
add Column to M
index Map to M
if Map is 2
begin
add 1 to R
if R is less than 7
begin
multiply R by 7 giving M
add Column to M
index Map to M
if Map is 1 go to Continue
end
end
end
end
add 1 to N
end
attach GameOver to `ec-gameover`
set style `display` of GameOver to `none`
stop
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! There are moves available.
Continue:
put the index of Piece into Selected
index Map to Selected
divide Selected by 7 giving Row
put Selected modulo 7 into Column
! If Previous is set we have a piece selected.
if Previous is not 0
begin
! If it's the same one, deselect it.
if Selected is Previous
begin
! set the fill colour of Piece to red
set style `opacity` of Piece to `1`
set style `fill` of Piece to `#f00`
put 0 into Selected
put 0 into Previous
end
else
begin
gosub to CheckIfValid
if Valid
begin
! This is a valid move.
put Previous into N
gosub to Remove
add Previous to Selected giving N
divide N by 2
gosub to Remove
put Selected into N
gosub to Place
put 0 into Previous
end
else put 0 into Selected
end
end
else
begin
if Map is 2
begin
set style `opacity` of Piece to `1`
set style `fill` of Piece to `yellow`
put Selected into Previous
end
end
stop
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Subroutines.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Test if the selected cell is valid.
CheckIfValid:
clear Valid
divide Previous by 7 giving R
put Previous modulo 7 into C
take Row from R
if R is less than 0 negate R
take Column from C
if C is less than 0 negate C
if C is not 0
if C is not 2 return
if R is not 0
if R is not 2 return
if C is 2
if R is not 0 return
if R is 2
if C is not 0 return
index Map to Selected
if Map is 1 set Valid
return
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Place a piece
Place:
index Map to N
index Piece to N
put 2 into Map
set style `opacity` of Piece to `1`
set style `fill` of Piece to `#f00`
set style `stroke` of Piece to `#800`
set style 'display` of Piece to `inline-block`
return
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Remove a piece
Remove:
index Map to N
index Piece to N
put 1 into Map
gosub to Hide
return
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! Hide a piece
Hide:
set style `opacity` of Piece to `0`
</pre>