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

How to make a static http server in nodejs using express

-
Image
Express is a fast unopinionated, minimalist web framework for nodejs Authored by  TJ Holowaychuk Express is a framework for building robust http servers, single page applications and API's among others. How to create an http server in express Open your text editor and terminal, run the commands below to create a project directory, application file and a landing page mkdir project cd project mkdir static echo "Hello World" > static index.html touch app.js You must have a directory structure as follows; |Project/     |static/         |index.html     |app.js Project directory is the root directory of the application Static directory is where static files, webpages will be stored. index.html is an index page with text "Hello world". app.js is a blank JavaScript file, open your editor and paste the following few lines of code into app.js import express from 'express' const a...
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

JavaScript introduction to variables

-
JavaScript is a dynamically typed programming language variables are declared using the following format var `variablename` `value` instead of int integer = 100 In JavaScript a variable can accommodate any typeof value ie a variable can be assigned numbers, strings, functions, and objects. among modern browsers or in "strict mode" variables can be declared in an alternative way using const and let keywords. variable's defined this way's values can not be changed once they have been assigned. ie they are referred to as immutable. var name = "John" var lastname var year = 2020 // var age var male = true console.log( typeof name) // string console.log(typeof lastname) ///undefined console.log(typeof age) // undefined console.log(typeof year) // number console.log(typeof male) // boolean const pi  = 22 / 7 pi = undefined; // sometimes this can raise a typescript error // assignment to constant variable in strict mode console.log(pi) // 3.142...
Read more

JavaScript canvas introduction

-
Introduction Probably next monday I will post a how to make a snake game clone in a few lines of JavaScript code post don't miss it out subscribe to my email newsletter! What is a canvas I'm sure you've heard of the term somewhere. canvas through their "2d" context allow drawing 2d graphics using a simple JavaScript api You can use a canvas to draw text , lines simple shapes, and images canvas can also be used as a renderer for JavaScript built html5 games "that's were we're going" Example on canvas it draws a rectangle on a canvas context black color by default <html> <canvas id="canvas"></canvas> <script type="text/javascript">         var context = canvas.getContext("2d") // stroke a 100px square at 0, 0 context.rect(0, 0, 100, 100) context. stroke () </script> </html> Save and open it in your browser you should see a square on the top right corner of your bro...
Read more

How to make a html5 breakout game in JavaScript

-
In this tutorial i will walk through the  process of developing a simple breakout game in JavaScript using html5 canvas I'll be using craters.js a compact html5 game engine. in every step i will first explain the procedure in a less technical method later I'll include the snippets of the actual game , a link to the github repository and a live working demo. Game world is 2d space with zero friction and zero gravity in order to avoid applying acceleration to the entities periodically maybe this will be changed later. First entity is a ball an entity with zero friction that upon colliding with an obstacle such as a block, paddle or the the screen boundaries bounces back in the opposite direction the bouncing from left to the right side of the screen is implemented by if(position.x  + radius < 0) // bounce if(velocity > 0) return; // moving velocity *= -1; // change direction direction is only changed if the ball tries to move  beyond the zero position. i have t...
Read more