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

JavaScript math constants

-
In JavaScript Math is a global object with mathematical functions and constants. Math object is extendible. for instance to make a function to calculate cuboid of a given number. Math['cuboid'] = function(number) {     return number * number * number } or defining a constant Math['some_constant'] = value; You can use your new function like any other function ie console.log(Math.cuboid(3)) // returns 27 console.log(Math.some_constant) // returns value Math.E Euler's constant and the base of natural logarithms; console.log(Math.E) // returns 2.718281828459045 Math.LN2 Natural logarithm of 2; console.log(Math.LN2) // returns 0.6931471805599453 Math.LN10 Natural logarithm of 10; console.log(Math.LN10) // returns 2.302585092994046 Math.LOG2E Base 2 logarithm of E; console.log(Math.LOG2E) // returns 1.4426950408889634 Math.LOG10E Base 10 logarithm of E; console.log(Math.LOG10E) // returns 0.4342944819032518 Math.PI Ratio of the...
Read more

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

Es6 new features summarized round up

-
Escmascript es2017 or better known as es16 is the edition after the famously popular es15, In this edition there are only two new additional features the exponention operator and Array.prototype.includes() function exponention operator ** Operator is a short hand method used for raising numbers to their power Its syntax is similar to native operators such as '+' Addition and '-' (minus) for subtraction Example usage Initially to raise a number to the power you would need to use math library pow function as; Math.pow({number}, {factor}) Since es2017 you can simplify the operation above down to simply as; {number} ** {factor} Example as; 5 ** 2 // Giving you 25 Array.prototype.includes () Array includes is a feature similar to a pre existing function array.indexof() as compared to array.indexof() array.includes() function notably returns a true  boolean on matched value, and false if value not matched Examples on how to use 'array.includes ()' funct...
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 use canvas context rect method for drawing rectangles

-
canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context Parameters context.rect(positionX, positionY, Width, Height) PositionX specifies the x coordinate at which the rectangle should be drawn at on the context PositionY specifies the y coordinate at which the rectangle should be drawn at on the context Width specifies the width of the rectangle Height specifies the height of the rectangle Stroking and filling the rectangle In order for the rectangle to be actually visible you have to either stroke it or fill it with a color. Stroke Stroking a rectangle means to draw a line that joins all of it's vertices To specify the fill color you should set it and call stroke to draw context.strokeStyle = "#colors" context.stroke() Fill Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color context.fillStyle = "#colors" context.fill() Example context.rect...
Read more