Posts

Featured Post

FlappingBird JS13K Games

Image
FlappingBird is a Mobile side scroller game where the player controls a bird, attempting to fly between columns trees without hitting themDevelopment of this game started out when i was attempting to draw perfect clouds programmatically on a canvas i later added a few more clouds (Something's missing) add moon, stars,  buildings and also add Gradients and for the games character i settled on a bird (using Sprite sheet obtained freely from opengameart) add more them and animated everything. FlappingBird is a single player arcade-style game in which the player controls the bird, which moves persistently to the right. The player is tasked with navigating the bird through pairs of trees that have equally sized gaps placed at random heights. the bird automatically gravitates and only ascends when the player taps the touchscreen or spacebar. Each successful pass through a pair of trees awards the player one point. Colliding with a tree or the ground ends the gameplay. If a player success…

Adding Gameover and introduction screen on HTML Canvas

Image
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 lifeAm 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


Animated daylight on HTML5 Canvas

Image
It's Fourth day and i made improvements by adding new background Obstacle for daylight notice the wind turbines replacing trees, the sun replacing the moon and the disappearance of stars from the Sky.However it's more like day three extended++ (plus plus) trust me i've added nothing new i spent most of the time sketching introduction screens and gameover screensHere's progress so far.

Animated sky on HTML5 Canvas

Image
So far I've added a new bunch of clouds, some stars and a phase changing moon'As the number of Clouds increased i cursed them into an Array and created two more Obstacles the Moon and StarsHere's progress. (Extended preview) In extended preview i added trees and buildings. (everything is drawn programmatically without using static Images)

How to draw clouds on HTML5 Canvas

Image
So basically clouds are shapes with a flat bottom and 3 curves on top (two on the sides on bigger one on the middle) As i was creating a JS13K Game i wondered around googling if i'd find something as simple as that and 'i couldn't find anything interestingSo i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figureIn my first attempt i discovered that "the base is something similar to css pills, so there's rectangular shape with roundish edges and a circle overlay on top". Putting that into vanilla JavaScript i resorted to creating two canvases1. foreground layer
2. background layerClouds are drawn using a solid color formed by four shapes 3 circles and a rectangle then using some alpha the resultant image is then overlay-ed onto the primary canvas.Here's an example
It's a sneaky way todraw clouds so they got to be a cleanway todo this without Jumping extra hoopsLast resort was to strik…

JS13K Preparation

JS13K Is an annual gamejam (hackerthon) held on the 13th of August and participants are given 30 days to created a game using JavaScript less than 13KB in size minified (optional) and zipped including assetsOn the 13th of August a 'secret' theme is announced and everybody must create a game inline with it.Last years competition was so epic. it was themed "back". And as a beginner i dropped two entries "watchmyback" and "firedrone" interpreting the theme in my own waySo far i've been watching everyone showcasing their amazing and creative works under the hashtag #js13k on TwitterFor today i'm only going to create a new directory for my project, init a git repository and stuff.

Snake monochrome (JS1024)

JS1024 is an annually held code golfing competition where you're basically required to create something creative in 1024 bytes or less of raw "JavaScript/HTML/WebGL"

I participated for JS1024 2020 competition with my First entry titled "Snake monochrome" Originally inspired by the old Nokia game going by the same name "Snake" which i used to play as far back as 2007-2008

Another entry making it Second is named "Tetris monochrome" i was compiled to do this game as a dare from my Girlfriend on June 6 the "Tetris 1984" anniversary

Third one is F1-racer it's inspired by my bestfriend who wasn't impressed with how i hooked up controls on "Tetris Monochrome" so he requested "i modify controls a bit", and i improved "input/output" by adding smooth touch input to it as requested

Snake game contains two entities. The Snake and the Apple, the Snake is an Object with properties position (vector), velocit…

How to restore PostgreSQL database dump

They'res a magnitude of methods to restore PostgreSQL dumps for a typical plaintext dump "psql" can do a pretty neat Job In few words a PostgreSQL plaintext dump is nothing but a corpus embodied with SQL statements, which when executed tables are created data gets retrieved, inserted and restored.So assuming you have a backup dump saved somewhere on your system open your terminal.And type;psql -U {{username}} < {{dump.sql}}That's it you've imported a database dump

how to dump a postgresql database using from the terminal

PostgreSQL is a relational database management system and arguably the best database management around. postgreSQL comes with utilities used to manipulate databases from the terminal "psql" being the most popular utility I'm sure you've read somewhere or used "psql"dumping "backing" databases is done using PostgreSQL's pg_dump utilityIn your terminal type;
pg_dump <database name> > <output>For instance to backup a database named "books" to a file named "books.sql" do;pg_dump "books" > books.sql
HowtoexcludedatabasedatafrombackupsTo exclude database data from your output file you should include "-s" flag in your commandpg_dump -s "books" > books.sql

Introduction to webshare API (navigator.share)

Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps
webshare API is supported on most updated mobile browsers Including Google chrome for Android
Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function.
For a webshare request to succeed you must supply at lest one of the parameters
navigator.share returns a Promise upon being called "upon
navigator.share({
    "url": document.location,
    "text": "I'm an example",
    "title": document.title
})
.then(resp => console.info("Successfully shared"))
.catch(errors => console.error(errors))