Изучите объектно-ориентированное программирование на JavaScript, создав тетрис (1)

Те из вас, кто хочет освоить объектно-ориентированное программирование, могут легко сделать это, создав TETRIS!

Вот ссылка на статьи из этой серии: Следующая статья

Вот путь, по которому вы можете быстро освоить ООП (объектно-ориентированное программирование). Важно не учиться на уже готовых программах, а попробовать сделать это самому. Изучив процесс его создания, я уверен, что вы сможете понять концепцию ООП. К тому времени, когда вы закончите создавать свою игру TETRIS, вы с удивлением обнаружите, что у вас есть твердое понимание сути ООП.

Все, что вам нужно, это браузер, такой как Google Chrome, после чего вы можете сразу приступить к делу. Планируется, что эта серия будет состоять из 9 статей. Пожалуйста, наслаждайтесь!

Цель на этот раз — нарисовать прямоугольник на экране в JavaScript.

ШАГ 1

Сохраните приведенную ниже программу под именем tetris.html и запустите ее в своем браузере.
Если вы видите рис. 1, перейдите к ШАГУ 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>

Если вы не знаете, как запустить файл в браузере, попробуйте следующее.
Установлен ли на вашем ПК Visual Studio Code (VS Code)? Если нет, установите его. Вы можете получить его бесплатно с веб-сайта Microsoft.

https://azure.microsoft.com/en-us/products/visual-studio-code

Запустите VS Code. Вы видите экран, подобный рис. 2 ниже? Не имеет значения, отличаются ли цвета или тексты на экране от ваших.

Нажмите Ctrl + N (одновременно нажмите клавиши Ctrl и N) на рис.2. Как только вы окажетесь на рис.3, скопируйте tetris.html и вставьте его (нажмите Ctrl и клавишу V) в VS Code, как на рис.3.

Когда вы увидите рис. 4, нажмите Ctrl + S. Появится диалоговое окно сохранения, поэтому назовите файл tetris.html и сохраните его. Затем запустите браузер, такой как Google Chrome, Edge или Firefox. Перетащите область, обведенную красной линией, как на рис. 5, и поместите ее в строку заголовка браузера (обведена красной линией, как на рис. 6).

Затем вы можете увидеть экран ниже.

ШАГ 2

Сохраните следующие две программы в одной папке. Сохраните первый как tetris.html,а второй как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);

Попробуйте запустить tetris.html в браузере. Если вы видите рис. 7, перейдите к SETP 3!

Если вы не видите рис.7, сделайте следующее. Сохраните tetris.html так же, как в ШАГЕ 1. После сохранения tetris.html нажмите Ctrl + N в VS Code.

Затем скопируйте tetris.js и вставьте его в окно, как на рис.8, и нажмите Ctrl+S, чтобы сохранить его как tetris.js.

Нажмите tetris.html на рис. 10 и попробуйте перетащить tetris.html в браузер, как в ШАГЕ 1. Видите рис. 7?

ШАГ 3

В этом разделе описывается tetris.js.

Я объясню ‘use strict’ в строке 2 на рис. 11 (мы обозначаем строку 2 как L2) в следующей статье.

document в L4 представляет весь ‹html› из tetris.html.
document.createElement(‘div’) добавляет новый элемент ‹div› в ‹html›, и мы даем ему имя переменной divTitle. В JavaScript имена переменных создаются с использованием const или let. Разница между ними будет объяснена в следующей статье.

Нам нужен L6, потому что нам нужно указать, где отображать элемент ‹div›, созданный в L4. L6 отображает divTitle в конце ‹html›.

Чтобы нарисовать прямоугольник, треугольник или другую фигуру на экране, мы создаем элемент «холст», например L8. Как и прежде, L11 помещает ‹canvas› в конец ‹html›.

«Холст» может рисовать как 2D, так и 3D изображения. Мы получаем контекств L13 для рисования 2D-изображения и рисуем с его помощью черный прямоугольник.

fillRect(x, y, width, height) рисует заполненный прямоугольник, начальная точка которого находится в (x, y), а размер определяется width и height.

Я приложу все усилия, чтобы помочь вам лучше понять ООП. Спасибо, что прочитали эту статью.

Изучите объектно-ориентированное программирование на JavaScript, создав тетрис (1)