Couple of weeks ago I built a clone of the arcade classic snake, Retro Snake. Today we’ll talk about some basic concepts involved in building HTML5 and JS games.

Image for post

My take on the popular Snake Game

HTML Canvas

HTML Games are fun way to practice your HTML canvas tag skills as well as JavaScript concepts.

<canvas> is an element that has height/width and you can draw anything inside.

  • Canvas is like a box with a border. Inside of the box you can make another box, circle, line and text. You cannot do anything outside of the canvas.
  • Canvas is defined inside the body.
    <canvas height="500" width="500" 
    style="border: 2px solid #000;" 

Adding Text with JS to Canvas

getContext() is used in JS and ‘2d’ to specify as two-dimension.

With fillText() you can add text, in specific x and y coordinates, and get something like this:

var ctx = document.getElementById("ctx")

ctx.fillText("HOLA BRAVE NEW WORLD!", 150, 250);

Image for post

To make font larger you can do like ctx.font = "30px Calibri".

#html5-game-developer #coding #programming #arcade-games #javascript

HTML5 + JS Games — An Intro to the Canvas Element
2.10 GEEK