Parzibyte's blog

Free knowledge blog: linux, programming, open source, databases, android, frameworks, web and computing in general

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…)