Adding Gameover and introduction screen on HTML Canvas

-

Its been four days since my last status report.

Ever since then I've been struggling trying to glue myself together and harness that for something gamedev.

I've reorganized pretty much everything about the structure of the code by splitting chunks of it into bite sized modules wherever possible  and apart from that I'm proud i brought my "404" and "Gameover" sketchings to life

Am looking forward to implementing main characters of the game soon.

And am yet to announce everything about gameplay publicly to everybody.

Here's Progress so far


And gameover screen



Comments

Post a Comment

Popular posts from this blog

Ways of iterating Object properties in JavaScript

-
For Objects the ways of iterating their properties are not that plentiful as with Arrays. take for instance we have an object of dogs and cat characteristics const pets = { {name: " Jenny ", eyes: "brown"}, {name: "max", eyes: "blue"} } To iterate through the characteristics using for loop for (pet in pets) {     console.log(`${pets[pet].name} has eye color ${pets[pet].eyes}`} } Alternatively you can use objects.keys and object. entries for (element in Object.entries(elements)) }
Read more

JavaScript intro to classes

-
Classes are objects 'functions which introduce inheritance parent child relationship in JavaScript it promotes code reusability which reduces the amount of code in a JavaScript application. JavaScript class decelerations start with keyword class proceeded by class name with a class body having a constructor along with methods for instance class human {     constructor(name) {          this.name = name;          this.gender = null;     }     great() {         return "Greetings " +         (this.gender == "male") ? "mr " : "mrs " + this.name     } } Child classes are created by adding the keyword extends followed by the parent class name and parent class methods can be called using the syntax super.+"method name"(parameters) class man extends human {   ...
Read more

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(...
Read more

How to set content disposition headers for express nodejs apps

-
Image
In express nodejs apps you can force the user agent "browser" to rather download content instead of displaying or attempting to render given content within the browser. In this example assuming you're using express.static to serve content pass an Object as second argument to express.static function An Object with configuration parameters; const config = { setHeaders: res => res.set('Content-disposition',  'attachment') } In your code replace "path/to/media/" with the path pointing to the static content. app.use('/media/', express.static('path/to/media/', config)) To test try accessing content at /media/*
Read more

JavaScript math methods

-
JavaScript comprehensive list of all JavaScript Math methods Math.round () {type} method {parameter} {Number} {description} It returns a given number rounded off to the nearest integer. ie Math.round(0.6251) // returns 1 or Math.round(1.7252) // returns 2 Math . pow () {type} method {parameter} {Number}, {Number} {description} It returns a given number raised to the power the exponent. ie Math.pow(2, 5) // returns 32 or Math.pow(7, 2) // returns 49 Math.sqrt () {type} method {parameter} {Number} {description} It returns the square root of a given integer. ie Math.sqrt(25) // returns 5 or Math.sqrt(64) // returns 8 Math.abs () {type} method {parameter} {Number} {description} It returns absolute positive value of a given number ie Math.abs(-10) // returns 10 or Math.abs(52) // returns 52 Math.ceil () {type} method {parameter} {Number} {description} It returns a smaller number which is greater or equal to the given integer. ie Math.ceil(9.87) // returns 10 or...
Read more