前提・実現したいこと
テトリスを作っていました。
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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/14 14:44
2021/03/14 14:49
2021/03/14 16:18 編集
2021/03/15 10:41
2021/03/15 15:08 編集
2021/03/15 16:39