{"id":1,"date":"2018-07-09T00:33:22","date_gmt":"2018-07-09T00:33:22","guid":{"rendered":"http:\/\/www.projectimmerse.com\/?p=1"},"modified":"2020-06-16T22:40:38","modified_gmt":"2020-06-16T22:40:38","slug":"building-a-tetris-game-with-javascript","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/building-a-tetris-game-with-javascript\/","title":{"rendered":"Building a Tetris Game with Javascript"},"content":{"rendered":"

Welcome to my first post, what better way to start with a super complex but fun project. Before I start, I’d like to give credit to the original creator of this game – Pontus. Feel free to visit his Github<\/a> and Youtube Channel<\/a> for more of his projects and videos. <\/p>\n

My intent is to complete this project and provide an unbiased review.<\/p>\n

<\/p>\n

Now, a few things to note before we get started. This project assumes you are armed with ES6 and functional programming knowledge, besides this the directory structure is pretty straightforward. The video itself is a good 51 minutes and 34 seconds, so buckle up, this will be quite the ride.<\/p>\n

The markup itself is super simple:<\/p>\n

\r\n<html>\r\n  <head>\r\n    <title>Tetris<\/title>\r\n  <\/head>\r\n  <body>\r\n    <canvas id="tetris" width="240" height="400"><\/canvas>\r\n    <script src="tetris.js"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
And the first few lines of Javascript:<\/p>\n
\r\nconst canvas = document.getElementById('tetris');\r\nconst context = canvas.getContext('2d');\r\n\r\ncontext.fillStyle = '#000000';\r\ncontext.fillRect = (0, 0, canvas.width, canvas.height);\r\n<\/pre>\n
The Canvas Element<\/h2>\n
Just make sure the canvas<\/strong> element is on your page, this allows access to methods and properties associated with the canvas object. This is basically the basic foundation of the game and a thorough understanding of this fundamental concept is paramount to building anything on canvas. <\/p>\n
The fillRect() method<\/h2>\n
fillRect(x-axis, y-axis, canvas width, canvas height)<\/strong><\/p>\n
This method takes 4 arguments. <\/p>\n