Posts

Showing posts from August, 2020

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

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 screens Here'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 Stars Here'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 interesting So i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figure In 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 canvases 1. foreground layer 2. background layer Clouds 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 hoops Last reso

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 assets On 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 way So far i've been watching everyone showcasing their amazing and creative works under the hashtag #js13k on Twitter For 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 (vect