Extending Google's Blockly Games Pond

Hello, this is Hatya.

Blockly Games is a practice site for programming beginners developed by Google, featuring a variety of challenges. One of these is Pond.

Pond is a game where four ducks shoot projectiles at each other on a board, and the last duck standing wins. Three of the four ducks are equipped with pre-programmed code, and the goal is to rewrite the program for the remaining one to play.

Official Site

https://blockly.games/pond-duck

The Drawback of the Original Pond

In the official Pond, you cannot change the programs of ducks other than the Player. This means you cannot pit your program against programs created by others.

To solve this, the purpose of creating "Pond Extended" was to allow for modifications to other ducks' programs and adjustments to the number of ducks.

The Final Product

First, here is the finished product:

Execution screen of Pond Extended. Following the original design, the battle screen is on the left, and the editor/settings area is on the right.
In addition to making other ducks' programs editable, several features have been added compared to the original Pond:

• Changing the board and duck colors
• Changing the board size
• Changing Tick Speed and FPS
• Adding/removing ducks
• Code formatting functionality
• Game pausing
• Saving/loading game settings and programs
• Dark mode support

(Details to follow.)

On the other hand, a downside is the lack of block-based editing. While the original Pond supports both Blockly-based and JavaScript-based editing, Pond Extended only supports JavaScript editing.

By the way, the finished product is publicly available, so please feel free to try it out if you are interested.
https://pond-extended.hatya.dev
The repository is also available on GitHub.
https://github.com/hatya-mouse/pond-extended/

Technology

Pond Extended was built primarily using Next.js and TypeScript.

Code execution with JS-Interpreter

To give each duck an equal amount of thinking time and to execute code containing infinite loops like while (true) without freezing, I used JS-Interpreter, just like the original Pond. I adopted a structure where each duck is allocated an equal number of steps per tick (determined by the Tick Speed setting) for execution.

Text editor

I used CodeMirror for the text editor, enabling syntax highlighting, line numbering, and autocomplete.

CodeMirror's layout configuration was quite tedious, and I struggled with issues like the editor pushing out its parent element instead of scrolling. Ultimately, I forced a solution by manually setting the height like this:

.cm-editor {
    height: calc(var(--editor-height) - 36px);
    width: 100%;
}

Main Added Features

Based on the original Pond, I uniquely extended the following features:

Duck customization

Duck customization screen
While the original Pond only allowed editing the Player's code, Pond Extended allows you to freely edit any duck other than the Player. I also added features for changing duck colors and initial coordinates, as well as adding/removing ducks.

Game settings

Pond Extended execution screen with the settings menu open
I made it possible to change the FPS and Tick Speed (number of steps executed per second). I also enabled adjustments for board size, background color, duck eye color, and duck beak color, allowing for battles on vast boards that were not possible in the original Pond.

Editor features

Editor screen
I added a broom button 🧹 to format the code. Dark mode is also supported.

Data saving and loading

Data save/load buttons at the top left
I enabled downloading and saving all board and duck settings, as well as duck programs, to your local PC. This way, you can reuse complex configurations with multiple added ducks once they are saved.

Conclusion

While the original Pond has fantastic gameplay, it felt a bit lacking as a competitive game because you could only change your own duck's program and the UI was relatively dated.

With Pond Extended, by enabling duck customization and significantly expanding the settings, I believe it has reached a quality where it is quite enjoyable as a programming practice environment.

If you have any requests or bug reports, please feel free to let me know via GitHub Issues.

Thank you for reading until the end.