# 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 set Piece draggable 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` return </pre>