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>&nbsp;

<!-- 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>