contest

• no external libraries or services
• zip package size below 13 kb

web platform

categories

Spacefield League

Multiplayer online ball game

Game Features

• seven different vehicles to play with
  each with his own stats
• statistics and votes for each player on end-match
• training room
• custom rooms
• matches from 1vs1 to 5vs5 players
• spectator mode
• room chat
• full-screen

architecture

server

• node.js sandbox - node vm - no modules
• websockets - socket.io

room

• state: match, players, ball, team, stats
• receive client events: update player state
• every 100ms: update state & send patches

room state

patches

client

• html, css, js
• each entity in the state = div element
• every 100ms: receive patches & update state
• then update data attributes & css variables
• then execute animations, play sounds

client updates

1. user press a key
2. websocket sends an event
3. server update player status
4. server update game status
5. server sends a patch to clients
6. clients move the dom element

client problem

missing client predictions

css variables

clip-path

css filters

animation api

speech

sounds

jsfxr library

music

Web Audio API

viewport relative units

• vw viewport width
• vh viewport height
• vmin viewport minimum
• vmax viewport maximum

build

• gulp
• babel-minify - minify js
• gulp-csso - minify css
• gulp-htmlmin - minify html
• gulp-zip - create the zip

deploy

heroku - auto deploy github repo

compression

• use small properties names and css class names
• inline functions used one time
• remove not very useful functionality
• reduce texts length

what went bad

• show game potential asap
• multiplayer should be enjoyable even for two players

what went good

• joined nice and helpful community
• game completed!

result

• 2nd server category
• 60/70 desktop category

thanks