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.
My take on the popular Snake Game
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.
<body>
<canvas height="500" width="500"
style="border: 2px solid #000;"
id="ctx"></canvas>
</body>
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")
.getContext('2d');
ctx.fillText("HOLA BRAVE NEW WORLD!", 150, 250);
To make font larger you can do like ctx.font = "30px Calibri"
.
#html5-game-developer #coding #programming #arcade-games #javascript