Js13k game jam multiplayer wack'a mole game concept

-

--- due date not met yet
I'll share my idea of the classic
game wack a mole for js13k so space is crucial.
I'm using my micro game engine node-craters.js for nodejs
my first plan is
split the engine take out the loop and update leave the task to the server , using socket.io for communicating information back and forth
when the user opens the game index.html socket.io is loaded later the game.js file containing rendering and canvas. rendering basically nothing much and initial loading text is displayed below there's some functions for socket communication ,
once the page is loaded the game emits a start command telling the server am ready let's play with an optional argument room id vital for playing a game with a friend.

the server gets the start command and additionally checks if there's a room id so that the user or player joins an existing match or else  create a new room and emit the users details to tell them their id and room id ,
if there enough people in the room blow the whistle emit 'gameon'

when the client gets the initialization event that information is saved somewhere for future reference just in case .

when the client gets the gameon event it clears the loading screen and deploys our hero the mole and what determines the location of the mole comes through an event from the server every a few seconds or so

Comments

Post a Comment

Popular posts from this blog

Introduction to webshare API (navigator.share)

-
Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))
Read more

How to use canvas context rect method for drawing rectangles

-
canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context Parameters context.rect(positionX, positionY, Width, Height) PositionX specifies the x coordinate at which the rectangle should be drawn at on the context PositionY specifies the y coordinate at which the rectangle should be drawn at on the context Width specifies the width of the rectangle Height specifies the height of the rectangle Stroking and filling the rectangle In order for the rectangle to be actually visible you have to either stroke it or fill it with a color. Stroke Stroking a rectangle means to draw a line that joins all of it's vertices To specify the fill color you should set it and call stroke to draw context.strokeStyle = "#colors" context.stroke() Fill Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color context.fillStyle = "#colors" context.fill() Example context.rect
Read more

Hello world application in Kotlin

-
Kotlin Hello World Application To get started open your editor and type the snippet of code below fun main() {     println("Hello, World!") } in kotlin main is the entry point function of an application fun keyword is used for declaring functions it acts like function does in JavaScript. Compile your application into jar kotlinc hello.kt -include-runtime -d hello.jar Execute your application java -jar hello.jar If everything went well you should see "Hello World" output from your terminal
Read more

JavaScript es6 modules import, export

-
Java scrips modules are libraries that export importable properties. With modules you can create reusable independent separate components es6 modules should provide one or more exports. exports can be ie a function or an object take for instance you created a math library you can use the syntax below to create a module. // saved as lib-math.js export function cube(num) {     return num * num * num } To make use of lib-math above in a simple calculator function you can import it as // saved as calculator.js Import {cube} from "./lib-math" function calculator(num) {     return cube(num) } // calculator(5) // returns 125 // calculator(3) // returns 27 // calculator(2) // returns 8 Alternative ways to export You can export a function as in the example above or you can export functions as an object assuming you have more than one export {cube, sqrt, .....} Ways to import a module importing modes is done by the follow keyword following by from proceeded by the re
Read more

rgb to hex conversion in JavaScript

-
A handy function to convert rgb colors to hex in JavaScript parameters: red, blue, green values. returns a hex string which is 7 characters long including the hash function toHex(r, b, g) { return "#" + [r, b, g].map(param => { var hex = Number(param).toString(16) return (hex.length < 2) ? '0' + hex : hex }).join('') } For instance  toHex(0, 0, 0) // returns #000000
Read more