I like this idea a lot! I think that there are a few small details that would improve the user experience if you're looking for feedback.
1. Please please please apply `user-select: none;` to everything within the circuit canvas. Almost more often than not I would end up dragging text that had been highlighted rather than any of the actual gates or inputs.
2. Having to switch between 'select', 'wire', and 'delete' modes is a bit cumbersome.
3. Absolutely no progress seems to be saved on navigation or page reload. I've completed the first level several times and if I go anywhere else or reload after completing it, the site shows zero levels completed and shows the tutorial again.
That's a cool idea for a game, but the UX feels quite unintuitive and unpolished to me which discouraged me from playing past the first couple of levels. A few suggestions, if I may:
- You should be able to drag/drop elements from the sidebar onto the canvas
- Wiring shouldn't be a separate tool, and you should be able to drag/drop wires instead of having to click on the two endpoints separately
- You should be able to delete the currently selected gate with the delete key, and the "delete" button in the toolbar should delete the currently selected gate instead of it being a separate tool
- There's not enough contrast between the grid pattern and the background of the canvas
- There seems to be some problems with moving overlapping components
- There's no way to move around the canvas
- The progress doesn't seem to save and there's no way to skip levels
I went through Turing Complete up to a working CPU and found it incredibly fun. I then went on to build my own RV32I (simplest RISC-V instruction set) core in Verilog - if you keep a simple single-cycle design, it doesn’t end up being super complicated and not a ton of code. I’d recommend the exercise for anyone wanting to learn about how CPUs work.
Also, for people interested in this type of thing, look up Ben Eater’s 6502 videos. Wiring up a 6502 (old microprocessor) to ROM and RAM on a breadboard; later he builds a “world’s worst video card” - more like a VGA display output card, still pretty cool.
Cool idea, but having to switch between select and wire makes this incredibly tedious to use. Just use wire mode from dragging from a connection and let people draw "away" a wire from a connection and let go to delete it? Would be much more intuitive imo.
Very nice. Tips: You don't need the different design states (select, wire, delete) just have one and make it work contextually. Also remove the play button. Just have it always playing.
When I played through this last year it was surprising how much came back to me from the courses I took in college, and haven't touched at all in 20 years.
Would be nice to be able to skip the first levels, because learning an AND gate is not necessarily what everyone needs as first steps, regarding their skill level.
I built ChipBuilder to make computer architecture more approachable through interactive puzzles.
You start with basic logic gates like AND, OR, and NOT, then gradually combine them into adders, multiplexers, memory, an ALU, and eventually a complete CPU. Once you've built the hardware, you can write assembly programs that run on the processor you created.
The game is inspired by courses like Nand2Tetris, but everything runs directly in the browser with a visual circuit editor, simulations, and progressively harder challenges.
I like this idea a lot! I think that there are a few small details that would improve the user experience if you're looking for feedback.
1. Please please please apply `user-select: none;` to everything within the circuit canvas. Almost more often than not I would end up dragging text that had been highlighted rather than any of the actual gates or inputs.
2. Having to switch between 'select', 'wire', and 'delete' modes is a bit cumbersome.
3. Absolutely no progress seems to be saved on navigation or page reload. I've completed the first level several times and if I go anywhere else or reload after completing it, the site shows zero levels completed and shows the tutorial again.
That's a cool idea for a game, but the UX feels quite unintuitive and unpolished to me which discouraged me from playing past the first couple of levels. A few suggestions, if I may:
- You should be able to drag/drop elements from the sidebar onto the canvas
- Wiring shouldn't be a separate tool, and you should be able to drag/drop wires instead of having to click on the two endpoints separately
- You should be able to delete the currently selected gate with the delete key, and the "delete" button in the toolbar should delete the currently selected gate instead of it being a separate tool
- There's not enough contrast between the grid pattern and the background of the canvas
- There seems to be some problems with moving overlapping components
- There's no way to move around the canvas
- The progress doesn't seem to save and there's no way to skip levels
Since I don't see it mentioned here, Turning Complete is also a game along the same lines and really fun. https://store.steampowered.com/app/1444480/Turing_Complete/
I have gotten my nephew into it with some success as well.
That links has an invalid or expired cert.
Forgive me if I'm wrong, but I just can't look at "AI aesthetics" anymore.
3 next clicks in missing a back button
I wasn't able to wire the inputs to the gate, so my career at ChipCorp ended at level 1.
Also it would ne nice to have a level zero where you create the gates from transistors.
The game you're looking for is Turing Complete https://turingcomplete.game/
Want transistor logic? Hard Chip on Steam. Starts you at NMOS and PMOS and lets you build up from there.
-1: build transistor from atoms
-2: ...
:)
(ofc the UI could be more simpler but I've found the wiring)
-4: initiate a Big Bang to generate the spacetime substrate
I went through Turing Complete up to a working CPU and found it incredibly fun. I then went on to build my own RV32I (simplest RISC-V instruction set) core in Verilog - if you keep a simple single-cycle design, it doesn’t end up being super complicated and not a ton of code. I’d recommend the exercise for anyone wanting to learn about how CPUs work.
Also, for people interested in this type of thing, look up Ben Eater’s 6502 videos. Wiring up a 6502 (old microprocessor) to ROM and RAM on a breadboard; later he builds a “world’s worst video card” - more like a VGA display output card, still pretty cool.
To the author of this; Are you able to make it save your progress so you can come back and continue playing?
Cool idea, but having to switch between select and wire makes this incredibly tedious to use. Just use wire mode from dragging from a connection and let people draw "away" a wire from a connection and let go to delete it? Would be much more intuitive imo.
Very nice. Tips: You don't need the different design states (select, wire, delete) just have one and make it work contextually. Also remove the play button. Just have it always playing.
Thank you for the feedback! Will implement it today
I wonder how people go through building such a project without ever hearing about NANDGame or Turing Complete.
For the lazy, here's a link https://www.nandgame.com/
When I played through this last year it was surprising how much came back to me from the courses I took in college, and haven't touched at all in 20 years.
This immediately made me think of nand2tetris.org, but as a game. Is that what NANDGame is?
Yes, pretty much, but stopping at the cpu level (about the first half of the course).
Looks very similar to the GPU game https://jaso1024.com/mvidia/
Would be nice to be able to skip the first levels, because learning an AND gate is not necessarily what everyone needs as first steps, regarding their skill level.
This is cool! I like it! Let's see if I can get past the NAND level!
I got all the way to a Full Adder and got stuck, then lost my progress :/
Doesn’t handle drag and drop on iPad.
I like it, it's fun Why you decided to keep wire button on top ? can't we do something like clicking on the dot will trigger wireing
A good point. I will change it!
you maybe not select accidental but others do:
user-select: none;
Got stuck at the NAND gate level.
Stick with it! Hint: A NAND gate is an AND + NOT circuit. It outputs a 0 when both inputs are a 1, otherwise outputs a 1.
Same, I built a correctly-working AND gate made only of NAND gates but the tests don't pass.
Slop. very janky UI
wasn't there recently another game that was starting with mosfet/pmos?
I'm not sure if this is what you mean, but Zachtronics has a minigame in its game "Last Call BBS" where you have to build ICs at the silicon level.
www.zachtronics.com
I built ChipBuilder to make computer architecture more approachable through interactive puzzles.
You start with basic logic gates like AND, OR, and NOT, then gradually combine them into adders, multiplexers, memory, an ALU, and eventually a complete CPU. Once you've built the hardware, you can write assembly programs that run on the processor you created.
The game is inspired by courses like Nand2Tetris, but everything runs directly in the browser with a visual circuit editor, simulations, and progressively harder challenges.