JavaScriptによるテトリス製作②

2020年10月13日2021年9月15日

この記事では、YoutuberであるAkichonさんの下記動画をベースに、JavaScript（JS）による自作テトリス製作時の気付き・トラブル事例を記載します。

チャンネル名：Akichonプログラミング講座
タイトル：プログラミング講座第14回
【テトリスを作る(2)/JavaScript】

今回の記事、上記動画のテトリスブロックを動かすところまでを解説します。

最初に注意点として、私はプログラミング初心者です。

そのため、この記事は初心者目線での気付き・トラブル事例の紹介が主体となります。
解説内容については、私なりに調べた内容を記載していますが、内容に誤りがある恐れもございますので、その点はご理解お願いいたします。

自作テトリスのソースコード

上記Akichonさんの動画を参考に、配列の数を増やし、ブロックの形状を変えたソースコードを下記に記載します。

1  <!DOCTYPE html>
2  <html>
3   <head>
4     <title>Tetris</title>
5   </head>
6   <body>
7     <canvas id="can"></canvas>
8     <script>
9       //フィールドサイズ
10      const FIELD_W = 10;
11      const FIELD_H = 20;
12
13      // ブロック一つのサイズ（ピクセル）
14      const BLOCK_SIZE = 30;
15
16      //キャンバスサイズ
17      const SCREEN_W = BLOCK_SIZE * FIELD_W;
18      const SCREEN_H = BLOCK_SIZE * FIELD_H;
19
20      // テトロミノのサイズ
21      const TETRO_SIZE = 5;

22
23      let can = document.getElementById("can");
24      let con = can.getContext("2d");
25
26      can.width = SCREEN_W;
27      can.height = SCREEN_H;
28      can.style.border = "4px solid #555";
29
30      //テトロミノ本体
31      let tetro = [
32        [0, 0, 1, 0, 0],
33        [1, 1, 1, 1, 1],
34        [0, 0, 1, 0, 0],
35        [0, 1, 0, 1, 0],
36        [1, 0, 0, 0, 1]
37      ];
38      //テトロミノの座標
39      let tetro_x = 0;
40      let tetro_y = 0;

41
42      drawTetro();
43
44      //テトロミノを表示する関数
45      function drawTetro() {
46        con.clearRect(0, 0, SCREEN_W, SCREEN_H);

47
48        for(let y=0; y<TETRO_SIZE; y++) {
49          for(let x=0; x<TETRO_SIZE; x++) {
50            if(tetro[y][x] == 1) {
51              let px = (tetro_x + x) * BLOCK_SIZE;
52              let py = (tetro_y + y) * BLOCK_SIZE;
53
54              con.fillStyle = "red";
55              con.fillRect(px, py, BLOCK_SIZE, BLOCK_SIZE);
56              con.strokeStyle = "black";
57              con.strokeRect(px, py, BLOCK_SIZE, BLOCK_SIZE);
58            }
59          }
60        }
61      }
62
63     
64      document.onkeydown = function(e) {
   
65
66        switch(e.keyCode) {
67          case 37: //左
68            tetro_x--;
69            break;
70          case 38: //上
71            tetro_y--;
72            break;
73          case 39: //右
74            tetro_x++;
75            break;
76          case 40: //下
77            tetro_y++;
78            break;
79          case 32: //スペース
80            break;
81        }
82        drawTetro();
83      }
84
85    </script>
86  </body>
87 </html>

上記のコードでHTMLファイルを開くと、「大」の字のブロックをキーボードの十字キーで動かすことができます。

今回は、前回の下記記事の問題と比べて、( )の付け忘れや、「switch」が「swtch」になっているというミスはありましたが、それ以外に大きな問題はありませんでした。

ブロックが動くことで、大分テトリスっぽくなっていると思います。

ソースコードの学習

今回のコードでピックアップする点は下記の２点です。

チェックポイント

・画面範囲の設定（FIELD、SCREEN、キャンパス）

・キーボードの操作（document.onkeydown）

この２点は、冒頭の動画の説明で基本的なことは理解できると思います。

まず、画面範囲の設定について、FIELD_W および FIELD_H で画面上にブロックを何個置けるかを設定しています。

ここでは、FIELD_W=10、FIELD_H=20なので、横に10ブロック、縦に20ブロック置くことができます。

しかし、FIELDの定義のみで実際のHTMLファイルの画面上に正しくブロックを表示することはできません。
FIELDの値にブロック１つのサイズ（ピクセル）を掛けたSCREENを定義し、それをcan.widthおよびcan.height（キャンバスの描画領域の横幅および縦幅）に代入してやることで、SCREENの大きさの画面上に10ブロック✕20ブロックのFIELDが形成されています。

大雑把な理解はできますが、今後JavaScriptで画面範囲を設定する場合、FIELD・SCREEN・キャンバスのどれをどのように設定するかということは重要と考えますので、それぞれの定義の概念については詳しく理解しておく必要があると感じました。

次にキーボードの操作についてです。

document.onkeydownのonkeydown属性は、該当するキーを押したときに実行される関数を設定するものです。

上記ソースコードの内容は簡単なため、それぞれのキーでどのような処理を実行するかは理解しやすいですが、ゲーム製作をする場合、onkeydown属性に関する理解は必須であるということは想像がつくと思います。

onkeydown属性と似た機能でonkeypress属性というものもあり、それぞれの機能について理解した上で、ゲーム製作をするとき、どの属性が適しているかも考えられるようになるのが理想でしょう。