Tetris game in JavaScript – Open source

In this post I will show you the Tetris game programmed in pure JavaScript, totally free and open source.

This block game is programmed with JavaScript and uses canvas to paint the game. I also use Bootstrap for the layout of the buttons and the page in general, with a bit of SweetAlert for the alerts.

Although it seems simple to do, it is one of the jobs that has cost me the most and of which I am most proud. It was complex (for me) to understand all the logic for collisions, rotations, row deletion, part movement, limits, etc.

Among the features of the game we find:

  • Sounds: background music, sound when the piece cannot be rotated, when a complete row is made and when the tetromino touches the ground
  • Colors: each piece has a random color chosen at runtime
  • Rotations: pieces can be rotated to accommodate them and accumulate points
  • Mobile compatible: because it is web, I have added some buttons to be able to play it on mobile phones and tablets, but it can also be played with the keyboard
  • Open source: you can modify the game, the board, the length, speed, pieces, rotations, etc.
  • Tetris port: behaves like any normal tetris game
  • Game pause: the game can be paused or resumed at any time

Let’s see then the details of this game programmed in JS. Throughout the post I will show you how this game is programmed, I will also leave you a demo and the complete code which is FOSS.

Note: figure, piece and tetromino will be used synonymously in this post.

(more…)

Connect 4 in JavaScript and HTML

In this post I will show you how to program the Connect 4 game by using JavaScript with HTML and Vue, with Bootstrap styles.

Connect 4 in JavaScript, HTML - Web version

Connect 4 in JavaScript, HTML – Web version

It is the Connect 4 game but web version with a player versus player option, as well as player versus CPU that uses a small artificial intelligence.

Throughout the post I will show you how the game works, what technologies I have used, styles, etc. I will also show you how to download the source code, as the game is totally free and open source. Finally I will leave you a demo to play connect 4 online.

(more…)

How does the plugin for thermal printers work

A plugin for printing in thermal printers directly from browser

In this post I will introduce to you a plugin for printing tickets, receipts or invoices on a thermal printer using client-side JavaScript even if your web page or application is on a cloud server.

This plugin allows you to print directly from browsers, without dialogs and without browsers compatibility issues because you only have to send a HTTP request to print silently and in the background.

(more…)

Ticket sample

Print receipt in thermal printer using JavaScript, CSS & HTML

In this post I will show you how to print a ticket or receipt by using JavaScript (client side) and a thermal printer. At the end we will have a great ticket that looks like this:

Ticket sample

Receipt printed in thermal printer using JavaScript only

Obviously you can change the font family, size, logo and so on. And remember: we will be using only pure CSS, HTML & JavaScript, no frameworks; though you can use any framework to render the content before printing.

You can see the demo here, and the full code on my GitHub.

(more…)

Change express-generator app port

The express-generator package helps a lot in the development of web applications with Node, because it generates the skeleton of an application.

A small disadvantage is that, when generating the code, we do not know how to change some very basic things, for example, the port on which the app listens (the default port is 3000).

In this post I will show you how to change the port in some app generated by express-generator. (more…)

How to install Node.js and NPM on Android using Termux app

In this post we will see how to install Node.Js and NPM (Node package manager) in Android.

At the end we will be able to run Node.js applications as if we had a Linux server.

We will also see how to install dependencies using the npm install command, since it is a possible thing in Android thanks to Termux.

Specifically we will install version 6.9.0 of NPM and version 12.3.1 of node, although perhaps when you read this post you will install a newer version.

(more…)