![](https://static.wixstatic.com/media/85cc2a_2a2d05fb24c74626a4eab91f170dcc2e~mv2.png/v1/fill/w_980,h_655,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/85cc2a_2a2d05fb24c74626a4eab91f170dcc2e~mv2.png)
Bea and Flower
In this game you play as Bea, a small creature trying to collect all the flowers.
This is placeholder text. To change this content, double-click on the element and click Change Content. Want to view and manage all your collections? Click on the Content Manager button in the Add panel on the left. Here, you can make changes to your content, add new fields, create dynamic pages and more. You can create as many collections as you need.
Your collection is already set up for you with fields and content. Add your own, or import content from a CSV file. Add fields for any type of content you want to display, such as rich text, images, videos and more. You can also collect and store information from your site visitors using input elements like custom forms and fields.
Be sure to click Sync after making changes in a collection, so visitors can see your newest content on your live site. Preview your site to check that all your elements are displaying content from the right collection fields.
![](https://static.wixstatic.com/media/85cc2a_f4de74ef21394704b324d2614967a55af000.jpg/v1/fill/w_763,h_429,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/85cc2a_f4de74ef21394704b324d2614967a55af000.jpg)
Drawing Train Tracks
By using the Create Button, as well as buttons for tracks 1-6, the player can draw tracks on the screen. The player can also press the corresponding 1-6 keys or the C key on the keyboard to do this as well.
Tracks cannot be drawn on top of each other, on top of stations, or on top of resources that spawn onto the screen.
The Destroy button or pressing D on the keyboard allows the player to delete tracks from the screen.
![Screen Shot 2023-05-09 at 8.20.53 AM.png](https://static.wixstatic.com/media/85cc2a_8e7250577b3445439903954e483d92af~mv2.png/v1/fill/w_256,h_226,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screen%20Shot%202023-05-09%20at%208_20_53%20AM.png)
![](https://static.wixstatic.com/media/85cc2a_1c9bb7ccf4014b9da3b86540de2ce520~mv2.png/v1/crop/x_21,y_270,w_1627,h_907/fill/w_469,h_261,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/85cc2a_1c9bb7ccf4014b9da3b86540de2ce520~mv2.png)
Cell System
By using some math and logic in the HTML5 canvas object, I made my own cell system for the game. This was necessary to display modular pieces like the train tracks, as well as spawn the natural resources onto the board
Train movement
As the train moves forward it follows the path provided by the train tracks, turning where the tracks turn. This is done by first having the train "read" the track on the same "cell" that it occupies. Then the train evaluates whether it should stay at the current orientation or rotate along with the track.
![](https://static.wixstatic.com/media/85cc2a_256ef69633644a788d8ee1c9cece230e~mv2.png/v1/fill/w_415,h_254,al_c,lg_1,q_85,enc_avif,quality_auto/85cc2a_256ef69633644a788d8ee1c9cece230e~mv2.png)
![](https://static.wixstatic.com/media/85cc2a_517b1fa242134c368c03a81af7fee8e8~mv2.png/v1/fill/w_320,h_314,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/85cc2a_517b1fa242134c368c03a81af7fee8e8~mv2.png)
Natural Resources
Natural resources will spawn on the field and can be mined up to keep the train running for longer. However, they can also spawn on top of train tracks, which may cause the train to crash if it runs into the natural resource. In order to make sure that the game is fair to players, I programmed it so that natural resources can't spawn