Version v0.1

Hi everyone. I’m making and Idle Survival game where you manage an island. There are villagers to whom you can assign some tasks, like gather wood, rocks or even build houses. The game works in cycles, called moons, at the end of each moon, you have to feed the villagers working for you. So make sure to assign some villagers to gather food.

Features

• Gather berries
• feed villagers
• Produce woods
• Produce stones
• Create stick from wood
• Build house
• Build shed (increase inventory capacity by 5)

Process

Tools

Engine

I’m making the game with a tiny HTML5 game engine called LittleJS It’s very straightforward, I like working with it a lot. Another thing that I like about it is that it uses node js to join all the JavaScript files together and compress it, so that the game size will be the lightest possible.

UI

For the UI, I choose the best tool I know, CSS. It’s much more simple to design the UI with it. I make the UI and see how my changes are affecting it instantly. It’s great.

Database

I needed a database to store some informations like:

• The tasks
• The quests

For this, I used a tools that is awesome for the job. CastleDB It’s a structured static database. It store it’s content as a json file, which is excellent when working with javascript.

Challenges

Handling button icons

You start a task by clicking on it’s button. You also have the ability to stop the task while it’s running. To do so, when the task is running, I change it’s icon to inform the player that the task can be stopped. I need to change the icon from to But I could not figure out a way to do it purely with CSS. So I had to use javascript to access the DOM and modify the CSS rule to add a rule that change the icon. Basically I gather all the element having the desired class icon-only and add an event listener that change the icon each time it’s pressed.

Lesson learned

Making UI is hard. Even when using dedicated tools like HTML and CSS, it’s still pretty challenging.