Learn Object-Oriented Programming In JavaScript by Creating Tetris (1)
By undertaking the task of creating Tetris, a popular game, aspiring programmers can embark on an engaging path towards honing their skills in the OOP (Object-Oriented Programming).
Here is a link to articles in this series: Next Article
For beginners embarking on their journey to understand OOP, it is crucial to adopt a hands-on approach rather than solely relying on preexisting programs. To gain a solid understanding of it, it is imperative to immerse oneself in the process of program development. Through firsthand experience, learners can unlock the secrets of OOP and appreciate its inherent principles.
By undertaking the project of creating Tetris, you will not only acquire a comprehensive understanding of OOP but also be astounded by the depth of knowledge you have acquired upon its completion.
This series has been thoughtfully structured into nine articles, each building upon the knowledge gained from the previous installment. With this structured approach, you can systematically progress through the material and ensure a comprehensive understanding of OOP.
All you need to embark on this project is a web browser, such as Google Chrome. This accessible tool will serve as your gateway to the world of OOP. Equip yourself with the necessary software and let the learning commence!
This initial article serves as a prerequisite to ensure you possess the necessary knowledge to execute JavaScript in your browser and create shapes using the canvas element. This has been carefully crafted for beginners who are venturing into the domain of browser-based JavaScript for the first time.
If you have the knowledge above, please proceed to the next article. Embrace the learning process and let us embark on this project together!
STEP 1
Save the program below as tetris.html, and run it in your browser.
If you can see Fig.1, please proceed to STEP 2!
<!-- tetris.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's Master OOP!</title>
</head>
<body>
</body>
<script>
const divTitle = document.createElement('div');
divTitle.textContent = "TETRIS";
document.body.appendChild(divTitle);
</script>
</html>
If you don’t know how to run the file in your browser, try the following.
Do you have Visual Studio Code (VS Code) installed on your PC? If you haven’t, please install it. You can get it for free from Microsoft’s website.
https://azure.microsoft.com/en-us/products/visual-studio-code
Launch VS Code. Do you see a screen like Fig.2 below? It doesn’t matter if the colors or texts on the screen are different from yours.
Press Ctrl + N (Press Ctrl and N key at the same time) in Fig.2. Once you are in Fig.3, copy tetris.html and paste it (Press Ctrl and V key) into VS Code as Fig.3.
When you see Fig. 4, press Ctrl + S. A save dialog box will appear, so name the file tetris.html and save it. Next, launch a browser such as Google Chrome, Edge or Firefox. Drag the area circled in red line as in Fig. 5 and drop it on the title bar of your browser (circled in red line as in Fig. 6).
Then you can see the screen below.
STEP 2
Save the following two programs in the same folder. Save the first one as tetris.html, and the second one as tetirs.js.
<!-- tetris.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's Master OOP!</title>
</head>
<body>
</body>
<script src="tetris.js"></script>
</html>// tetris.js
'use strict';
const divTitle = document.createElement('div');
divTitle.textContent = "TETRIS";
document.body.appendChild(divTitle);
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 200, 200);Try running tetris.html in your browser. If you see Fig.7, proceed to SETP 3!
If you are not able to see Fig.7, please do the following. Save tetris.html in the same way as in STEP 1. After saving tetris.html, press Ctrl + N in VS Code.
Then copy tetris.js and paste it into a window as in Fig.8, and press Ctrl + S to save it as tetris.js.
Click on tetris.html in Fig.10 and try dropping tetris.html into your browser as in STEP 1. Could you see Fig.7?
STEP 3
This section describes tetris.js.
I’ll explain ‘use strict’ in the line 2 of Fig.11 (we denote the line 2 as L2) in the later article.
document in L4 represents the entire <html> of tetris.html.document.createElement(‘div’) adds a new <div> element to <html>, and we give it the variable name divTitle. In JavaScript, variable names are created using const or let. The difference between them will be explained in the later article.
We need L6 because we need to specify where to display the <div> element created in L4. L6 makes divTitle display at the end of the <html>.
To draw a rectangle, triangle, or other shape on the screen, we create a <canvas> element like L8. As before, L11 puts the <canvas> on the end of the <html>.
The <canvas> can either draw 2D or 3D images. We get the context in L13 to draw a 2D image, and we draw a black rectangle using it.
fillRect(x, y, width, height) draws a filled rectangle whose starting point is at (x, y) and whose size is specified by width and height.
I will make effort to help you understand OOP better. Thanks for reading this article.
