Showing posts from 2019

making an html5 breakout game tutorial

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 :)
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
there after create directory
we'll use it to save the images and audio static files
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 for communicating information back and forth
when the user opens the game index.html 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'GET', url, true); // Setting the responseType to arraybuffer sets up the audio decoding request.responseType = 'arraybuffer'; request.onload = function() {   // Decode the audi…

particles system html5 canvas

particles are small entities such as a smoke particle , blood or water particle just to give you an idea the first step of particle implementation is a particle manager its role as the name states is to be the super particle instead of deploying a single smoke the particle manager is like a bunch of smoke you can modify the code a few tweaks and it works well on any HTML5 canvas game
well use fire as the particle manager
producing flames whenever needed

I attached a gist with the code

Craters.js micro game engine

craters. js is a micro game engine it started out as a game.i later  decided to make it a game engine in case someone might want to avoid repeating the process of making a game from scratch it's minimal and very lightweight expanding the framework is easy using plugins for sound and collision detection portability is the main goal of the framework I'm always trying to simplify the framework
simple to use micro game framework lightweight and minimal weighing just 2kb zipped and minified includes all you need to get a game up and running in a few lines of code, a loop , update , render. which makes it simple to modify and hackable framework. leaving enough room for the game logic. suitable for js13k games competition or anyone trying to build a game using a skeleton framework as opposed to complex alternatives