WIP – Machine Shop Simulator

Category: | Posted on:January 27, 2026

Machine Shop Simulator is a prototype management sim game for the browser built with React and the HTML Canvas API. It is a facsimile of a CNC machine shop.

Objectives

  • Build a game instead of a web app
  • Use React
  • Tie in some of the Canvas API skills I’d been using on the Javascript Arcade games.

Development

1/27/2026 – This is finally at a point where it’s shareable, even if it isn’t done. I’d call it halfway there as a proof of concept. There are two major objects that have to interact. The first is the machine and the second is the employee or operator. Basic machine functionality is in and working at this point. You can buy machines. They run and earn money until the break down. Then you can repair or scrap them. The overview menu shows real-time info about the whole shop.

The next step is to establish the array and object class for employees. The plan is for machines to remain idle unless an employee is assigned to it. Each employee with have stats and quirks of their own that modify the base stats of the machine they’re on. Machines will run better or worse depending on the skills of their operators.

I employed some game design tricks that I’ve absorbed through osmosis. I have a centralized settings.js file that controls the core numbers like starting funds, production cycle rate, size of the machines in the grid, etc. Kind of like a settings.ini.

Hurdles

Almost all of this is new. I’m having to rely on syntax reference a lot. I know what I want conceptually though, so I’ve been able to get Lumo to give me constructive replies with regards to manipulating and passing the machine array and object properties around.

For the employees I should be able to do less referencing now that I have the machine class as a model.

Takeaways

Getting to use a lot of concepts that I hadn’t explored in as much depth before.

  • More complex classes and objects
  • Compartmentalizing code into hooks and components.
  • Barrel files!!!
  • Dividing contained logic into /lib
  • CSS modules
  • Using AI assistants to review for best practices and performance
Check It Out
Tags: , , ,

Related Logs

  • NEW PROJECT – Javascript Arcade

    January 14, 2026

    Javascript Arcade is a stylized hub for the JS Canvas projects I’ve been working on. Objective I’m re-working my portfolio and needed more casual project to fill it out. The individual arcade games are pretty similar structurally, so it made sense to wrap them up together into a more formalized package for presentation purposes. There;s […]

    Continue Reading

  • NEW PROJECT – Centipede

    February 13, 2025

    Centipede is a bare-bones facsimile of the classic arcade game of the same name. Objective Continuing my exploration of Game Development with the Javascript Canvas API, I moved onto Centipede mostly by accident. Once again I avoided tutorials in order to try and work through the logic myself. The key goal with this game was handling […]

    Continue Reading

  • UPDATE – Space Invaders

    January 28, 2025

    Quick presentational update to the Space Invaders project. Keep Shields Centered On Hit Shields will now automatically maintain a centered position when hit my an alien missile. I initially thought this was going to involve some math to determine whether the missile hit on the right or left side. I even put together a formula […]

    Continue Reading