Ikzer’s Blog

Manga List design and requirements

2023-09-12T20:30:00+02:00

Initialize Next JS Project for the Manga List project

2023-09-12T16:30:00+02:00

Breakout V1 Part III: The Blocks

2022-11-19T19:30:00+01:00

Let’s continue building the Breakout game, the game in which you destroy blocks by bouncing a ball against them. We left the game in a basic state, with a ball bouncing endlessly on the walls of the canvas, and a minimal library of funtions to help refactor code. This time we will talk about the blocks.

The Paddle

First o all we have to add the paddle that we will control, where the ball should bounce to not lose the game. First we define its dimensions:

var paddlex;
var paddleh;
var paddlew;
 
function init_paddle() {
 paddlex = WIDTH / 2;
 paddleh = 10;
 paddlew = 75;
}

paddlex is the center point of the bar, it will be useful later. Then we modify the paint() to draw the bar and make the ball bounce on the superior edge of it (not below), and that it only bounces below if it’s touching the paddle:

function paint() {
 clear();
 circle(x, y, 10);
 
// Draw the paddle
 rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);
 
 // Check boundaries to bounce
 if (x + dx > WIDTH || x + dx < 0)
 dx = -dx;
 
if (y + dy < 0)
 dy = -dy;
 else if (y + dy > HEIGHT) {
 if (x > paddlex && x < paddlex + paddlew)
 
// If it's inside the paddle we change direction
 dy = -dy;
 else
 // If its outside the bar, we stop the animation and end the game
 clearInterval(game_loop);
 }
 
 x += dx;
 y += dy;
}
 
var game_loop = init();
init_paddle();

FOr starters, on line 6 we draw the rectangle from the middle point paddlex with the dimensions we defined previously.

Between lines 11 and 21 we introduce the “magic” so the ball bounce on the paddle and stops if it falls outside. On line 8 we see the condition to bounce on the left and right walls:

if (x + dx > WIDTH || x + dx < 0)

If the new x position is bigger than the WIDTH or less than 0 we change the direction.

We did the same on y before:

if (y + dy > HEIGHT || y + dy < 0)

[breakoutv1-2] But this time we only want it to bounce if it touches te top wall, so we remove the condition for (y + dy > HEIGHT) on line 9, leaving just (y + dy < 0) to make it bounce, and introducing another condition for the bottom boundaries since we need to make more checks before.

If the ball its about to fall from the bottom wall, we check it its position on x its inside our paddle (x < paddlex + paddlew). If its inside that interval, we make it bounce changing the direction of dy, and if it’s not it means it’s outside the paddle so we lost the game and we have to stop the animation.

To stop the animation we need two things. First, with clearInterval(game_loop) we stop the setInterval() that we create on init(). But to clear that particular interval we need to pass it to clearInterval, in this case using the game_loop variable. As we set up init() to return the setInterval(), we store it:

var game_loop = init()

And that’s what we pass to clearInterval().

Movement

We have two of the main elements on stage. Let’s make them interactive. As I said, we will use the keyboard as well as the mouse to move the paddle, which moves only in one dimension (on the X axis), which makes things a lot easier.

This time the movement needs to be constant, unlike last time, so it’s not enough if a key has been pressed: we need to know if it’s still pressed to keep the paddle moving. To do that we have to follow a few stpes, and we will use a little jQuery magic to ease things out:

Know if a key has been pressed
Move the paddle while it’s pressed
Know if a key stopped being pressed
Stop the paddle when it stops being pressed

First of all, we store the state of the pulsation in two variables (left and right), assuming they are not pressed:

rightDown = false; 
leftDown = false;

And to not repeat code everywhere, we create two functions, onKeyDown() and onKeyUp() to change the state of said variables when needed (toggle true and false), and then bind the functions to the browser events via jQuery:

// Activate leftDown or rightDown if hte left or right arrow keys are pressed
function onKeyDown(evt) {
 if (evt.keyCode == 39) rightDown = true;
 else if (evt.keyCode == 37) leftDown = true;
}
// And deactivate them when not
function onKeyUp(evt) {
 if (evt.keyCode == 39) rightDown = false;
 else if (evt.keyCode == 37) leftDown = false;
}
 
// Bind these functions to their corresponding events
// that will trigger them when they are pressed
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

Once we have detected the key pulsation, we need to move the paddle accordingly (on the paint() function):

function paint() {
 clear();
 circle(x, y, 10);
 
 // Move the paddle if left or right are pressed
 if (rightDown) paddlex += 5;
 else if (leftDown) paddlex -= 5;
 
// Draw the paddle
 rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);
 
 if (x + dx > WIDTH || x + dx < 0)
 dx = -dx;
 
if (y + dy < 0)
 dy = -dy;
 else if (y + dy > HEIGHT) {
 if (x > paddlex && x < paddlex + paddlew)
 dy = -dy;
 else
 clearInterval(game_loop);
 }
 
 x += dx;
 y += dy;
}
 
var game_loop = init();

Here in the lines 5 to 7 we update the x position of the paddle by checking the right and left movements variables before drawing its rectangle, then draw it normally.

I’m refactoring some code now to introduce the init_paddle() inside of init(), since we just need to initialize the position of paddlex once, as the others are constants and can be defined as globals.

For the mouse movement we need to work a little bit. First, we need to know if the cursor is inside the canvas, for which we use the variables canvasMinX and canvasMaxX, that gives us the left and right boundaries positions on the screen. We declare them as globals and initialize them on init():

canvasMinX = $("#canvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;

For canvasMinX we get the pòsition of the left wall of the canvas in relative to the left of the window via the offset() method of jQuery, that gives us the positoin of an object relative to the document. The position of the right will be left plus the width.

The, as we did with the keyboard, we create the helper onMouseMove() function:

// Move the paddle if the mouse is inside the canvas:
function onMouseMove(evt) {
 if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
 paddlex = evt.pageX - canvasMinX;
 }
}
 
// We bind the mouse movement function to the browser event
$(document).mousemove(onMouseMove);

We pass this function to the event manager evt, it will check the position of the mouse on X (evt.pageX) and if it’s inside the canvas we change the position of the bar to where the mouse is (only on X). Finally we bind it via jQuery like before.

Summary

With this we have the basic interaction and a working ball and paddle. Next comes the blocks.

Index

Breakout V1 Part II: Refactor and Movement

2022-11-05T19:30:00+01:00

Movement

Let’s continue. For now we have drawn a static ball. It’s time to move it. FOr starters we initialize the position and create an init() function to have the initial state of the game and the update interval that will call the future paint() function that will draw the content and make the actual movements:

var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var ctx;
 
function init() {
 ctx = $('#canvas')[0].getContext("2d");
 return setInterval(paint, 10);
}

x and y are the initial position of the ball in the canvas, in this case it’s the middle. dx and dy are the velocity in both axes, that will dictate how much the ball will move in both directions.

The paint() function now has to draw the ball and make it move, so it has to redraw everything in every frame:

function paint() {
 // Clean the canvas
 ctx.clearRect(0,0,300,300);
 // Draw the canvas
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, w, h);
 ctx.strokeStyle = "black";
 ctx.strokeRect(0, 0, w, h);
 
 // Draw the circle
 ctx.beginPath();
 ctx.arc(x, y, 10, 0, Math.PI*2, true);
 ctx.fillStyle = "black";
 ctx.closePath();
 ctx.fill();
 x += dx;
 y += dy;
 }

Starting on line 3 we see the clearRect() function with which we delete all that was drawn on the canvas previously. Then we move the canvas initialization and the circle draw instructions inside paint(), but this time instead of using a fixed position we use the variables we created just before.

On init() we defined a setInterval() that will call this function every 10ms, so in every call everything will be redrawn. To create the movement we created some velocity variables, dx and dy, so in every call we will change de position adding this variables so, for example, if in the first call the middle is on (150,150), on the next call it will be (152,154), then (154.158) and so on. This way every time the frame is drawn the ball will be in a different position, creating the illusion of movement. Trying different values (including negatives) on dx and dy will change speed and direction.

Refactor

We will need to repeat a lot of things constantly from now on so we need to tidy up the code now before it’s too late. We will create functions for the most basic stuff: draw the frame, draw the circle, initialize the game and draw a rectangle, and of course define some variables.

Variables:

var x = 150; // Initial position on X
var y = 150; // Initial position on Y
var dx = 2; // Velocity on X
var dy = 4; // Velocity on Y
var WIDTH; // Width of the frame
var HEIGHT; // Height of the frame
var ctx;

Initialize everything:

function init() {
 ctx = $('#canvas')[0].getContext("2d"); // Obtain the context from the canvas
 WIDTH = $("#canvas").width(); // Assign the size to the variables
 HEIGHT = $("#canvas").height();
 return setInterval(paint, 10); // Call paint() every 10 ms
}

Draw a circle:

// Draw a circle with its center on (x,y), radius r and a color 
 
function circle(x,y,r,color) {
 ctx.beginPath();
 ctx.arc(x, y, r, 0, Math.PI*2, true);
 ctx.fillStyle = color;
 ctx.closePath();
 ctx.fill();
}

Draw a rectangle:

// Draw a rectangle of width w, height h and its top left corner on (x,y)
function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

Clean the frame:

// Clear the canvas
function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
// Draw the canvas
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, WIDTH, HEIGHT);
 ctx.strokeStyle = "black";
 ctx.strokeRect(0, 0, WIDTH, HEIGHT);
}

Code in action (draw and initialize):

function paint() {
 clear();
 circle(x, y, 10, "black");
 
 x += dx;
 y += dy;
}
 
init();

All the code before paint() shouldn’t be too modified from now on (or at all), it’s kind of a basic library to use when necessary.

Now that we have those in place and a ball that moves in a certain way and falls in a certain place, we need to contain it inside the boundaries of the canvas:

function paint() {
 clear();
 circle(x, y, 10);
 
 if (x + dx > WIDTH || x + dx < 0)
 dx = -dx;
 if (y + dy > HEIGHT || y + dy < 0)
 dy = -dy;
 
 x += dx;
 y += dy;
}

To prevent if from falling or going out of the boundaries we check if the new position will be outside of said boundaries and change the direction before we actually update it. If its current position plus dx or dy is outside (greater than WIDTH by the right, less than 0 by the left, greater than HEIGHT on top or less than 0 on bottom), we change the sign of dx or dy according so the ball goes in the opposite direction in that axis, creating the illusion of “bouncing”. We can also make it accelerate if we increase dx or dy, but that will have to wait until there are levels in the future.

Summary

We have plenty now. We created the canvas and put a ball inside. The ball moves constantly and bounces on all four walls, being this latest the key improvement for now. Next time we will create the bottom paddle, control it and the blocks.

Index

Initialization
Refactor and Movement
The Blocks
Finishing Touches

Breakout V1 Part I: Initialization

2022-10-15T20:30:00+02:00

Breakout is another classic among classics, it has thousands upon thousands of versions and variants in every platform ever and is great to kill some time. And it’s incredibly simple: using a paddle, like in Pong, and a bouncing ball, we change the direction of said paddle to hit the blocks in the top, eliminating them and earning points. That’s it.

Description

We have three elements: a paddle at the bottom that moves horizontally, a ball constantly bouncing in the walls and other elements, and some blocks in the upper half that get destroyed when the ball hits them. The goal of the game is eliminate all of the blocks, and the game ends if the ball touches the bottom wall below the paddle before eliminating all the blocks. This time we will be able to use the mouse besides the keyboard to play.

In this first version, and like I did with Snake, we will be making only the gameplay, without any decorations.

Requisites

Like in the previous game, there isn’t any requisite, graphics, libraries or anything like that, but I’ll be using HTML5 (canvas) and jQuery to simplify things, but it’s not really necessary.

Development

The first thing is create the HTML skeleton where we will make the game, and call the respective libraries. We will be using a 300x300 canvas:

<!DOCTYPE HTML>
<html>
 <body>
 
 <!-- Initialize the 300x300 canvas -->
 <canvas id="canvas" width="300" height="300"></canvas>
 
 <!-- JQuery -->
 <script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
 <script src="breakout1.js" type="text/javascript"></script>
 </body>
</html>

And the corresponding initializations to the canvas in Javascript:

// Get the reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
 
var w = $("#canvas").width(); // Store width and height
var h = $("#canvas").height();
 
// Draw the canvas
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, w, h);
 ctx.strokeStyle = "black";
 ctx.strokeRect(0, 0, w, h);

In line 2 we save a step by saving the context directly, instead of having an auxiliar variable to store the canvas like in Snake. In lines 6 to 10 we simply draw the border of the canvas and paint the background white.

Circle

Nows lets see some new instructions to use with canvas besides filing a square:

// Draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();

In line 2 we see the beginPath() method that initializes a new figure, and closePath() on line 5 closes it. The instructions in between will be the ones that draw said figure. In our case we use arc() to draw a circle as an arc of 2*PI radius, whicih forms a full circle.

arc(x, y, r, sAngle, eAngle, direction) takes six arguments:

x and y are the coordinates for the center of the circle.
r is the **radius.
sAngle is the angle in which the curve starts to draw in radians (0 is the 3 o`clock position).
eAngle is the final angle (2*PI equals to 0).
direction tells it to draw clockwise (0) or counterclockwise (1).

Then we define again the color of the figure with fillStyle y actually fill it with fill() so it’s painted on the screen. If we use stroke() instead of fill(), instead of a full color circle we will obtain only the contour with the designated color.

fillStyle() and fillStroke() can receive arguments in many formats. We can use named colors, or pass it hexadecimal colors like HTML (#FFFFFF), or in rgba(red,green,blue,alpha) format to give it transparency.

Summary

With this we have initialized the project, we have a first view of the game field and the ball that we will be using. Next time we will refactor and make some auxiliary functions, and start moving things!

Index

GameRunner: The Minimal JavaScript Game Framework

2022-10-01T20:30:00+02:00

GameRunner: The Minimal JavaScript Game Framework

GameRunner is a minimal JavaScript game framework that provides a simple and easy-to-use API for creating 2D games. It is based on the Phaser game engine, but it is stripped down to its bare essentials.

Features

Simple API: GameRunner provides a simple and easy-to-use API that makes it easy to create 2D games.
Efficient: GameRunner is highly efficient, making it ideal for games that need to run on mobile devices.
Extendable: GameRunner is extensible, allowing you to add your own features and functionality.

Getting Started

To get started with GameRunner, you will need to install the following dependencies:

npm install gamerunner

Once you have installed the dependencies, you can create a new game by creating a new HTML file and adding the following code:

html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Game</title>
</head>
<body>
<canvas id="game" width="640" height="480"></canvas>
<script src="gamerunner.js"></script>
<script>
// Create a new game instance
const game = new GameRunner({
canvas: document.querySelector("#game"),
});

// Start the game
game.start();

// Update the game loop
game.onUpdate(() => {
  // ...
});

// Render the game
game.onDraw(() => {
  // ...
});
</script>
</body>
</html>

This code will create a new game instance with a canvas width of 640 pixels and a height of 480 pixels. It will also start the game loop, which will run every frame.

Update and Draw Callbacks

The game loop is called twice per frame, once for the update() callback and once for the draw() callback. The update() callback is called to update the game state, and the draw() callback is called to render the game to the canvas.

Rendering Entities

GameRunner uses entities to represent objects in the game world. To create an entity, you can use the createEntity() method.

javascript
// Create a new entity
const entity = game.createEntity();

// Set the entity's position
entity.position.x = 100;
entity.position.y = 100;

// Set the entity's size
entity.size.x = 200;
entity.size.y = 200;

// Set the entity's sprite
entity.sprite = new Sprite("assets/sprite.png");

To render an entity, you can use the drawEntity() method.

javascript
// Render the entity
game.drawEntity(entity);

Events

GameRunner supports events that can be used to listen for game-related events. To listen for an event, you can use the on() method.

javascript
// Listen for the "click" event
game.on("click", (event) => {
  // ...
});

Conclusion

GameRunner is a simple and easy-to-use JavaScript game framework that makes it easy to create 2D games. It is based on the Phaser game engine, but it is stripped down to its bare essentials.

Snake V1 Part III: The Game

2022-09-17T20:30:00+02:00

We left the Snake moving freely with keyboard controls but without any type of boundaries, so we need to add some restrictions: the end of game conditions.

This is, when the snake hits the walls of the plane or with its own body, the game finishes and restart. We also have to add the gameplay elements, like the food that randomly appears and we have to “eat” in order to earn points. We will also add a little score counter to know how many cells we eat.

Game Boundaries

The end of game conditions are really easy. Basically we need to know if the head of the snake is outside the limits of our game space:

// End game conditions
 // Restart the game if it's outside the plane
 if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw)
 {
    // Restart game
    init();
 
    return;
 }

If the x positoin is -1 it means it went off in the left side of the plane, and if it’s w/cw it means it went off by the right. w is the width of the plane and cw is the size in pixels of every cell, as stated in the previous post, so if it is outside the range of cells in the plane, it’s over (w/cw it’s the range, the quantity of cells that we have in the game space, 50 in our case). For y it’s the same, -1 it’s outside at the top side and h/cw it’s outside at the bottom. This is a really basic implementation of what is called collision detection, being a really old method to it (but enough and efficient for this particular case). We do this checks on the paint() function, as we have to check every time the snake is painted, and we need to do it before it gets painted too, to avoid bugs.

Self Collissions

All it’s left is to check self collisions. We need to check if the snake hits itself, as until now it could pass through its own body. For this we create a function that checks this collisions:

function check_collision(x, y, array)
{
// Check if x and y coordinates exists in a cells array
    for(var i = 0; i < array.length; i++)
    {
        if(array[i].x == x && array[i].y == y)
        return true;
    }
return false;
}

And we add this collision condition to the ones we already had:

 // End game conditions
 // Restart the game if it's outside the plane
 if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx,  ny, snake_array))
 {
    // Restart game
    init();
 
    return;
 }

## Restart the Game

The problem is that we have yet a way to restart the game: until now it just worked in the same conditions. To do this we create the init() function that we will call when we restart:

 function init()
{
    d = "right"; // Direction of the movement. By default right
    create_snake();
    
    // To move the snake we use a timer that will call the
    // paint() function every 60ms
    if(typeof game_loop != "undefined")
        clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }
}

The only thing we do here is to refactor and organize some parts of the code we had earlier, like the initialization of the default direction and the creation of a new snake. The direction needs to be global so we declare it outside ìnit().

The most important thing here is the timer game_loop. We haven’t defined game_loop anywhere else so it shouldn’t do anything by default, and the only time we call setInterval() is here. This is done to coordinate the refresh time. Every time the game is restarted, the refresh rate will be constant and won’t depend on the state the game ended after the last collision. This way if the collision happens in an unfinished frame, it won’t interfere with the next game as we clean the state and start over.

The Food

Now the food. We start by, well, creating it:

 function create_food()
 {
 food = {
 x: Math.random()*(w-cw)/cw,
 y: Math.random()*(h-cw)/cw,
 };
 // This will create a cell (food{}) with x and y values
 // and it will create it between 0 and w-cw or h-cw, meaning inside the plane
 }

We create a new cell called food with two fields: x and y, and we fill it with the Math.random() function to get random positions. To limit the range in which those random number are generated we multiply them by the dimension of the plane: (w-cw)/cw (the division is necessary because the cells are bigger than 1px).

We have the cell with its position information. Now it’s time to paint it (inside paint()). To do that, since we have to paint cells constantly (when creating the snake and creating food), it’s time to refactor and create a new function:

function paint_cell(x, y)
 {
 ctx.fillStyle = "blue";
 ctx.fillRect(x*cw, y*cw, cw, cw);
 ctx.strokeStyle = "white";
 ctx.strokeRect(x*cw, y*cw, cw, cw);
 }

We do this by taking the code we used before in the loop to paint the snake inside paint(). So now we have to replace that code with a call to this function in the loop:

function paint() {
 
... previous code
 
// Paint the snake
 for(var i = 0; i < snake_array.length; i++)
 {
 var c = snake_array[i];
 paint_cell(c.x, c.y);
 }
 
... next code
 
}

Now to paint the food we need to do more things. First we create a global variable (var food()) to contain it. Then we create a call to create_food() on init() to create a cell on start, and finally a call to paint_cell() on paint() with the fields of the newly created variable to paint it:

function init()
 {
 d = "right"; // Direction of the movement, to the right by default
 create_snake(); //Create the snake
 create_food();
 
 // To move the snake we create a timer that will call
 // the paint() function every 60ms
 if(typeof game_loop != "undefined") clearInterval(game_loop);
 game_loop = setInterval(paint, 60);
 }

The paint() function with the call to paint_cell()

function paint() {
 
... previous code
 
// Paint the snake
 for(var i = 0; i < snake_array.length; i++)
 {
 var c = snake_array[i];
 paint_cell(c.x, c.y);
 }
 
 // Paint the food
 paint_cell(food.x, food.y);
 
... next code
 
}

Now we need no make the snake eat the food, so we have to modify paint(). Before we had:

 var tail = snake_array.pop(); // Pop and store the tail
 tail.x = nx; tail.y = ny; // Assign the tail the position of the head
 snake_array.unshift(tail); // Insert the tail in the first position

And we change it to:

// If the new position of the head it's the same as the food
// We create a new head instead of moving the tail
 if(nx == food.x && ny == food.y)
 {
 var tail = {x: nx, y: ny};
 // Create new food
 create_food();
 }
 else
 {
 var tail = snake_array.pop(); // Pop and store the tail
 tail.x = nx; tail.y = ny; // Assign the tail the position of the head
 }
 // The snake has "eaten" the new cell
 
 snake_array.unshift(tail); // And now we insert the tail in the first position

When moving the snake, the first think that is calculated is the position of the head. This time, instead of moving it directly, we check. If it’s the same as the food, instead of removing the tail and putting it to the head, we add the new cell, create a new head instead of moving the previous and, of course, create new food. This means assigning new values to tail, not making the pop() to remove it from the end and after that we add it to the front with unshift().

To finish this V1 we will show a little score text that counts the food we eat.

For that we create the variable score:

var score;

Initialize it in init():

function init()
 {
 d = "right"; // Direction of the movement, to the right by default
 create_snake(); //Create the snake
 create_food();

 score = 0;
 
 // To move the snake we create a timer that will call
 // the paint() function every 60ms
 if(typeof game_loop != "undefined") clearInterval(game_loop);
 game_loop = setInterval(paint, 60);
 }

We increment it when we eat:

// If the new position of the head it's the same as the food
// We create a new head instead of moving the tail
 if(nx == food.x && ny == food.y)
 {
 var tail = {x: nx, y: ny};
 score++;

 // Create new food
 create_food();
 }

And we add it to paint() at the end to show the score:

// Paint the score
 var score_text = "Score: " + score;
 ctx.fillText(score_text, 5, h-5);

With fillText() we paint texts on the canvas, passing as arguments a string and the x and y positions of the bottom left corner of the text to show.

And that’s it. With less than 150 lines of code (it can be much less if we want actually) we have a working classic. For now is ugly and don’t have anything fancy what it have is the essential: a game.

This first version was about gameplay. In the future we can add menus, score tables, lives, levels, bonuses, pause, game modes and lots and lots of other things. But they are just superficial ornaments built over this core gameplay we have coded now.

I hope you enjoyed and learnt something useful. See you on next projects!

Index

Introduction
The Snake
The Game

Snake V1 Part II: The Snake

2022-09-03T12:30:00+02:00

It took me to the ninth post to actually start posting code here. But let’s begin.

HTML
Canvas
Defining the Snake
Drawing the snake
Moving
Keyboard Inputs
Index

HTML

To start, the first thing we need to do is create the base HTML5 that we will use, call the jQuery library and initialize the canvas where we will draw the elements. So we create and index.html with this:

```
!DOCTYPE HTML>
`<html>
`<body>
`
`<!-- Create 500x500 canvas -->
<canvas id="canvas" width="500" height="500"></canvas>

<!-- JQuery -->
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>

</body>
</html>
```

That’s basically all the HTML we will need for this project. The rest will be JavaScript only. The canvas element while having its dimensions set will be a blank square for now, since we haven’t draw anything inside, so it’s pretty useless right now.

Canvas

So let’s initialize the canvas blank space. Within the <script></script> tags we type this:

$(document).ready(function(){
 // Initialize Canvas
 var canvas = $("#canvas")[0]; // The canvas variable contains our <canvas> element
 var ctx = canvas.getContext("2d"); // We initialize the 2D context of canvas in ctx
 var w = $("#canvas").width(); // We save width and height
 var h = $("#canvas").height();
 
 // Draw the canvas
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, w, h);
 ctx.strokeStyle = "black";
 ctx.strokeRect(0, 0, w, h);
 
});

Line 1 is JQuery initialization, to execute the code when the document is ready to show, thus not having to call it anywhere else. In line 3 we just store the canvas in a variable.

The first interesting thing comes in line 4: the context. The getContext() method returns an object that provides methods and attributes to draw in the canvas. The canvas itself is that: a canvas, and we need to obtain the tools to work on it. As an argument it needs the context we are requiring: in our case is «2d«. Does this mean we have a “3d” context? Not yet, but there is the “webgl” context that let us work with WebGL APIs, and therefore OpenGL-ES 2.0, but that’s for another moment.

The context provide lots of methods, to obtain information about it’s contents as well as to draw inside it. In lines 5 and 6 we store the canvas dimensions so we have easy access, and then in lines 9 and 10 we draw the rectangle that will have the game. With fillStyle we can obtain or define the style (color, gradient or pattern) with which it will be filled and with fillRect we do the fill with the previously defined style. It receives as arguments the top left (x,y) coordinates and the (w,h) dimensions. In the next two lines we make the same but dor strokeStyle and strokeRect, that define the borders of the rectangle.

Defining the Snake

Now we have to create the snake itself. It will be a cells array:

// Create the snake
 var snake_array; // It's a cells array
 
 create_snake();

And the function to create it

// Fill the snake
 function create_snake()
 {
  var length = 5; // Size of the snake
  snake_array = []; // Initialize the array
  for(var i = length-1; i>=0; i--)
  {
   // This will create a horizontal snake
   // starting at the top left corner
   snake_array.push({x: i, y:0});
  }
 }

The number of cells of the array will be the size of the snake, and we push new elemnts at the end of the array with two properties each: their x and y positions inside the grid. I decided to initialize at the top left, but that’s not necessary.

Drawing the snake

The next step is to start drawing the elements that are part of the game, starting with the snake itself. We call the paint() function to do so:

paint();

And the actual function:

var cw = 10; // The size of the cells will be 10px.
 
function paint()
{
 
// Draw the snake
 for(var i = 0; i < snake_array.length; i++)
 {
  var c = snake_array[i];
  ctx.fillStyle = "red";
  ctx.fillRect(c.x*cw, c.y*cw, cw, cw);
  ctx.strokeStyle = "white";
  ctx.strokeRect(c.x*cw, c.y*cw, cw, cw);
 }
}

We store the size of the cells so we can access it if needed, and ot be able to configure it later. In this function we are loop through all the elements of the snake, storing the in c for easy access, and we draw it as we did with the canvas, calling fillStyle, fillRect, strokeStyle and strokeRect, using as parameters the x and y positions of each cell, and multiplying it by the size of the cell, so in each iteration we are drawing a square of 10x10.

Moving

Now we need to move the snake. The setInterval(function, ms) function in JavaScript calls the function we pass it every ms, as per the second parameter. So in this case we will call every 60 miliseconds the paint function. In the future this will allow us to change levels and speed (which we are not going to do in the v1):

game_loop = setInterval(paint, 60);

The movement of the snake will take place inside paint, since it will need to be repainted constantly:

function paint()
{
 // -- Movement of the snake --
 // The logic is simple: remove the tail from the end and bring it to the front
 // Store the position of the head in nx and ny
 var nx = snake_array[0].x;
 var ny = snake_array[0].y;
 
 nx++; // Increment the value to get the new position of the head
 
 var tail = snake_array.pop(); // Take out the tail
 tail.x = nx; // Give the tail the position of the head
 snake_array.unshift(tail); // Insert the tail in the first position of the array
 
 ... code to paint the snake
 
}

The idea when moving the snake is simple. It has to increase an element in the head and lose one in the tail, so what we do is take the tail to the head. First we obtain the head’s position and increment it, for now on x, to have the position it should have after the movement. Next we pop the tail from the array, so it has one item less than before (the last one), but we store it as tail. The we assign tail the position we previously stored and insert it in the first position of the array, making it the new head.

But why replace the head with the tail in the first place instead of removing the tail and draw a new snake in the new position? Well, basically that’s almost what we do: we remove the tail and draw a new head, but we use the tail element, so we don’t have to create a new object with x and y properties, initialize it and assign it the new position. And also the concept of “moving the tail to the head” makes the snake move as expected, because if we just simply restarted in every frame it will move only to the default direction (since the create_snake function creates a straight array in only one direction). So we don’t restart the snake every time, we just change the position of one of its elements, leaving the rest as they were.

This way we can see the snake moving to the right forever… but leaving a trail. The problem is that we are only drawing a new cell in the position of the head, because our loop does just that: draw, but not “undraw” anything, so we keep adding new cells, but not removing the previous. To solve this we will use a little trick: before we draw the snake, we draw the full canvas again:

Draw blank canvas -> draw snake in new position.

To do this we get the code to draw the canvas inside paint() and execute before anything else:

function paint()
{
// Draw the canvas
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, w, h);
 ctx.strokeStyle = "black";
 ctx.strokeRect(0, 0, w, h);
 
 ...all previous code of paint()
}

For now it moves, but always to the right. We have to add directions restrictions. For that we will store the current direction in a new variable:

var d = "right"; // Direction of the movement, by default to right.

And instead of incrementing the head’s position only on x we consider the direction now:

// Modify the values according to direction the snake is facing
 if(d == "right") nx++;
 else if(d == "left") nx--;
 else if(d == "up") ny--;
 else if(d == "down") ny++;

And the head’s new position:

tail.x = nx; tail.y = ny; // The head's position is assigned to the tail

Keyboard Inputs

Now the snake can move in every direction… by itself. We need to get the keyboard inputs to be able to interact with it:

// Add the keyboard controls
// including a clause that prevents it from going bakcwards
 $(document).keydown(function(e){
var key = e.which;
if(key == "37" && d != "right") d = "left";
else if(key == "38" && d != "down") d = "up";
else if(key == "39" && d != "left") d = "right";
else if(key == "40" && d != "up") d = "down";
 })

It’s simple: we get the input from the keyboard and depending on which key was pressed we assign the direction to the corresponding variable. We check if we are going backwards so it can’t make any weird movements like going to the left while the direction is right.

For now we will keep it here. We have a canvas with a snake that moves as we command it, always inside the plane because otherwise it will dissappear. In the next part we will add the food, the endgame conditions and basic scores.

Index

With this we’re almost done. Next time we will make the fun part, with the eating and points elements of the gameplay. Enjoy!

Introduction
The Snake
The Game

Snake V1 Part I: Stateless Snake Introduction

2022-08-20T20:30:00+02:00

Snake, that simple game that we all had on those huge Nokia bricks fifteen years ago and we all used to kill time on is the chosen one to start this series. due to its simplicity.

It will be two parts on this first version since it will be stateless. It’s simple but it gets pretty long (heh), and I want to document every single step. I want to approach this as “the tutorial I would’ve liked when I was learning” so if it helps someone, there is that.

Description
Requisites
Index

Description

In Snake we control a long entity that reminds us of a snake that is constantly moving inside a closed plane. If it collisions with the plane’s border, we lose and have to start again. We can move the direction of the snake’s head in the four basic directions (up, down, left, right) and, again, if the snake’s head hits it’s own body we lose.

To grow and win points there will be pieces appearing randomly in the plane that we have to “eat”, thus getting longer. The more you eat, the longer you get, the more points you win. But being longer means it will be more difficult to move safely.

In this first version I’ll only make the gameplay: no menus, options or extras besides the snake and the points.

Requisites

We don’t need anything to this simple version. Nothing more than basic JavaScript syntax and some understanding of JSON for data. In this case I will use basic HTML5 and jQuery for the input management. All the elements can be rendered with code so we will not need assets either. In more complex versions we could use images, sound and effects, but for now that will be out of scope. Keep it simple for now.

Index

So with this in mind, the series will consist of three parts:

Introduction
The Snake
The Game

Javascript Games Tutorials Project Part III: The Modern Genres

2022-08-19T18:30:00+02:00

After the first basic arcade games it’s time to explore modern genres. These games are much more complex so this will take more time but if everything goes as expected they shouldn’t be too difficult, just time consuming.

The genres to cover here will be:

2D Platform

Platformers are fun games focused on level design to give them variety. From Donkey Kong to Super Mario, Prince of Persia, to more modern like Disney’s Aladdin, Sonic or Megaman they are very different. The idea here is to make the first two, Donkey Kong and Mario, as they are genre defining and iconic.

2D JRPG

Japanese companies like Square and Enix absolutely dominated a new genre in the 80’s and created lasting sagas that survived to this day with great success. The idea here is to make a 2D RPG like Final Fantasy, not as complex of course but the main mechanics will be there.

2D Fighting

This is one that I currently have zero idea on how to do. It will be a challenge. i’ll try to keep it classic, nothing fancy. Something like the first Street Fighter or even earlier games. We’ll see.

2D Racing

One of the firsts “advanced” games that we all played were racing games. But instead of making those NES old games I’ll try something more like F-Zero.

Roguelike

Nowadays almost all the indie studios make roguelikes. Procedural levels are the hottest thing now. But they were around since the 90’s. I’ll try a dungeon generator to make an infinite roguelike game.

Tower Platformer

The last of this pack will be another kind of platformer that nobody makes anymore: tower platformers, like Donkey Kong or others. To relax after all the previous this one will be the end of the Phase 2.

I hope to make these in the first quarter of 2023, but only time will tell.