Posts

Showing posts from 2019

How to make a html5 breakout game in JavaScript

In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo.Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later.First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented byif(position.x  + radius < 0) // bounce
if(velocity > 0) return; // moving
velocity *= -1; // change directiondirection is only changed if the ball tries to move  beyond the zero position.
i have touched a bit on …

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 …

How to resume a suspended web audio api context

A quick JavaScript function to maneuver around Google chrome, Firefox and safari web audio context suspension state
Starting from chrome v{xx} Google chrome, Mozilla Firefox and Apple safari web browsers automatically suspend html5 web audio contexts if they start without any user gesture they can only be resumed by a user gesture it's a measure implemented to improve overall user experience.
context.state property stores the state of the audio context when it's suspended it's value changes to "suspended". in order to implant a maneuver first check the state of the context should it be suspended literate an array of events for each add an event listener on the document body and remove the event if one of the events has been triggered by the user
let unlockAudio = function(context) {     if (context.state === 'suspended') {         let events = ['touchstart', 'touchend', 'mousedown', 'keydown']         let unlock = function() {     …

How to change sound volume using webAudio api gain property

A quick function to adjust html5 web audio gain value or "audio volume" sound gain value is controlled by creating a gain node and setting it's gain value 0-1
where 0 is the lowest value 1 is the maximum gain value 
let sound = function sound(url, params) {     // params     let loop = params.loop;     // make a context     let audioContext = new (window.AudioContext || window.webkitAudioContext)();     let source = audioContext.createBufferSource();
    let gainNode = audioContext.createGain()         gainNode.gain.value = 0.05 // sound percentage
    let request = new XMLHttpRequest(); request.open('GET', url, true);
    request.responseType = 'arraybuffer';     request.onload = function() {             audioContext.decodeAudioData(request.response, function(buffer) {             source.buffer = buffer;             gainNode.connect(audioContext.destination)             source.connect(gainNode)             source.loop = loop;             source.start(0);
        }, (e) =>…