Creating a Console Game Screen Using HTML5

 After some time off from playing with this code from tutorials 1-3, I decided to go back and optimize and clean up a few things before we move on. This edition of retrogamecode we're going to look at creating a dynamic game console interface using HTML 5 canvas object.

I ripped out a lot of code for the examples to stand on their own and be clear to you the student or the developer.

Here are the basic javascript code snippets for creating a game console using the HTML5 canvas object.

You can download the entire HTML source file from github: create_html5_canvas.html

Source Listing 1. Defining a Super Nintendo Game Console in Javascript

// game console variables
var gc_canvas;                    // 'gc' 'game console'
var gc_context;                   // gc context
var gc_width = 592, gc_height = 448;   // game console viewport width and height Super Nintendo parameters
var gc_light_lavender = '#f0eef9';  // color light lavender
var gc_lavender = '#f0e7f9';   // color lavender
var gc_black = '#000000';    // color black

We're creating a Super Nintendo console of 592 pixels wide by 448 pixels high. The var gc_canvas is our game console HTML5 canvas object. Let's take a look at the javascript function we'll use to do this.

Source Listing 2. Dynamically creating an HTML5 canvas object in Javascript

// function: initGameConsoleCanvas
// description:
//    initialize the canvas element
//    and the drawing context API 
//    components.
//
function initGameConsoleCanvas( width, height) {
    
    // create the HTML5 canvas object
    gc_canvas = document.createElement( 'canvas' );   
    gc_context = gc_canvas.getContext( '2d' );
    
    // attach the canvas to the HTML document object
    document.body.appendChild( gc_canvas );
    gc_canvas.width = width;
    gc_canvas.height = height;
    
}
// END initGameConsoleCanvas(width, height)

We're going to need to a function to clear the screen for animation. And for right now we just want to throw something out on the screen to see if our game console canvas is working. The following function erases the game console canvas and fills the screen black.


Source Listing 3. Erase the HTML5 canvas object using Javascript

// function: clearGameConsoleCanvas
// description:
//    erase the game console using the 
//    specified color.
//
function clearGameConsoleCanvas(width, height, color) {
    // Fill the screen with a black background
   gc_context.fillStyle = color; //'#000000';
   gc_context.clearRect(0, 0, width, height);
   gc_context.beginPath();
   gc_context.rect(0, 0, width, height);
   gc_context.closePath();
   gc_context.fill();
}
// END clearGameConsoleCanvas(width, height, color)

Putting it all together, we call the document.onload() function to initialize the game screen as the web page initializes.

Source Listing 3. Erase the HTML5 canvas object using Javascript

// initialize on document load
window.onload = function() {

  // create the HTML 5 game console canvas 
  initGameConsoleCanvas(gc_width, gc_height);
  
  // initialize the game console canvas to black
  clearGameConsoleCanvas(gc_width, gc_height, gc_black);  
        
}
// END window.onload()

That's basically it. I hope by stripping out all the code the initialization of the game console canvas makes perfect sense to you. Ideally, all the game console code will be moved out to a javascript source file and then sourced in from the HTML file. We will do this in the next tutorial as we move along.

Have fun scripting! Go make some games.