Archipelago - Huge Refactor!steemCreated with Sketch.

in utopian-io •  2 months ago

A huge refactor of the Archipelago game code with one eye on the implementation of a multi-player option.


Archipelago is my first coding project. Since the first commit ten months ago growth has been organic, with no overriding structure or plan, other than a general idea of the game I am trying to produce. Each new feature has pushed the project forwards but also increased the complexity of the code. The largest files have swollen to thousands of lines with many features intertwined.

The development has been a learning experience. My understanding of Javascript has (slowly!) improved. Going back over older code I can see areas that could be simplified, new tricks that could be implemented, as well as the potential for increased consistency in style.

Now that I am looking ahead to a multi-player version of the game it has also become clear that I need to give more thought to the code structure. Running a single game on separate computers will require a separation of computation, as well as the ability for each machine to update the game state based on information sent from other players. The "move" will become the fundamental driver for updating the game and each move will need to be clearly and consistently defined, whether generated by a human player, computer opponent or pirate.

Based on the above, over the last month I have undertaken a refactor of (almost) the entire code. The project now follows an object-orientated design. More details on all of this below.



The repository for Archipelago can be found here. Background details of the project and the road-map can be found in the read-me file.

For a full view of the current state of the game see my github-hosted page. Please note that the game is not yet complete - you can see current progress and test functionality and play the basic one-player version but there is still plenty to be added!

New Features covered by this Contribution

Below are some of the main design changes made in the refactor:

Object-oriented programming approach

Some of the features that I am aiming to introduce will require many instances of each item to be available at once. For example I am currently looking at:

  • a landing page with an introductory story based on a journey across a number of different maps;
  • a help page with an index of the pieces showing how to make the different moves; and
  • a multi-player option with potentially many games being processed at once.

This requirement seems to lend itself to an object-oriented programming approach.

Javascript has (at least) three ways to implement object-orientated design:

  • Object Constructor and Prototype Inheritance (ES5);
  • Classes (ES6); and
  • Factory functions.

After a little research I came to the conclusion that each of these approaches could work with my project. The ES6 classes and the ES5 Constructor / Prototype approaches seem similar, with many guides describing the ES6 change as "syntactic sugar" sprinkled over the ES5 method. Factory functions, which simply use normal functions and Javascript's inherent flexibility to create new objects, are favoured by many online reviewers, with one reason being stronger encapsulation.

In the end I decided to go with the ES5 approach. As I'm still learning I tend to favour the core underlying methods (e.g. pure Javascript in place of code libraries) and (to me at least) this choice feels closest to the heart of Javascript programming.

I have implemented the following constructors as part of an object-orientated approach:

  • Game - Each new game.
  • Move - Each move made. Moves will be central in development of the multi-player game. The idea is that in future a player will be able to receive a move made from another computer, without any of the intermediate code, and the game will (check and) update accordingly.
  • Board - The game board. This is mainly to produce the board array which defines the state of the game.
  • Piece - Each new piece object within the game board array.
  • BoardDisplay - The graphics of the board, including all the canvas layers and tiles.
  • PieceSVG - The graphics of each tile on the board display.
  • BoardHolder - The surrounding border for dashboards and buttons.
  • IconSet - The goods icons.

Some of these, such as Game, Move and Piece, are new code, designed for the new code structure. Others, such as Board, are rewrites of existing code to an object-orientated approach.

I believe that this approach has also led to code which is clearer in structure and more understandable.


The key data use in the game is now aggregated in a separate file. This includes:

  • the board layout and starting pieces;
  • the piece definitions;
  • the team players.

All of the methods relating to the board layout have been rewritten to simplify the board creation process.

This will make it much easier to redefine the board, to set up testing for particular issues, and to create the boards on the landing page / help pages.


The main.js script previously included all kinds of set up methods and global variables as well as all the game logic for human player moves. The script has now been separated into its various constituents. Set up code is included in each object constructor. There are now three files for game logic:

  • human.js
  • automove.js - for computer opponents
  • pirates.js

Code changes

The code changes for the refactor can be found here:

Proof of Work Carried Out

This is the full url to my github account:

Contact / Contribute

That is all for this update. If you have any queries please drop them in the comments or contact me on discord.

Have fun!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • This is for sure a very educational project for you and also for other. Keep educating trough your choices and explanation of them.
  • Great article, but you forgot to add images. Games are perfect eye candy, springkle some in your posts.
  • That's a monster loop if I've ever seen one! Are you scanning the board?
  • Please make smaller commits in the future, that helps with separation of concerns.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on
Chat with us on Discord.


Thanks @helo!

Yes, the loop scans the board array, finds forts, scans a 1-tile grid around the fort, excludes diagonals, checks the tiles are on the board (since forts may be at the edge of the board), checks the tiles are sea, and if so creates a harbour protected by the fort!

There's a lot of this kind of looping in the code. Now that I have the Piece constructor I may think about ways to use the piece itself to find harbours on tiles next to it, which may be cleaner.

Thanks for the review.


Thank you for your review, @helo! Keep up the good work!

Hi @miniature-tiger!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 9 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 6 SBD worth and should receive 228 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,

@miniature-tiger You have received a 100% upvote from @steemguardian because this post did not use any bidbots and you have not used bidbots in the last 30 days!

Upvoting this comment will help keep this service running.

Hey, @miniature-tiger!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support!
Simply set as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord

Vote for Utopian Witness!