The Last Days of JS13kGames 2021

 One of the things I didn't mention in my previous blog posts is that I intended to take 8 days of the contest period off from technology; thus I spent days 19 to 27 in the mountains without connectivity generally relaxing, having fun and doing nothing too intellectual. This was part of the plan but I was a few days behind on the plan when I left. Most especially I had not completed the AI work on the game which was supposed to be done some days before - the AI was pretty dumb and it was hard to understand the game well by playing against it.

I did write the tutorial text and some design but probably only spent 3 hours on it in the week away.

When I returned from the wilderness with just three days to go the game looked something like this...

At this point I've got a long outstanding feature list and am already looking pressured. But first the AI needs to work - it took a bit more effort than I expected (and a lot of time to tune the heuristics) but I got to a place by the next day where it satisfied my goals:

• That it could beat an experienced player in it's most analytical modes.
• That in less clever modes it would play in a human-like manner - make mistakes; play towards positions that aren't that great etc.

Here is an example of it two versions of the AI playing against each other.

With just a day or so to go I needed to tidy up the interface and test it thoroughly both as a game and as a piece of software that had to run on multiple browsers, multiple os's and multiple device forms. This is when I had my worst moments on the project...

The responsive aspects had some problems (especially around more square devices like an iPad) but those I have extensive experience with and understand (media queries for the win) and had expected.

It looked terrible on Safari (flickering z-order/backface issues) but it worked and I had expected issues on Apple software (aren't there always). 

On Firefox the perspective view simply didn't work - after some investigation I found that google and Mozilla's interpretation of the transform-style property and how it is inherited are somewhat different. With a sigh of relieve I explicitly implement the transform style at each level of the DOM and then I get perspective....but it totally failed in multiple ways - the graphics wasn't appearing clicks weren't working and the lobby systems were unreliable. I thought I had played nice with the browser specs and had no expectation of having problems with a highly standards-aligned browser but could see  I had some serious problems that were going to need both research and restructuring of the graphics systems.  

It took me 5 hours of hard slog that I didn't really  have - several different aspects of the implementations of 3D transforms on svg and DOM elements are understood differently by these browsers. Firefox (probably the more standard compliant browser) really doesn't like CSS-level transforms on svg path elements -  mostly around ambiguity about the transform origin for such an element. I had to introduce several more divs for 'rigging' to manipulate the svg leaf-shapes efficiently in a cross-browser way.

Then I resolved most of the Safari issues; for me this is a slow and inefficient process as I only own oldish apple hardware for testing and don't use it on a day to day basis. But I made it work on my mac-mini and my test iPhone 6+.

After that I fixed all the little things (message if the mobile screen is portrait; messaging around players bailing out of multi-player; messages for empty lobby  and about 10 other small features).

Then just setting up standard board sizes and starting positions. I decided on 4 boards for the game - the boards are different each time but the size and initial elements on the board (but not their position) defines the courtyard. I played around for a few hours with peice collectiosn until I found something I mostly liked for each board.

Finally I changed the colour schemes a lot as I had always planned and finally had a release version.

You can play that from the js13k site here. 

I submitted this game to all three categories I wished to (desktop, mobile and server) a few hours before the close of the contest  - in time is good enough but not how I like to play.

I've taken a brief look at some of the other games and the standard seems exceptional this year - between the skills that various players have developed and the new emerging browser technology it gets more difficult and competitive every year. As always there are several competitor who have shown amazing design and technical skills that I am in awe of. 

This was my 8th year I have competed - it's been a hard year for me but I'm proud of the outcomes.

JS13k - lobby and front facing Code - Day 17

 I've been working day by day adding small features to my game. It has a lobby with a pretty menu system and the first audio effects and the look of the game is slowly improving.

 Currently all modes work (p1 vs p2 local or offline and p1 vs computer) on the heroku server - this version will remain live in the long term (but has no multi-player online)

A quick screen shot of the lobby area:

This is what the game is looking like:

JS13k - A Weekend of Appearance - Day 15

 Halfway through the contest time and I had a weekend day to do nothing except JS13k so I thought I would pay some attention to the appearance of things - I knew the graphics would be very important to make the game come alive for people so I did an intense 14 hours work on the graphics of the game.

This is what I started with at 1pm on Saturday:

This version which you can play here is from about 6pm with proper cracks, animated piece movement and stems:

by about 9pm I had the growth  animations going and pretty randomly distributed leaves 

much later that night I had tiles drawn properly and better cracks:

Still not totally happy with the graphics but I think it looks better and the hard code issues are cracked.

Current compressed version is about 48% of the 13k.

JS13k - Almost an AI - Day 13

 Today I have my first attempt at a dumbish AI player which has turned out very well - it's simple heuristic is getting dominance of the board in the very short term as defined by the score.

Here is a version where you can play 7 x 7 against it - a board where something like this AI sometimes does okay.

So I'm getting close to my goals for a game that can be played between players together or apart and would support single player vs AI opponents but I need a menu system and intro page to structure all these pieces. 

Currently the project is running at 4880 bytes compressed - about 37 percent of the allowed package size. That's okay I think - there will be space enough to make it pretty.

Js13K - multiplayer progress - Day 12

 I've had a busy few days in which I have redesigned the look of my 'path game' a little; also introduced scoring and win conditions. You can see the latest version here set up for two players on one device.

I've played the game against myself on one device for a few days and am happy with the dynamics - I have a few small tweaks in mind but nothing breaking.

I've also completed the work on cloud based play - this Heroku instance allows connection across the cloud to other players and co-ordinates the play between players on different devices. You can play with that here (by going into multiple tabs or using different devices/browsers). Very happy with this implementation atm and don't think it will need much further work.

Source code for my development can be found here if anyone needs a sample for a turn based multiplayer game.

Path Game - Day 7 - JS13k Games

 I have been working on the dynamics and game play of my strategy game. I currently have a working version of the game for 2 human players on one device which still has rough graphics but allows you to play out the basic dynamics of the game, it looks something like this:

This is 9x9 board with the game about half way. A simpler board might look like this near the beginning of the game.

Currently there is no way of keeping score and no end condition. I was thinking of using a simple % domination of the space to keep score and ending the game if no move is possible for either side or one side gets 60% domination.

You can play the game (with yourself or another person physically with you) here:

Starter Game 7 x 7 

Standard Game (I think) 9 x 9

Hectic Mode 11 x 11 (mostly just testing to see if this grid size can work on mobile)

The release compressed zipped size is currently 3673 bytes - 27% of the 13kb.

The Path Game - js13k - Day 4

 The contest has begun and my plans continue afoot. The announced theme for 2021 is 'Space' which should be easy enough for my ideas - I'm thinking 'a space in the sun' or winning space within a small area (as opposed to outer-space).

I have some CSS code to draw the game pieces in a grid and have started the code analysis of the board at least so that it can select legal positions for the next move.

All the graphics is needs to be replaced but it's looking alright here.

A 'Path Game' - My js13k ideas - 1 day to go

I've played a lot of the board game Carcassone over the last few months - a brilliant and famous game. I am especially enamoured of the 'road game' in Carcassone which involves building roads from the tiles and claiming a segment of road as your own.

Carcassone looks like this:

So the road pieces (white roads on green) are essentially a lot like the this game which has existed in various forms throughout my life. (this is the windows 95 version called 'pipedreams')

So these concepts are at the centre of what I want to do: a square grid on which you place tiles to form pathways(like Carcassone and pipes); a turn based two player game where your paths can block and interfere with your opponent's (like Carcassone); which has targets you needs to reach (like pipes); and which you can see the future tiles (like pipes) and plan for them.

Additionally I'd like the game to be fair in the sense that no luck element is involved and both players have equal opportunities (Carcassone is not like this) - thus a symmetric board and identical draw of new tiles for both players. 

Tomorrow we get to know the theme and can start thinking about how it might look (branches of a tree; neurons in a brain; roads or really anything that has paths and flows).

Plan to start the programming in earnest next week.

JS13k Some old Audio Code - 5 days still start

 Audio is an important aspect of games but I often fail on it as there is never enough time and space (in the 13k) left for good audio by the end of a project.

This year I want some good simple sound effects - nothing fancy. I went back to my 2018 entry ice-x and extracted the audio system I used there as it was tiny and flexible.

It allows you to make effects by defining a volume and frequency envelop in time and allowing concurrent sounds. Simple to use and very small in bytes I made a repo here demonstrating how it works - there is a live copy where you can hear the sounds it makes

The Lobby for js13k multiplayer - 6 Days to go..

 I've been working a little on the js13k server technology and created a demo that is the minimal version of a multi-player lobby in which strangers can meet online and play together. It also provides a communication and ending facilities for a two player game.

I plan to use this as a major piece in my own js13k entry this year. The multi-player features and associated displays and server side co-ordination are currently 2k / 13k - something like 15% - that seems like a lot to me so I'd like to cut it down.

Here is the public sample code I wrote for the lobby which is running here if you want to play with it.

JS13k Time 2021 - Starts in 8 days

 Once again the new js13k contest will be starting in a few days, for those  unfamiliar with the contest the rules are pretty simple: write a game in entirely one month that runs in a browser and ensure that all resources, code and graphics can zip to 13kb - yep that's 13 312 bytes. Not a lot.

In the previous years of the contest I have entered both desktop and mobile games but I have never entered the server category which allows communication between players through the cloud.

This year I plan to focus on this functionality and hope to enter the game into the server, desktop and mobile categories. I have a turn based strategy game in mind and I intend to support:

• one player vs AI (various levels of skill)
• player vs player on a single device
• player vs player online

I'd really like to include:

• A nice lobby where players can select an appropriate opponent for multi-player
• Very pretty relatable graphics using SVG and CSS
• Simple soundscapes
• Good tutorial
• an AI that plays in a human-like manner

So the challenge is pretty hard in terms of the 13k code size - specifically the extra lobby display code,  the server side messaging logic and the AI system aren't going to leave a lot of space for the actual game.