実現したいこと
テトリスのテトロミノを動かしたい
前提
JavaScriptでテトリスを作っています
エラーが発生していないのにテトロミノが動かなくなってしまった
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html> <body> <canvas id="can"></canvas> <script> //フィールドサイズ const FIELD_COL = 10; const FIELD_ROW = 20; //ブロック一つのサイズ(ピクセル) const BLOCK_SIZE = 30; //キャンバスサイズ const SCREEN_W = BLOCK_SIZE * FIELD_COL const SCREEN_H = BLOCK_SIZE * FIELD_ROW //テトロミノのサイズ const TETRO_SIZE=4; let can = document.getElementById("can"); let con = can.getContext("2d"); can.width = SCREEN_W; can.height = SCREEN_H; can.style.border = "4px solid #555 "; //テトロミノ本体 let tetro = [ [ 0,0,0,0,], [ 1,1,0,0,], [ 0,1,1,0,], [ 0,0,0,0,] ]; //テトロミノの座標 let tetro_x = 0; let tetro_y = 0; //フィールドの中身 let field = []; //初期化 function init() { for(let y=0; y<FIELD_ROW ; y++) { field[y] = []; for(let x=0; x<FIELD_COL ; x++) { field[y][x] = 0; } } } init() drawAll() //ブロック一つを描画 function drawBlock(x,y) { let px = x * BLOCK_SIZE; let py = y * BLOCK_SIZE; con.fillStyle="red"; con.fillRect(px,py, BLOCK_SIZE ,BLOCK_SIZE ); con.fillStyle="black"; con.strokeRect(px,py, BLOCK_SIZE ,BLOCK_SIZE ); } //すべて描画する function drawAll() { con.clearRect(0,0,SCREEN_W,SCREEN_H); for(let y=0; y<FIELD_ROW ; y++) { for(let x=0; x<FIELD_COL ; x++) { if( field[y][x] ) { drawBlock(x,y); } } } for(let y=0; y<TETRO_SIZE ; y++) { for(let x=0; x<TETRO_SIZE ; x++) { if( tetro[y][x] ) { drawBlock(tetro_x+x,tetro_y+y); } } } } //ブロックの当たり判定 function checkMove( mx, my) { for(let y=0; y<TETRO_SIZE ; y++) { for(let x=0; x<TETRO_SIZE ; x++) { let nx = tetro_x + mx + x; let ny = tetro_y + my + y; if ( tetro[y][x] ) { if( field[ny][nx] || ny < 0 || nx < 0 || ny >= FIELD_ROW || nx >= FIELD_COL) { return false; } } } } } //キーボードが押された時の処理 document.onkeydown = function(e) { // onkeydown keycode 検索 switch( e.keyCode ) { case 37://左 if( checkMove( -1,0 ) )tetro_x--; break; case 38://上 if( checkMove( 0,-1 ) )tetro_y--; break; case 39://右 if( checkMove( 1,0 ) )tetro_x++; break; case 40://下 if( checkMove( 0,1 ) )tetro_y++; break; case 32://スペース break; } drawAll(); } </script> </body> </html>
試したこと
ソースを使って確認してみたところ途中まではしっかりと動いているが //ブロック一つを描画 のところで元の位置に再度テトロミノを描画してしまっているような気がする
補足情報(FW/ツールのバージョンなど)
サクラエディタを使っている
参考にしている動画
https://www.youtube.com/watch?v=l-soXvaISok&list=PLa3BDwShqOrThKoaWauNo8EKZda4pat7Z&index=3
JavaとJavaScriptは全く別の言語です。
「JavaScript」タグに変更してください。

回答1件
あなたの回答
tips
プレビュー