John swana

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 by if(position.x  + radius < 0) // bounce if(velocity > 0) return; // moving velocity *= -1; // change direction direction is only changed if the ball tries to move  beyond the zero position. i have touched

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

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(

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;