JavaScriptによるテトリス製作②

この記事では、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」になっているというミスはありましたが、それ以外に大きな問題はありませんでした。

あわせて読みたい
JavaScriptによるテトリス製作① こんにちは、32リタイア男です。 この記事では、YoutuberであるAkichonさんの下記動画をベースに、JavaScript(JS)による自作テトリス製作時の気付き・トラブル事例を...

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

ソースコードの学習

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

チェックポイント

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

・キーボードの操作(document.onkeydown)

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

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

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

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

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

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

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

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

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

まとめ

今回紹介したソースコードは特に難しい内容ではないと思います。

しかし、それぞれのコマンドについて詳細を理解し、自分の思い通りに使いこなせるようになることは難しいです。

特に理解が必要と感じたものは、上記でピックアップした次の2つになります。

  • 画面範囲の設定(FIELD、SCREEN、キャンパス)
  • キーボードの操作(document.onkeydown)

これらはゲーム製作では重要な要素のため、理解を深めていく必要があります。

JavaScriptによるテトリス製作の続きは、次の記事で解説しています。

あわせて読みたい
JavaScriptによるテトリス製作③ この記事では、YoutuberであるAkichonさんの下記動画をベースに、JavaScript(JS)による自作テトリス製作時の気付き・トラブル事例を記載します。 チャンネル名:Akich...
よかったらシェアしてね!

コメント

コメントする

目次
閉じる