JSでテトリスを作っていますが、エラーの解決方法が分かりません。

前提・実現したいこと

JavaScriptでテトリス作成の動画を見ながら勉強しているのですが、下記のようなエラーが起きてしまいました。
動画をの参考にしながら、全てのコードを模写したのですが、どのようにしたらいいかわかりません。

よろしくお願いします。

発生している問題・エラーメッセージ

tetris.html:181 Uncaught ReferenceError: con is not defined
    at drawAll (tetris.html:181)
    at init (tetris.html:149)
    at tetris.html:127
drawAll	　　　@	tetris.html:181
init	　　　　　@	tetris.html:149
(anonymous) 	@	tetris.html:127

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head><meta charset="utf-8">;</head>
4<body>
5<canvas id="can"></canvas>
6<script>
7//落ちるスピード
8const GAME_SPEED = 300;
9//フィールドサイズ
10const FIELD_COL = 10;
11const FIELD_ROW = 20;
12//ブロック１つのサイズ(ピクセル)
13const BLOCK_SIZE = 30;
14
15//キャンバスサイズ
16const SCREEN_W = BLOCK_SIZE * FIELD_COL;
17const SCREEN_H = BLOCK_SIZE * FIELD_ROW;
18//テトロミノのサイズ
19const TETRO_SIZE =4;
20
21const TETRO_COLORS =[
22  "#000",         //0空
23  "#6CF",         //1水色
24  "#F92",         //2オレンジ
25  "#66F",         //3青
26  "#C5C",         //4紫
27  "#FD2",         //5黄色
28  "#F44",         //6赤色
29  "#5B5",          //7緑
30  "red"          //赤
31];
32
33const TETRO_TYPES = [
34  [], // 0.空っぽ
35
36  [                 //1.I
37      [ 0, 0, 0, 0 ],
38      [ 1, 1, 1, 1 ],
39      [ 0, 0, 0, 0 ],
40      [ 0, 0, 0, 0 ]
41  ],
42  [                 //2.L
43      [ 0, 1, 0, 0 ],
44      [ 0, 1, 0, 0 ],
45      [ 0, 1, 1, 0 ],
46      [ 0, 0, 0, 0 ]
47  ],
48  [                 //3.J
49      [ 0, 0, 1, 0 ],
50      [ 0, 0, 1, 0 ],
51      [ 0, 1, 1, 0 ],
52      [ 0, 0, 0, 0 ]
53  ],
54  [                 //4.T
55      [ 0, 1, 0, 0 ],
56      [ 0, 1, 1, 0 ],
57      [ 0, 1, 0, 0 ],
58      [ 0, 0, 0, 0 ]
59  ],
60  [                 //5.O
61      [ 0, 0, 0, 0 ],
62      [ 0, 1, 1, 0 ],
63      [ 0, 1, 1, 0 ],
64      [ 0, 0, 0, 0 ]
65  ],
66  [                 //6.Z
67      [ 0, 0, 0, 0 ],
68      [ 1, 1, 0, 0 ],
69      [ 0, 1, 1, 0 ],
70      [ 0, 0, 0, 0 ]
71  ],
72  [                 //7.S
73      [ 0, 0, 0, 0 ],
74      [ 0, 1, 1, 0 ],
75      [ 1, 1, 0, 0 ],
76      [ 0, 0, 0, 0 ]
77  ],
78  [                 //8.,
79      [ 0, 0, 0, 0 ],
80      [ 0, 0, 0, 0 ],
81      [ 0, 1, 0, 0 ],
82      [ 0, 0, 0, 0 ]
83  ]
84];
85
86// //画像と効果音
87let bgimage;
88bgimage= new Image();
89// bgimage.src="back.png";
90bgimage.src="img/universe.jpg";
91let blimage;
92blimage= new Image();
93blimage.src="img/block.png";
94let se1,se2,se3;
95se1 = new Audio("mp3/8bt_bgm.mp3");
96se2 = new Audio("mp3/attack1.mp3");
97se3 = new Audio("mp3/button01.mp3");
98
99//初期位置
100const START_X = FIELD_COL/2 - TETRO_SIZE/2;
101const START_Y = 0;
102
103//テトロミノ本体
104let tetro;
105//テトロミノの形
106let tetro_t;
107
108//テトロミノの座標
109let tetro_x = START_X;
110let tetro_y = START_Y;
111
112//テトロミノネクスト
113let tetro_n;
114//フィールド本体
115let field = [];
116
117//ゲームオーバーフラグ
118let over = false;
119// 消したライン数
120let lines = 0;
121// スコア
122let score = 0;
123//ゲームフィールドの位置
124const OFFSET_X = 40;//(640-300)/2;
125const OFFSET_Y = 20;
126//イニシャライズでスタート
127init();
128
129//初期化
130function init()
131{
132  //フィールドのクリア
133  for(let y=0; y<FIELD_ROW ; y++ )
134  {
135    field[y] = [];
136    for(let x=0; x<FIELD_COL ; x++ )
137    {
138        field[y][x] =0;
139    }
140  }
141  // テスト
142  // field[5][8]  = 1;
143
144  //最初のテトロのためのネクスト入れる
145  tetro_n = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1;
146
147  //テトロをセットし、表示して開始！
148  setTetro();
149  drawAll();
150  setInterval( dropTetro, GAME_SPEED-speed );
151}
152
153//テトロをネクストで初期化
154function setTetro()
155{
156  //ネクストを現在のテトロにする
157  tetro_t =tetro_n;
158  tetro = TETRO_TYPES[ tetro_t ];
159  tetro_n = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1;
160
161  //位置を初期値にする
162  tetro_x = START_X;
163  tetro_y = START_Y;
164}
165
166//ブロック１つを表示する
167function drawBlock(x,y,c)
168{
169
170  let px = OFFSET_X + x * BLOCK_SIZE;
171  let py = OFFSET_Y + y * BLOCK_SIZE;
172
173  con.drawStyle=(blimage,
174       c*BLOCK_SIZE,0, BLOCK_SIZE,BLOCK_SIZE,
175       px,py,  BLOCK_SIZE,BLOCK_SIZE);
176}
177//全部表示する
178function drawAll()
179{
180  //背景を表示
181  con.drawImage(bgimage, -100,100);
182  //フィールの枠を描く
183  con.strokeStyle="rgba(80,160,255,0,1)";
184  con.strokeRect(OFFSET_X-6, OFFSET_Y-6, SCREEN_W+12,SCREEN_H+12);
185  con.strokeStyle="rgba(80,160,255,0,5)";
186  con.strokeRect(OFFSET_X-2, OFFSET_Y-2, SCREEN_W+4,SCREEN_H+4);
187  con.fillStyle="rgba(0,0,0,0,4)";
188  con.fillRect(OFFSET_X, OFFSET_Y, SCREEN_W,SCREEN_H);
189
190  for(let y=0; y<FIELD_ROW ; y++ )
191  {
192    for(let x=0; x<FIELD_COL ; x++ )
193    {
194      if( field[y][x] )
195      {
196        drawBlock(x,y, field[y][x]);
197      }
198      else
199      {
200      }
201    }
202  }
203
204//着地点を計算
205let plus=0;
206
207while( checkMove(0,plus+1) )plus++;
208//テトロミノを表示
209  for(let y=0; y<TETRO_SIZE ; y++ )
210  {
211    for(let x=0; x<TETRO_SIZE ; x++ )
212    {
213      if( tetro[y][x] )
214      {
215        // //着地点
216        drawBlock(tetro_x+x, tetro_y+y+plus, 0);
217        //本体
218        drawBlock(tetro_x+x, tetro_y+y,tetro_t);
219      }
220
221      // //ネクストテトロ
222      if ( TETRO_TYPES[tetro_n][y][x] )
223      {
224        drawBlock(13+x, 4+y, tetro_n );
225      }
226    }
227  }
228  drawInfo();
229}
230
231//インフォメーション表示
232function drawInfo()
233{
234  let w;
235  con.fillStyle="white";
236
237  let s="NEXT";
238  con.fillText(s,410,120);
239
240  s="SCORE";
241  con.fillText(s,410,300);
242  s=""+score;
243  w = con.measureText(s).width;
244  con.fillText(s,560-w, 340);
245
246  s="LINES"
247  w= con.measureText(s).width;
248  con.fillText(s,410,400);
249  s=""+lines;
250  w = con.measureText(s).width;
251  con.fillText(s,560-w,440);
252  
253  if(over)
254  {
255    s="GAME OVER";
256    con.font = "40px 'ＭＳ ゴシック'";
257
258    let w = con.measureText(s).width;
259    let x = SCREEN_W/2 - w/2;
260    let y = SCREEN_H/2 - 20;
261    con.lineWidth = 4;
262    con.strokeText(s,OFFSET_X+x,y);
263    con.fillStyle="white";
264    con.fillText(s,OFFSET_X+x,y);
265  }
266}
267
268
269  //ブロックの衝突判定
270function checkMove( mx,my ,ntetro)
271{
272  if( ntetro == undefined ) ntetro = tetro;
273
274  for(let y=0; y<TETRO_SIZE ; y++ )
275  {
276    for(let x=0; x<TETRO_SIZE ; x++ )
277    {
278        if(  ntetro[y][x]  )
279        {
280        let nx = tetro_x + mx + x;
281        let ny = tetro_y + my + y;
282
283          if( ny < 0 ||
284              nx < 0 ||
285              ny >= FIELD_ROW ||
286              nx >= FIELD_COL ||
287              field[ny][nx] )
288          {
289          return false;
290        }
291      }
292    }
293  }
294  return true;
295}
296
297// テトロの回転
298function rotate()
299{
300  let ntetro = [];
301
302  for(let y=0; y<TETRO_SIZE ; y++ )
303  {
304    ntetro[y]=[];
305    for(let x=0; x<TETRO_SIZE ; x++ )
306    {
307      ntetro[y][x] = tetro[TETRO_SIZE-x-1][y];
308    }
309  }
310
311  return ntetro;
312}
313
314
315//テトロの固定
316function fixTetro()
317{
318  for(let y=0; y<TETRO_SIZE ; y++ )
319  {
320    for(let x=0; x<TETRO_SIZE ; x++ )
321    {
322      if( tetro[y][x] )
323      {
324        field[tetro_y + y][tetro_x + x] = tetro_t;
325      }
326    }
327  }
328}
329
330//ラインが揃ったかチェックして消す
331function checkLine()
332{
333  let linec=0;
334  for(let y=0; y<FIELD_ROW ; y++ )
335  {
336    let flag=true;
337
338    for(let x=0; x<FIELD_COL ; x++ )
339    {
340      if( !field[y][x] )
341      {
342        flag=false;
343        break;
344      }
345    }
346
347    if(flag)
348    { 
349      linec++;
350
351      for(let ny = y; ny>0 ; ny-- )
352      {
353        for(let nx=0;nx<FIELD_COL ; nx++)
354        {
355          field[ny][nx] = field[ny-1][nx];
356        }
357      }
358    }
359  }
360
361
362  if(linec)
363  {
364    se3.pause();
365    se3.play();
366    lines += linec;
367    score+=100*(2**(linec-1));
368    if(speed<GAME_SPEED-10)speed+=10;
369  }
370}
371
372//ブロックの落ちる処理
373function dropTetro()
374{
375  if(over)return;
376
377  if( checkMove(  0, 1 ) )tetro_y++;
378  else
379  {
380    se1.play();
381    fixTetro();
382    checkLine();
383    setTetro();
384    if( !checkMove(0,0) )over=true;
385  }
386  drawAll();
387}
388
389  // onkeydown keycode 検索
390document.onkeydown = function(e)
391{
392  if(over)return;
393
394   switch( e.keyCode )
395   {
396      case 37://左
397           if( checkMove( -1, 0 ) )tetro_x--;
398          break;
399      case 38://上
400          //  if( checkMove(  0,-1 ) )tetro_y--;
401          break;
402      case 39://右
403           if( checkMove(  1, 0 ) )tetro_x++;
404          break;
405      case 40://下
406          while( checkMove(  0, 1 ) )tetro_y++;
407          break;
408      case 32://スペース
409          let ntetro = rotate();
410          if( checkMove(  0, 0, ntetro ) )
411          {
412            se2.pause();
413            se2play();
414            tetro = ntetro;
415          }
416          break;
417   }
418
419   drawAll();
420}
421
422</script>
423</body>
424</html>
425

試したこと

init();に何も入っていなく、con.drawImageが定義されていないのが原因だと思うのですが、どう変更すれば良いかわかりません。

補足情報（FW/ツールのバージョンなど）

con.drawImage(bgimage, -100,100);　//181行目
drawAll();　//149行目
init();　//127行目
https://www.youtube.com/watch?v=zKbektbiqacこちらの動画を参考にしています。

行動規範の内容に同意します

回答1件

ベストアンサー

ここを参照すると、描画contextが設定されていないと思われます。

http://www.htmq.com/canvas/002.shtml

conを参照する前に、以下で初期すれば良いと思います。

js
1var canvas = document.getElementById('can');
2var con = canvas.getContext('2d');

投稿2020/11/08 13:10

akiruno-oneone

総合スコア815

ikedayuuki

2020/11/09 01:55

conを参照する前に記述したら無事行けました。ありがとうございました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！