Wednesday 17 August 2022

js13k2022 - The Devil's 4-Play - Completed!

 I have run out of my very short time scale for this years js13kgames contest. My final product is called "The Devil's Four-Play" and I am quite happy with it. This new version has some nice flavour text and pretty icons with a 'hellish' theme.

You can play it online using this link.

I am very happy with the outcomes of the project - it has all the features I imagined and looks polished. 

I only used 8kb of the 13kb available and did the project in about 20 hours of development.

This was an intense 4 day project for me because of my travel plans.

Good luck to all the other competitors and use your remaining days well! 

Tuesday 16 August 2022

js13k2022 - The Devil's 4-Play - Almost there!

 Had a few more hours after work yesterday to put some pretty graphics and theming on the game and added some new sounds effects.

I've decided to called it 'The Devil's 4-play' and themed it much more hell-like.

Here is the latest version and the long term archive version here.


I still need some extra copy on the intro and help sections; and I'd like to make the sounds better - but I have to finish in the next 24 hours so we'll see how it goes.

Sunday 14 August 2022

JS13k - day 2 - almost done

 In my super short time scale js13k this year I've spent much of the time I've got available but with some  solid hard work today I've got a good ai playing at various levels of skill.


Have enhanced some of the graphics and made it a bit friendlier. My current live version at https://js13k-fourplay.herokuapp.com/ . Archived version on github (no online play).

Tomorrow I want to display moves and scoring more clearly, take a look at how to theme and colour the game and work with the audio a bit.

JS13k 2022 - First Version

 Been hard at work in these first hours - here is a first working version of my tic-tac-toe like strategy game.

I started with my own turn based game starter project , took a lot of inspiration from this codepen and did a bit of work with css perspective to get a working (mostly responsive) board layout.

The AI player doesn't work yet but you can play another human online or locally and the rules are explained (somewhat) and implemented. The latest working version is served for multiplayer here. Local  play only archive of this code is here


A long days work - tomorrow I program the AI player.


Saturday 13 August 2022

JS13k 2022 - Starts Now

 For several years I've enjoyed the js13kgames contest and have consistently created an entry.

This year is a bit difficult as I am adventure travelling for 27 out the 31 days of the competition thus I intent to submit my final product 4 days from now and find out about the results when I return in 5 weeks.

This year I have 10-15 hours of development time over 4 days as opposed to my usual 30 - 50 hours over 4 weeks. So that is a constraint.

This year I'd am planning a simple turn based game with these features:

  • Play 2 human players on one device; play two human players online; play vs AI
  • Have varied and worthy AI opponents
  • Abstract strategy game
  • Some simple audio effects
  • Glowing, tron-like, neon 80's appearance
The contest is started - the theme is 'Death'. 



Wednesday 10 August 2022

JS13k Warm Up 2022

 This years js13k will be a bit different for me - I am travelling for most of the 30 days and it seems unlikely I'll spend more than 15 hours on the project before I leave. However I've completed every year for 7 years and would like to do a simple respectable entry.


Last year I spend a significant portion of the time setting up infrastructure for my project which was required to play in three modes (player vs player local; player vs player online and player vs AI) and the UI interface to support these modes including a lobby where on line players can meet.


In order to avoid this overhead this year I decided to do a public prep framework with some basics required to support a two player turn based game. This new structure makes extensive use of async/await to make the game code very readable; it also support basic audio support; a menu system;js13k style sockets support for multi-player and some basic DOM manipulation code.

The 'game' in this example is a trivial game where each player takes a turn and the game ends after 5 turns.

A running installation can be found here  and the code is publicly available here.




Monday 13 September 2021

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.

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.
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.