🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1513閲覧

テトリスを作ったのですが、ブロックが落ちてこないことがある。

shidada

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/03/14 13:43

前提・実現したいこと

テトリスを作っていました。
1から考えたのではなく、ほとんど模写した状態ですが、一つ一つの意味は理解しております。

0が読み取れない?みたいなので、
そこを意識してコードを読み返したのですが分かりませんでした。

また、エラーメッセージで指摘されているHTMLの行も確認しましたが分かりませんでした。

どなたか、お力添えいただけたらと思います。

答えのコードがなくても、些細なアドバイスでもいいので、是非よろしくお願いします。

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

index.html:176 Uncaught TypeError: Cannot read property '0' of undefined at checkMove (index.html:176) at dropTetro (index.html:251) Uncaught TypeError: Cannot read property '0' of undefined at checkMove (index.html:176) at HTMLDocument.document.onkeydown (index.html:273) Uncaught TypeError: Cannot read property '0' of undefined at checkMove (index.html:176) at HTMLDocument.document.onkeydown (index.html:270)

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head><meta charset="utf-8"></head> 4 <body> 5 <canvas id="can"></canvas> 6 <script> 7 //落ちるスピード 8 const GAME_SPEED=300; 9 //フィールドサイズ 10 const FIELD_COL = 10; 11 const FIELD_ROW = 20; 12 //ブロックの1つのサイズ(ピクセル) 13 const BLOCK_SIZE = 30; 14 //キャンバスサイズ 15 const SCREEN_W = BLOCK_SIZE * FIELD_COL; 16 const SCREEN_H = BLOCK_SIZE * FIELD_ROW; 17 //テトロミノのサイズ 18 const TETRO_SIZE = 4; 19 20 let can = document.getElementById("can"); 21 let con = can.getContext("2d"); 22 23 can.width = SCREEN_W; 24 can.height = SCREEN_H; 25 can.style.border = "4px solid #555"; 26 27 const TETRO_COLORS=[ 28 "#000",//0空 29 "#6CF",//1水色 30 "#F92",//2オレンジ 31 "#66F",//3青 32 "#C5C",//4紫 33 "#FD2",//5黄色 34 "#F44",//6赤 35 "#5B5"//7緑 36 ] 37 38 const TETRO_TYPES=[ 39 [],//0.空っぽ 40 [ //1.I 41 [0,0,0,0], 42 [1,1,1,1], 43 [0,0,0,0], 44 [0,0,0,0] 45 ], 46 [ //2.L 47 [0,1,0,0], 48 [0,1,0,0], 49 [0,1,1,0], 50 [0,0,0,0] 51 ], 52 [ //3.J 53 [0,0,1,0], 54 [0,0,1,0], 55 [0,1,1,0], 56 [0,0,0,0] 57 ], 58 [ //4.T 59 [0,1,0,0], 60 [0,1,1,0], 61 [0,1,0,0], 62 [0,0,0,0] 63 ], 64 [ //5.O 65 [0,0,0,0], 66 [0,1,1,0], 67 [0,1,1,0], 68 [0,0,0,0] 69 ], 70 [ //6.Z 71 [0,0,0,0], 72 [1,1,0,0], 73 [0,1,1,0], 74 [0,0,0,0] 75 ], 76 [ //7.S 77 [0,0,0,0], 78 [0,0,1,1], 79 [0,1,1,0], 80 [0,0,0,0] 81 ] 82 ]; 83 84 const START_X = FIELD_COL/2 - TETRO_SIZE/2; 85 const START_Y = 0; 86 //テトロミノ本体 87 let tetro ; 88 89 //テトロミノの座標 90 let tetro_x = START_X; 91 let tetro_y = START_Y; 92 //テトロミノの中身 93 let tetro_t; 94 95 //フィールドの中身 96 let field = []; 97 98 //ゲームオーバーフラグ 99 let over =false; 100 101 tetro_t = Math.floor(Math.random()*(TETRO_TYPES.length-1))+1; 102 tetro=TETRO_TYPES[tetro_t]; 103 104 init(); 105 drawAll(); 106 107 108 setInterval(dropTetro,GAME_SPEED); 109 110 111 //初期化の関数 112 function init(){ 113 for(let y=0; y<FIELD_ROW ; y++){ 114 field[y] = []; 115 for(let x=0; x<FIELD_COL;x++){ 116 field[y][x] = 0; 117 } 118 } 119 120 } 121 122 123 124 125 //ブロック1つを描画する関数 126 function drawBlock(x,y,c){ 127 let px= x * BLOCK_SIZE; 128 let py= y * BLOCK_SIZE; 129 130 con.fillStyle=TETRO_COLORS[c]; 131 con.fillRect(px,py,BLOCK_SIZE,BLOCK_SIZE); 132 133 con.strokeStyle="black"; 134 con.strokeRect (px,py,BLOCK_SIZE,BLOCK_SIZE); 135 } 136 137 138 //全部描画する関数 139 function drawAll(){ 140 con.clearRect(0,0, SCREEN_W,SCREEN_H); 141 for(let y=0; y<FIELD_ROW ; y++){ 142 for(let x=0; x<FIELD_COL;x++){ 143 if(field [y][x]){ 144 drawBlock(x,y,field[y][x]); 145 } 146 } 147 } 148 149 for(let y=0; y<TETRO_SIZE ; y++){ 150 for(let x=0; x<TETRO_SIZE;x++){ 151 if(tetro [y][x]){ 152 drawBlock(tetro_x+x,tetro_y+y,tetro_t); 153 } 154 } 155 } 156 if(over){ 157 let s="GAME OVER"; 158 con.font = "40px'MS ゴシック'"; 159 let w= con.measureText(s).width; 160 let x= SCREEN_W/2 - w/2; 161 let y= SCREEN_H/2 - 20; 162 con.lineWidth = 4; 163 con.strokeText(s,x,y); 164 con.fillStyle = "white"; 165 con.fillText(s,x,y); 166 } 167 } 168 169 170 171 //衝突判定 172 function checkMove(mx,my,ntetro){ 173 if(ntetro == undefined)ntetro= tetro; 174 for(let y=0; y<TETRO_SIZE ; y++){ 175 for(let x=0; x<TETRO_SIZE;x++){ 176 if(ntetro [y][x]){ 177 let nx = tetro_x+mx+x; 178 let ny = tetro_y+my+y; 179 180 if(ny<0||nx<0 181 ||ny>=FIELD_ROW||nx>=FIELD_COL 182 ||field[ny][nx]){ 183 return false; 184 } 185 } 186 } 187 } 188 return true; 189 } 190 191 192 //回転 193 function rotate(){ 194 let ntetro=[]; 195 for(let y=0; y<TETRO_SIZE ; y++){ 196 ntetro[y]=[]; 197 for(let x=0; x<TETRO_SIZE;x++){ 198 ntetro[y][x]= tetro[TETRO_SIZE-x-1][y]; 199 } 200 } 201 return ntetro; 202 } 203 204 //テトロを固定する 205 function fixTetro(){ 206 for(let y=0; y<TETRO_SIZE ; y++){ 207 for(let x=0; x<TETRO_SIZE;x++){ 208 if(tetro [y][x]){ 209 field[tetro_y+y][tetro_x+x]=tetro_t; 210 } 211 } 212 } 213 } 214 //ラインが揃ったかチェックして消す 215 function checkLine(){ 216 let linec=0; 217 for(let y=0 ; y<FIELD_ROW ; y++){ 218 let flag = true; 219 for(let x=0 ; x<FIELD_COL ; x++){ 220 if(!field[y][x]){ 221 flag = false; 222 break; 223 } 224 } 225 if(flag){ 226 linec++; 227 228 for(let ny=y ;ny>0 ;ny--){ 229 for(let nx=0 ;nx<FIELD_COL ;nx++){ 230 field[ny][nx]= field[ny-1][nx]; 231 } 232 } 233 } 234 } 235 } 236 237 //ブロックの落ちる処理 238 function dropTetro(){ 239 if(over)return; 240 if (checkMove(0,1))tetro_y++; 241 else{ 242 fixTetro(); 243 checkLine(); 244 245 246 tetro_t = Math.floor(Math.random()*TETRO_TYPES.length-1)+1; 247 tetro=TETRO_TYPES[tetro_t]; 248 tetro_x=START_X; 249 tetro_y=START_Y; 250 251 if(!checkMove(0,0)){ 252 over= true; 253 } 254 } 255 drawAll(); 256 } 257 258 259 //キーボードが押された時の処理 260 document.onkeydown = function(e){ 261 if(over)return; 262 switch(e.keyCode){ 263 case 37://左 264 if(checkMove(-1,0))tetro_x-- 265 break; 266 case 38://上 267 if(checkMove(0,-1))tetro_y-- 268 break; 269 case 39://右 270 if(checkMove(1,0))tetro_x++; 271 break; 272 case 40://下 273 if(checkMove(0,1))tetro_y++; 274 break; 275 case 32://スペース 276 let ntetro =rotate(); 277 if(checkMove(0,0,ntetro)){tetro= rotate();} 278 break; 279 } 280 drawAll(); 281 282 283 } 284 285 286 287 288 289 290 291 292 </script> 293 </body> 294</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

checkMove()を呼び出すときに引数が2つしかないものがあるが、
checkMove()が受け取る3つ目の引数が配列なので
Cannot read property '0' of undefinedエラーが出る。
だから3つ目の引数も書く

投稿2021/03/14 14:11

modieu

総合スコア282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shidada

2021/03/14 14:44

ご回答ありがとうございます! もし、配列が引数がない、すなわちundefinedだったら、ntetro=tetroというので、それは解消されていると思ったのですが!!!! ちょっと、それを使わずに、全部3つ目の引数も書いてみますね。
shidada

2021/03/14 14:49

すべて、きちんと3つ目の引数までかいてみたのですが、やはり同じエラーが出てきてしまいました。せっかくコメントしていただいたのに、申し訳ありません。
modieu

2021/03/14 16:18 編集

上記のは間違ってました。すみません。 const TETRO_TYPES の1つ目が [] なので tetro_t = Math.floor(Math.random()*TETRO_TYPES.length-1)+1; で tetro_t が0になった時に tetro=TETRO_TYPES[tetro_t]; が tetro=TETRO_TYPES[0]; つまり tetro=[]; となっているのが原因だと思います。 ntetro=[]; x=0; y=0; console.log(ntetro[y][x]); この4行を実行してみると同じエラーが出るので多分そうだと思います。
shidada

2021/03/15 10:41

modieu様 ご回答ありがとうございます。コードを読んでいただきありがとうございます。 また、編集で詳細を加えてくださり、ありがとうございます。 私の認識です↓ 配列には、0番目が[]で、1から7番目まである。 「1~7までを取り出したい!」と思ってコードを書く。 今、lengthは8。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーー tetro_t = Math.floor(Math.random()*(TETRO_TYPES.length-1))+1; に訂正しました! これでできた!と思ったんですが。。。 おんなじエラーになってしまいました。 0~1 に8-1=7をかけて 0~7にして 小数点を切り捨てて 0,1,2,3,4,5,6 最後に1を足して 1,2,3,4,5,6,7 で合ってるとおもったのですが。。。
modieu

2021/03/15 15:08 編集

tetro_t= が2箇所あり、 両方とも tetro_t = Math.floor(Math.random()*(TETRO_TYPES.length-1))+1; としてみましたか? ソースコードのこの2箇所に式をコピペして実行したら 私のところではエラーは出ませんでした。 (実際には100行目付近にある tetro_t=… は正しい式で、 dropTetro() 内の tetro_t=… の式がエラーの原因だと思います)
shidada

2021/03/15 16:39

madieu様 大変失礼いたしました。 このミスに関して、もっと自分で考えろ!!!って感じですね。。。 恥ずかしいですし、わざわざ実行してもらったのに、申し訳なく思います。 分かりやすい説明、本当に感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問