to make an .io game
note: this is not nearly finished, and not nearly tested either: view at your own risk
🌴 🌴 🌴 🌴 🌴 🌴 🌴 🌴
- leaderboard -
- death screen
- test everything properly
- e2e
- update readme with descriptions of major features etc
- webpack for node
- error checking
- catch websocket connection failures
- update loops with map/filter/reduce
- refactor & rewrite server
- setup game rooms properly
- multiple servers / CoreOS & Docker
- Jenkins & Docker / other CI
- Server setup automation
- select best server based on geo location
- better state management
- react menu / setup for menu expansion
- select skins
- remove players client & from gridSize
- canvas optimisations
-
missing square when player joins
-
find safe area to start at
-
check collisions -
-
second player capture area bug? -
-
Socket lag in firefox when run on droplet
-
fix performance hit with flood fill
-
double speed
-
setup grid & server
-
start ticking
-
clients connect and are setup, basic info is pushed back to them
-
push ticking updates to all sockets in open game rooms
-
clients respond with movements, players & grid kept updated
-
when dead, a player is moved out of the active game room into stasis
notes
var cssColours = [ '#f5a3a3', '#ed5e5e',
'#15a7e4', '#62d1ff',
'#7d62ff', '#9985f9',
'#d156ff', '#e6a2ff',
'#ff61a7', '#ff9ac7',
'#ff7257', '#ff9f8c',
'#efa158', '#ffc793',
'#c4ff5a', '#daff97',
'#8fff76', '#b4ffa3',
'#57ffcc', '#8dffdc',
'#53f5e9', '#96fff7' ]
// var req = express.connection // var ip = req.headers['x-forwarded-for'] || // req.connection.remoteAddress || // req.socket.remoteAddress || // req.connection.socket.remoteAddress;
--drawing tiled images (skins?)
preload png images
// var images = [] // function loadImages (image) { // var img = new Image(40) // img.src = 'img/40x50head.png' // images.push(img) // img = new Image() // img.src = 'img/tile1.png' // images.push(img) // }
draw tiles
// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); // img is 70x70 // square is 35x35 // var img = images[1] // var clipX = (col % Math.floor(img.width / squareSize)) * squareSize // var clipY = (row % Math.floor(img.height / squareSize)) * squareSize // canvas2d.drawImage(img,clipX, clipY, squareSize, squareSize, col * squareSize, row * squareSize, squareSize, squareSize)
not clearing rect anymore, just drawing a grey one on top
// canvas2d.clearRect(0, 0, canvas.width, canvas.height)
floating K.O text on death
// var player = getPlayerByID(userID) // var pos = playerHeadPosition(player) // canvas2d.font = '30px sans-serif' // var x = pos[0] * squareSize // var y = pos[1] * squareSize // canvas2d.fillStyle = '#1b1a1d' // canvas2d.fillText('K.O.', x + 5, y + 5) // canvas2d.fillStyle = cssColours[player.colourPrimary] // canvas2d.fillText('K.O', x, y)
function preRenderBackground () { // backgroundCanvas = document.createElement('canvas') // backgroundCanvas.width = canvas.width // backgroundCanvas.height = canvas.height // var ctx2 = backgroundCanvas.getContext('2d') // ctx2.fillStyle = 'grey' // var x = gridSize * squareSize // ctx2.fillRect(-10, -10, x + 20, x + 20) // ctx2.clearRect(0, 0, x, x) }