Animated sky on HTML5 Canvas

-

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)
Animated sky on HTML5 Canvas
In extended preview i added trees and buildings. (everything is drawn programmatically without using static Images)


Comments

Post a Comment

Popular posts from this blog

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

How to make a Snake Game using JavaScript and html5

-
Image
I compiled stapes to create a game similar to Nokia developed, popular game called 'snake' Snake was first developed by Nokia, programmed in 1997 by Taneli Armanto and published on Nokia mobile devices,  It was introduced on Nokia model 6110, 3310 from 2000 and later the game was rebranded as " Snake Xenzia " Included on later mobile phone models I made a version that is more simplified and more beginners friendly, It's based on the same idea of making a snake that grows as it eats stuff and the score increases as it grows I'm implementing this whole game in pure vanilla JavaScript and a taste of html5 canvas, In this project the canvas is used as a renderer for the game's visual output concepts and initial ideas I got the idea while doing another retro gaming project, i thought it would be good too if i created this game, from start my plan had been simplicity and making this game easy to implement, So to simplify everything i had...
Read more

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

How to create zip archives in nodejs

-
I'm going to compile ways in which you can create archives compressed using zip algorithm in nodejs or a similar JavaScript runtime. node-zip is an open source zip archiving utility authord by daraosn and folked from jszip capable of compresding files into a zip archive and extracting zip archives in JavaScript. node-zip is available on npm you can install it in your terminal window by typing; npm install node-zip example usage const  zip = new require('node-zip')() zip.file('test.file', 'John Swana') const data = zip.generate({base64:false,compression:'DEFLATE'}) console.log(data) How to unzip a zip archive const zip = new require('node-zip')(data, {base64: false, checkCRC32: true}) console.log(zip.files['test.file'])
Read more