Posts

Showing posts from September, 2019

making an html5 breakout game tutorial

Image
in this tutorial I'll illustrate how to make the classic breakout game.
I'll use images from gameartguppy and craters.js a compact html5 game engine easy to understand ofcourse tl;dr see you at the codding part :)
firststepfirst
create a directory, name it whatever you want preferably panda-breakout if you have npm installed enter into the directory to setup a freash project and install craters.js run
npm init -y npm install craters.js
in the root directory if the project there should be a package. json and node_modules, cool good to go!
now create the following files in the root directory of the project
game.js
index.html
there after create directory
media
we'll use it to save the images and audio static files
steptwoCoddingpart
fire up your favorite editor and open game.js file we created earlier
add the following code you can clone the craters.js repository on github if you're in a hurry
'use strict'; // import what we needed for the game import { Game, S…

Nodejs backed wack a mole Game

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

suspended web audio context resuming

quick tip on how to resume suspended audio context instance by automatically attaching user gesture event listeners window.unlockAudioContext = function unlockAudioContext(audioCtx) { if (audioCtx.state === 'suspended') { var events = ['touchstart', 'touchend', 'mousedown', 'keydown']; var unlock = function unlock() { events.forEach(function (event) { document.body.removeEventListener(event, unlock) }); audioCtx.resume(); }; events.forEach(function (event) { document.body.addEventListener(event, unlock, false) }); } } You can call the function immediately after creating an audio context e.g var AudioContext = new AudioContext; unlockAudioContext(AudioContext);

adjusting volume HTML5 web audio

code samples on how to adjust the volume of web audio using the gain node useful for reducing noise and loud sound output i included comments to show a bit of guidance on how it works. sound = function sound(url, opt) {     var loop = opt.loop || false; // Create an AudioContext instance for this sound var audioContext = new (window.AudioContext || window.webkitAudioContext)(); // Create a buffer for the incoming sound content var source = audioContext.createBufferSource(); // source got replaced with gain node here to accommodate volume adjustment var gainNode = audioContext.createGain() gainNode.gain.value = 0.05 // 20 % noise, // Create the XHR which will grab the audio contents var request = new XMLHttpRequest(); // Set the audio file src here request.open('GET', url, true); // Setting the responseType to arraybuffer sets up the audio decoding request.responseType = 'arraybuffer'; request.onload = function() {   // Decode the audi…