Blog

Cuboids on a Div

| Published by Callan Milne on October 6, 2020 11:14 am
Cuboids on a Div Making a city simulator game with plain old JavaScript.

Making a browser-based city simulator game with HTML, CSS, and plain old JavaScript.

This is part one in a series about computer game development.

Over the coming weeks, I’ll be developing a browser-based city simulator game using nothing more than HTML5, CSS3, and plain old JavaScript.

Last night I took the first steps of the journey: planning object types, and drawing up diagrams.

I prefer to hand-write my notes while designing software. I find it’s very calming to design software with a pen and paper, before I start writing any code.

Buildings

After a few moments of thinking, I came up with a Building class. Imagine a Building as an empty piece of land, which will have a structure on it.

<Building>
  Size:
    X: 2
    Y: 2
  Position:
    X: 100
    Y: 100
  Render()

In the initial design, the Building class has two properties, Size, and Position. It also has one method, Render.

We’ll use Size as how much space it takes up on the grid, and Position as where it found on the grid. We’ll build out the Render method later, but basically it’ll be what actually creates and places the div, and any cuboids (or other shapes).

Cuboids

Coming up with the building class, made me start to think about how the buildings would be rendered. This lead me to think about a plain HTML Div element, rotated using rotate3d, with cuboids placed on top. Leading me to my next class, a Cuboid.

<Cuboid>
  Length: 100
  Breadth: 100
  Height: 100

The Cuboid class has three properties, Length, Breadth, and Height.

The User Interface

Just to clear the image, I decided to do quickly, and very simply, draw a wireframe of the user interface.

Simple User Interface Wireframe

The user interface features a ViewFinder, StatusBar, Toolbar, and I’ll call the grid, a Plain.

Let’s Review

So I started by coming up with some object classes, and a basic user interface wireframe. It looks pretty standard, like almost any other game with a ViewFinder, Status Bar, and Toolbar. The object classes are being kept very simple at this stage.

Here is the final sheet from the first design session.

Scratch Pad: Cuboids on a Div – City simulator game design session #1