PR

１日目 Canvasの設定と描画【JavaScriptでテトリス】

テトリスを作ろう
2024.10.07

はじめに

スマホだけを使って、一週間でテトリスを作っていきます。

▶︎１日目　キャンバスの設定と描写
・２日目　フィールドの設定と描写
・３日目　テトリミノの設定と描写
・４日目　テトリミノの落下と回転
・５日目　スマホでの操作と画面固定
・６日目　テトリミノの当たり判定
・７日目　ラインを消す処理

パソコンがなくても、スマホだけでwebアプリケーションの開発ができます。

プログラミングに興味がある人やプログラミングの勉強を始めたばかりの人に向けて、一からわかりやすく解説していきます。

使用するプログラミング言語はJavaScript

初心者にも適したプログラミング言語、HTML / CSS / JavaScriptを使ってWebアプリを作成します。

・HTML / CSS: Webページの作成に使用します。簡単なWebページを作るなら最適です。
・JavaScript: Webページを動的にし、情報を表示するだけのページではなく操作に応じてページが反応するためのプログラミング言語です。

無料で使えるプログラミング学習におすすめのアプリ「JavaScript Anywhere JSAnywhere」

プログラミングには、文章を編集するアプリ「テキストエディタ」が必要になります。

「JavaScript Anywhere JSAnywhere」は、HTML / CSS / JavaScriptをわけて記述できて、実際に動作確認までできるテキストエディタを兼ね備えたiPhoneのアプリです。

JavaScript Anywhere JSAnywhere

JavaScript Anywhere JSAnywhere

Tatsuya Tobioka無料posted withアプリーチ

とても使いやすく、面倒な設定なしでどこでもプログラミングできるおすすめのアプリです。

１日目　キャンバスの設定と描画

全体のソースコード

まずは完成したソースコードをご覧ください。

HTMLのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>テトリス</title>
</head>
<body>
    <div class="main">
        <canvas id="canvas01"></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSSのコード

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
.main {
    height: 100%;
    text-align: center;
}
#canvas01 {
    height: calc(100% - 8px);
}

JavaScriptのコード

// ============ 変数 ============

// フィールドサイズ
const FIELD_X = 10   // 横のマスの数
const FIELD_Y = 20   // 縦のマスの数
const MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
let canvas = document.getElementById("canvas01")
let conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// 色の設定
const COLOR = [
    "#F2F2F2",    // フィールド背景
    "#C8C8C8"     // 枠の線
]

// ============ 関数 ============

// フィールドの表示
function display() {
    for (let i = 0; i < FIELD_Y; i++) {
        for (let j =0; j < FIELD_X; j++) {
            // 塗りつぶしの四角を描画
            conText.fillStyle = COLOR[0]
            conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

            // 輪郭の四角を描画
            conText.strokeStyle = COLOR[1]
            conText.lineWidth = 1
            conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
        }
    }
}

// ============ 実行 ============

// 初期画面の表示
display()

HTMLの解説

HTMLの基本

<!DOCTYPE html>
<html lang="ja">
　　：
</html>
<!DOCTYPE html>

HTMLのバージョンが「HTML5」モードであることを宣言しています。

省略すると、HTMLのバージョンは過去互換モードになります。

<html lang=”ja”>〜</html>

<html> 〜 </html> で囲んだ部分が、HTML文書であることを指定します。

lang=”ja” で、言語情報が日本語であることを指定します。

省略すると、言語情報は自動になり「日本語に翻訳しますか？」などのメッセージが表示される場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
　　：
</head>
<body>
　　：
</body>
</html>
<head>〜</head>

ヘッダ部を指定します。<head>～</head> で囲んだ部分がヘッダ部になります。

文書全体に関する指定などを書きます。<html> が親要素になり、<html> 〜 </html> の中に入ります。

<body>〜</body>

<body>～</body> で囲んだ部分が、文書の本文を記述するところになります。

<html> が親要素になり、<html> 〜 </html> の中に入ります。

<head>内の解説

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>テトリス</title>
</head>
<meta charset=”utf-8″>

文字コードを指定します。文字化け防止に必要です。

<link rel=”stylesheet” href=”style.css”>

外部スタイルシートを指定します。

“style.css” が、外部CSSのファイル名になります。

<title>〜</title>

タイトルを指定します。タイトルは、ブラウザのツールバーや検索エンジンの検索結果などで表示されます。

<body>内の解説

<body>
    <div class="main">
        <canvas id="canvas01"></canvas>
    </div>
    <script src="script.js"></script>
</body>
<div class=”main”>〜</div>

<div>〜</div> は、前後に改行が挿入されて表示されるブロック要素です。

「class」や「id」を指定することで、CSSやJavaScriptで利用できる要素になります。

今回は、class=”main” でクラス名を指定して、CSSで見栄えやスタイルを定義するのに利用します。

id属性は同じ名前のidを一つのHTML内に一つだけしか指定できませんが、class属性は同じ名前のclassを一つのHTML内に複数指定することができます。

<canvas id=”canvas01″></canvas>

図形を描画するための領域です。

<canvas>～</canvas>内にJavaScriptを使って線や図形、画像などを表示します。

今回は、id=”canvas01″ でid名を指定して、JavaScriptで図形を描画するのに利用します。

id属性はclass属性とは違い、同じ名前のidを一つのHTML内に一つだけしか指定できません。

<script src=”script.js”></script>

JavaScriptなどの外部スクリプトを指定します。

“script.js” が、外部JavaScriptのファイル名になります。

CSSの解説

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
.main {
    height: 100%;
    text-align: center;
}
#canvas01 {
    height: calc(100% - 8px);
}

CSSを適用させる要素（CSSセレクタ）

html { height: 100%; }

html がセレクタです。HTML内にある<html>〜</html>の要素のスタイルを指定します。

「height」の部分がプロパティ、「100%」の部分がプロパティの値です。

body{ .. }

bodyがセレクタです。HTML内にある<body>〜</body>の要素のスタイルを指定します。

.main { .. }

.mainがセレクタです。HTML内にあるclass名が「main」の要素のスタイルを指定します。

要素名の頭に「.」が付くと、classを指定しています。

#canvas01 { .. }

#canvas01 がセレクタです。HTML内にあるid名が「canvas01」の要素のスタイルを指定します。

要素名の頭に「#」が付くと、idを指定しています。

適用するスタイルの種類と値（CSSプロパティ）

height: 100%;｜height: calc(100% – 8px);

セレクタ（指定した要素）の表示する高さを指定します。

表示する高さの値を100%に指定すると、親要素いっぱいの高さまで表示されます。

heightの値は、100pxや10emのように長さの単位で指定したり、100%のようにパーセントで指定できます。

値を指定する際に計算を行う場合、calc( .. ) を使います。%やpxなど単位が違っても計算することができます。

今回はキャンバスの高さを画面いっぱいにしたいのですが、canvasだけ高さ100%にしても親要素の高さまでにしかなりません。
canvasの親要素「div（クラスmain）」、divの親要素「body」、bodyの親要素「html」の全ての要素の高さを100%にする必要があります。

margin: 0;

セレクタ（指定した要素）と周りの要素との間の隙間を指定します。

ほとんどの要素でmarginの初期値は0ですが、body要素の初期値は8pxなので周りの要素との間の隙間をなくすためにmarginの値を0に指定しています。

text-align: center;

セレクタ（指定した要素）の配置を指定します。

text-alignの値をcenterに指定すると、要素を左右中央寄せすることができます。

JavaScriptの解説

// ============ 変数 ============

// フィールドサイズ
const FIELD_X = 10   // 横のマスの数
const FIELD_Y = 20   // 縦のマスの数
const MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
let canvas = document.getElementById("canvas01")
let conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// 色の設定
const COLOR = [
    "#F2F2F2",    // フィールド背景
    "#C8C8C8"     // 枠の線
]

// ============ 関数 ============

// フィールドの表示
function display() {
    for (let i = 0; i < FIELD_Y; i++) {
        for (let j =0; j < FIELD_X; j++) {
            // 塗りつぶしの四角を描画
            conText.fillStyle = COLOR[0]
            conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

            // 輪郭の四角を描画
            conText.strokeStyle = COLOR[1]
            conText.lineWidth = 1
            conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
        }
    }
}

// ============ 実行 ============

// 初期画面の表示
display()

変数と関数と実行について

変数とは、数値や文字列などの値を名前をつけて保存するものです。
関数とは、よく使用する処理などを名前をつけて定義するものです。

変数や関数だけでは、イベントは発生しません。

実際にプログラムを動かしてウェブページ上でアクションを発生させるには、関数を呼び出して実行する必要があります。

変数や関数を定義しなくても実行できる

変数や関数を使えば、コードの重複を減らして見やすくなりプログラムを効率的に作ることができます。

ただ、プログラミングの勉強を始めたばかりの人が、他人が作ったソースコードを見たときに変数名や関数名が理解できなくて難しく感じるかもしれません。

そこで上記のJavaScriptのコードを、変数と関数を使わずに書き換えてみました。

// キャンバスの設定
document.getElementById("canvas01").width = 30 * 10
document.getElementById("canvas01").height = 30 * 20
document.getElementById("canvas01").style.border = "4px solid #050505"

// フィールドの表示
for (let i = 0; i < 20; i++) {
    for (let j =0; j < 10; j++) {
        // 塗りつぶしの四角を描画
        document.getElementById("canvas01").getContext("2d").fillStyle = "#F2F2F2"
        document.getElementById("canvas01").getContext("2d").fillRect(30 * j, 30 * i, 30, 30)

        // 輪郭の四角を描画
        document.getElementById("canvas01").getContext("2d").strokeStyle = "#C8C8C8"
        document.getElementById("canvas01").getContext("2d").lineWidth = 1
        document.getElementById("canvas01").getContext("2d").strokeRect(30 * j, 30 * i, 30, 30)
    }
}

上の２つのプログラムはまったく同じ処理をします。

この変数と関数を使っていないコードでJavaScriptの解説をしていきます。

変数と関数については後ほど詳しく解説します。

キャンバスの設定

キャンバスのサイズ（横幅と高さ）を決めて、輪郭に太めの線を引く処理をします。

document.getElementById(“canvas01”).width = 30 * 10

document.getElementById( .. ) で、HTML内にある指定したid名の要素を参照します。

.width = 30 * 10 （マスの大きさ×マスの数）で、参照した要素の「横幅」を指定します。

まとめると、「キャンバスの横幅を300にする」です。

document.getElementById(“canvas01”).height = 30 * 20

document.getElementById( .. ) で、HTML内にある指定したid名の要素を参照します。

.height = 30 * 20 （マスの大きさ×マスの数）で、参照した要素の「高さ」を指定します。

まとめると、「キャンバスの高さを600にする」です。

document.getElementById(“canvas01”).style.border = “4px solid #050505”

document.getElementById( .. ) で、HTML内にある指定したid名の要素を参照します。

.style.border = “4px solid #050505” で、参照した要素の「枠線の太さ、線種、色」をまとめて指定します。

枠線の太さが4px、線種solidが実線、色が#050505です。

まとめると、「キャンバスの輪郭を太めの実線で灰色にする」です。

フィールドの表示

キャンバスに横に10個、縦に20個の正方形（横幅30×高さ30）を塗りつぶしその輪郭を描画する処理をします。

for (let i = 0; i < 20; i++) { .. }

繰り返し「for文」です。{ .. }内の処理を、i が 0 から 1、2、3・・と19（20になれば処理しない）まで繰り返します。

i が 0 のとき、さらに「for (let j =0; j < 10; j++) { .. }」で j が 0 から 9（10になれば処理しない）まで繰り返します。

document.getElementById(“canvas01”).getContext(“2d”).fillStyle = “#F2F2F2”

document.getElementById( .. ) で、HTML内にある指定したid名の要素を参照します。

.getContext(“2d”) で、canvas要素に2Dグラフィックを描画するようにします。

.fillStyle = “#F2F2F2” で、塗りつぶしの色を指定します。

まとめると、「キャンバスに描画するための塗りつぶしの色を薄い灰色にする」です。（まだ描画しません。）

document.getElementById(“canvas01”).getContext(“2d”).fillRect(j * 30, i * 30, 30, 30)

document.getElementById(“canvas01”).getContext(“2d”) は、上を参照してください。

.fillRect(j * 30, i * 30, 30, 30) で、矩形をfillStyleで指定した色に塗りつぶします。

矩形は、.fillRect(左上端から右方向の距離, 左上端から下方向の距離, 横幅, 高さ) の四角形です。

まとめると、「キャンバスに塗りつぶした四角形を描画する」です。

document.getElementById(“canvas01”).getContext(“2d”).strokeStyle = “#C8C8C8”

document.getElementById(“canvas01”).getContext(“2d”) は、上を参照してください。

.strokeStyle = “#C8C8C8” で、線の色を指定します。

まとめると、「キャンバスに描画するための線の色を灰色にする」です。（まだ描画しません。）

document.getElementById(“canvas01”).getContext(“2d”).lineWidth = 1

document.getElementById(“canvas01”).getContext(“2d”) は、上を参照してください。

.lineWidth = 1 で、線の幅を指定します。初期値は 1 なので省略も可能です。

まとめると、「キャンバスに描画するための線の幅を1pxにする」です。（まだ描画しません。）

document.getElementById(“canvas01”).getContext(“2d”).strokeRect(j * 30, i * 30, 30, 30)

document.getElementById(“canvas01”).getContext(“2d”) は、上を参照してください。

.strokeRect(j * 30, i * 30, 30, 30) で、矩形を描画します。

矩形は、.strokeRect(左上端から右方向の距離, 左上端から下方向の距離, 横幅, 高さ) の四角形です。

まとめると、「キャンバスに輪郭の四角形を描画する」です。

JavaScriptの変数について

ここからは、変数について解説していきます。

// キャンバスの設定
document.getElementById("canvas01").width = 30 * 10
document.getElementById("canvas01").height = 30 * 20
document.getElementById("canvas01").style.border = "4px solid #050505"

// フィールドの表示
for (let i = 0; i < 20; i++) {
    for (let j =0; j < 10; j++) {
        // 塗りつぶしの四角を描画
        document.getElementById("canvas01").getContext("2d").fillStyle = "#F2F2F2"
        document.getElementById("canvas01").getContext("2d").fillRect(30 * j, 30 * i, 30, 30)

        // 輪郭の四角を描画
        document.getElementById("canvas01").getContext("2d").strokeStyle = "#C8C8C8"
        document.getElementById("canvas01").getContext("2d").lineWidth = 1
        document.getElementById("canvas01").getContext("2d").strokeRect(30 * j, 30 * i, 30, 30)
    }
}

変数を利用する

conText = document.getElementById(“canvas01”).canvas.getContext(“2d”)

上記のソースコードで何度も使っていた「document.getElementById(“canvas01”).getContext(“2d”)」を変数conText に指定します。

// ============ 変数 ============
conText = document.getElementById("canvas01").getContext("2d")

// ============ 実行 ============

// キャンバスの設定
document.getElementById("canvas01").width = 30 * 10
document.getElementById("canvas01").height = 30 * 20
document.getElementById("canvas01").style.border = "4px solid #050505"

// フィールドの表示
for (let i = 0; i < 20; i++) {
    for (let j =0; j < 10; j++) {
        // 塗りつぶしの四角を描画
        conText.fillStyle = "#F2F2F2"
        conText.fillRect(30 * j, 30 * i, 30, 30)

        // 輪郭の四角を描画
        conText.strokeStyle = "#C8C8C8"
        conText.lineWidth = 1
        conText.strokeRect(30 * j, 30 * i, 30, 30)
    }
}

変数を指定することで、コードの重複が減り見やすくなりました。

canvas = document.getElementById(“canvas01”)

続いて「document.getElementById(“canvas01”)」も変数canvasに指定します。

// ============ 変数 ============
canvas = document.getElementById("canvas01")
conText = canvas.getContext("2d")

// ============ 実行 ============

// キャンバスの設定
canvas.width = 30 * 10
canvas.height = 30 * 20
canvas.style.border = "4px solid #050505"

// フィールドの表示
for (let i = 0; i < 20; i++) {
    for (let j =0; j < 10; j++) {
        // 塗りつぶしの四角を描画
        conText.fillStyle = "#F2F2F2"
        conText.fillRect(30 * j, 30 * i, 30, 30)

        // 輪郭の四角を描画
        conText.strokeStyle = "#C8C8C8"
        conText.lineWidth = 1
        conText.strokeRect(30 * j, 30 * i, 30, 30)
    }
}

かなりスッキリしました。

FIELD_X = 10｜FIELD_Y = 20｜MINO_SIZE = 30

横のマスの数「10」、縦のマスの数「20」、マスの大きさ「30」を変数に指定します。

// ============ 変数 ============

// フィールドサイズ
FIELD_X = 10   // 横のマスの数
FIELD_Y = 20   // 縦のマスの数
MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
canvas = document.getElementById("canvas01")
conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// ============ 実行 ============

// フィールドの表示
for (let i = 0; i < FIELD_Y; i++) {
    for (let j =0; j < FIELD_X; j++) {
        // 塗りつぶしの四角を描画
        conText.fillStyle = "#F2F2F2"
        conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

        // 輪郭の四角を描画
        conText.strokeStyle = "#C8C8C8"
        conText.lineWidth = 1
        conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
    }
}

見やすくするためにキャンバスの設定を上へ移動しました。

マスの数と大きさを変数にすることによって、変数の部分を変更するだけで一括ですべての値が変更できるようになりました。

このように、変数はコードの重複を減らすだけでなく、値を変更する場合にもミスを減らして効率的にプログラミングできるようになります。

COLOR = [ “#F2F2F2”, “#C8C8C8” ]

色の設定を行います。

// ============ 変数 ============

// フィールドサイズ
FIELD_X = 10   // 横のマスの数
FIELD_Y = 20   // 縦のマスの数
MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
canvas = document.getElementById("canvas01")
conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// 色の設定
COLOR = [
    "#F2F2F2",    // フィールド背景
    "#C8C8C8"     // 枠の線
]

// ============ 実行 ============

// フィールドの表示
for (let i = 0; i < FIELD_Y; i++) {
    for (let j =0; j < FIELD_X; j++) {
        // 塗りつぶしの四角を描画
        conText.fillStyle = COLOR[0]
        conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

        // 輪郭の四角を描画
        conText.strokeStyle = COLOR[1]
        conText.lineWidth = 1
        conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
    }
}

フィールド背景の色と枠の線の色を変数に指定します。

ここでは配列の変数を使っています。

COLOR = [ “#F2F2F2”, “#C8C8C8” ] の配列の変数から
COLOR[0] で「”#F2F2F2″」を
COLOR[1] で「”#C8C8C8″」を呼び出しています。

JavaScriptの配列について

配列は、１つの変数名で複数の値を持ちます。また、配列の要素番号を指定することで対応する値を呼び出すことができます。

例えば、

array = ["a", "b", "c"]

上の変数「array」は、３つの値を持っています。

array[0] で「”a”」を、array[1] で「”b”」を、array[2] で「”c”」を呼び出します。

変数の宣言（const, let, var）

短いプログラムなら問題ないですが、長く複雑なプログラムになると意図せず変数名がかぶりエラーに繋がる可能性があります。（変数に同じ名前を付けて別の目的で利用しようとすると、元の変数の値も変わってしまい不具合を起こす。）

エラーを出さないためにも同じ名前の変数を作ること（再宣言）ができない「const」や「let」で変数を宣言するのがいいです。

「const」は、値を変えること（再代入）ができないので定数を宣言するのに最適です。

// ============ 変数 ============

// フィールドサイズ
const FIELD_X = 10   // 横のマスの数
const FIELD_Y = 20   // 縦のマスの数
const MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
const canvas = document.getElementById("canvas01")
const conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// 色の設定
const COLOR = [
    "#F2F2F2",    // フィールド背景
    "#C8C8C8"     // 枠の線
]

// ============ 実行 ============

// フィールドの表示
for (let i = 0; i < FIELD_Y; i++) {
    for (let j =0; j < FIELD_X; j++) {
        // 塗りつぶしの四角を描画
        conText.fillStyle = COLOR[0]
        conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

        // 輪郭の四角を描画
        conText.strokeStyle = COLOR[1]
        conText.lineWidth = 1
        conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
    }
}

値が変わらない変数（定数）を、const で宣言しています。

let で変数を宣言すると、再宣言（同じ名前の変数を作ること）はできませんが再代入（値を変えること）は可能です。

var で変数を宣言すると、再宣言（同じ名前の変数を作ること）も再代入（値を変えること）も可能です。

JavaScriptの関数について

ここからは、関数について解説していきます。

関数には、プログラマーが自分で作成する独自関数と、JavaScriptが最初から用意している標準関数（組み込み関数）があります。

独自関数を自由に定義することで、同じ処理を何度も呼び出して使うことができます。

関数を作成する

function 関数名() { .. }

関数名をdisplayにして、{ } 内に実行する処理を定義します。（関数だけでは、まだ実行されません。）

// ============ 関数 ============

// フィールドの表示
function display() {
    for (let i = 0; i < FIELD_Y; i++) {
        for (let j =0; j < FIELD_X; j++) {
            // 塗りつぶしの四角を描画
            conText.fillStyle = COLOR[0]
            conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

            // 輪郭の四角を描画
            conText.strokeStyle = COLOR[1]
            conText.lineWidth = 1
            conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
        }
    }
}

一度定義した関数を呼び出すことで同じ処理を何度も実行できるようになります。

関数を呼び出す

関数は宣言したあとに呼び出すことで、はじめて実行することができます。

display()

関数display を呼び出して実行します。

// ============ 実行 ============

// 初期画面の表示
display()

関数を呼び出して実行するには、関数名をそのまま利用して「関数名()」と記述するだけです。

行末（行の後ろ）のセミコロン「 ; 」は必要ない

JavaScriptの行末のセミコロンは、省略しても自動で挿入されます。

ですので、行末のセミコロンは付けても付けなくてもどちらでもいいです。最近はセミコロンを付けない人も増えてきています。

改行で勝手にセミコロンが挿入されることが多いので、改行するタイミングが重要になります。

最後にJavaScript全体のソースコードを載せておきます。

// ============ 変数 ============

// フィールドサイズ
const FIELD_X = 10   // 横のマスの数
const FIELD_Y = 20   // 縦のマスの数
const MINO_SIZE = 30 // マスの大きさ

// キャンバスの設定
let canvas = document.getElementById("canvas01")
let conText = canvas.getContext("2d")
canvas.width = MINO_SIZE * FIELD_X
canvas.height = MINO_SIZE * FIELD_Y
canvas.style.border = "4px solid #050505"

// 色の設定
const COLOR = [
    "#F2F2F2",    // フィールド背景
    "#C8C8C8"     // 枠の線
]

// ============ 関数 ============

// フィールドの表示
function display() {
    for (let i = 0; i < FIELD_Y; i++) {
        for (let j =0; j < FIELD_X; j++) {
            // 塗りつぶしの四角を描画
            conText.fillStyle = COLOR[0]
            conText.fillRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)

            // 輪郭の四角を描画
            conText.strokeStyle = COLOR[1]
            conText.lineWidth = 1
            conText.strokeRect(MINO_SIZE * j, MINO_SIZE * i, MINO_SIZE, MINO_SIZE)
        }
    }
}

// ============ 実行 ============

// 初期画面の表示
display()

次回は「２日目 フィールドの設定と描写」です。

２日目 フィールドの設定と描写【JavaScriptの二次元配列】
はじめに スマホだけを使って、一週間でテトリスを作っていきます。 ・１日目　キャンバスの設定と描写▶︎２日目　フィールドの設定と描写・３日目　テトリミノの設定と描写・４日目　テトリミノの落下と回転・５日目　スマホでの操作と画面固定・６日目　...
web-application-lab.online