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 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.
<body>
<canvas height="500" width="500"
style="border: 2px solid #000;"
id="ctx"></canvas>
</body>
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")
.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
2.10 GEEK