Based on your example page at https://studio.code.org/s/course3/stage/2/puzzle/8
it looks like you want to do Logo Turtle Graphics in AI2.
There are two different varieties of that:
- travelling from adjacent cell to adjacent cell, or
- drawing from pixel (x,y) to pixel (x,y).
There is a library of blocks for the second case in the AI2 Gallery at ai2.appinventor.mit.edu/?galleryId=4909221422432256 based on the Ralph Morelli video at https://www.youtube.com/watch?v=QwduDhVjPK4.
For the first case, you need a way to represent the picture of the traveller in each of the 4 orientations North, East, West, South. Use your art program to make 4 image files, N.jpg, E.jpg, W.jpg, S.jpg, Turning the arrow would be done by assigning it the next image file in the proper order from the list (N.jpg, E.jpg, S.jpg, W.jpg) with wrap around at the beginning and the end of the list. Turning right should give you the next item in that list, and turning left should give you the previous item in that list.
You also need a way to represent the sequence of moves. Blockly blocks are a bit advanced for AI2. No one has done Blockly blocks in an Ai2 WebViewer yet, so I suggest a simple text Comma Separated Values (CSV) representation of a tour.
Use single letters for your move types :
- Forward (F),
- Turn Left (L),
- Turn Right (R )
and keep them in a Comma Separated Values text:
F,F,R,F,L,F,F,…
This is easy to read, and there are list blocks to switch from csv row to list and back for indexing purposes.
You will need to import a map for each puzzle, with a row for each cell location, containing its:
- name
- r (row number)
- c (cell number)
- N (Northern neighbor name)
- E (Eastern neighbor name)
- S (southern neighbor name)
- W (Western neighbor name)
- A (Action if you land on it (Die/Continue/GameOver)
Decide for yourself how you want to represent this, either in a CSv table from a spreadsheet or in JSON format.