Javascriptゲームの奇妙な問題

Question

OK、私はJSを初めて使っているので、基本的な「ブレークアウト」ゲームを作ろうとしています。私がしようとしているのは、レンガを三角形に配置することです（またはより正確には、レンガがない場合は三角形を形成する）。しかし、2D配列のどのアイテムを0にするか（レンガなし）、私は1つしか選択できません。その後、ゲームは単に読み込まれません。

最も奇妙なことは、この部分の最初の行のみを受け入れることです。どんなに私が変えるものを、二行目以降でない負荷にゲームを引き起こさないだろう：

  bricks[0][10]=0; 
      bricks[7][16]=0; 
      bricks[7][15]=0; 
      bricks[7][14]=0; 
      bricks[7][13]=0; 
      bricks[7][12]=0; 
      bricks[7][11]=0; 
      bricks[7][10]=0; 
      bricks[7][9]=0; 
      bricks[7][8]=0; 
      bricks[7][7]=0; 
      bricks[7][6]=0; 
      bricks[7][5]=0; 
      bricks[7][4]=0; 
      bricks[7][3]=0; 
      bricks[7][17]=0; 
      bricks[6][4]=0; 
      bricks[6][16]=0; 
      bricks[5][15]=0; 
      bricks[5][5]=0; 
      bricks[4][14]=0; 
      bricks[4][6]=0; 
      bricks[3][13]=0; 
      bricks[3][7]=0; 
      bricks[2][8]=0; 
      bricks[2][12]=0; 
      bricks[1][11]=0; 
      bricks[1][9]=0; 

をまた、私はそれがあるように、コードが不完全と欠陥がある知っています。それは完了していないとまだ多くの磨きをする必要があります。 はここで、適切なインデントでは私の全体のコード

canvasApp(); 

function canvasApp(){ 

var canvas=document.getElementById("canvas") 
if (!canvas || !canvas.getContext){ 
    return; 
} 
var ctx = canvas.getContext("2d"); 

if (!ctx) { 
     return 
} 

//Application States 

const GAME_STATE_TITLE = 0; 
const GAME_STATE_NEW_LEVEL = 1; 
const GAME_STATE_GAME_OVER = 2; 

var currentGameState = 0; 
var currentGameStateFunction = null; 
var brickcount; 
var bouncecount = 0; 

//Initialise Start Screen State 
var titleStarted = false; 
var gameStarted = false; 
var gameOver = false; 
var keyPressList = []; 
var keys = false //mouse or keys. false = mouse control, vice versa 
var difficulty = 0; 

// Declarations for the game 

var dx = 6; 
var dy = 6; 
var x = 150; 
var y = 100; 
var r = 10; 
var WIDTH = 500; 
var HEIGHT = 400; 
var ballx = 200; 
var bally = 200; 
var paddlex = WIDTH/1.2; 
var paddleh = 10; 
var paddlew = 75; 
var paddledx = 30 
var mouseX; 
var bricks; 
var NROWS; 
var NCOLS; 
var BRICKWIDTH; 
var BRICKHEIGHT; 
var PADDING; 
var rowcolours = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093"]; 
var paddlecolour = "#FF00FF"; 
var ballcolour = "#00FFFF"; 
var backcolour = "#0000FF"; 

function initbricks() { 
      NROWS = 9 
      NCOLS = 21 
      brickcount = NROWS*NCOLS; 
      BRICKWIDTH = (WIDTH/NCOLS) - 1; 
      BRICKHEIGHT = 10; 
      PADDING = 1; 

      bricks = new Array(NROWS); 
      for (i=0; i < NROWS; i++) { 
       bricks[i] = new Array(NCOLS); 
      for (j=0; j < NCOLS; j++) { 
       bricks[i][j] = 1; 
      } 
     bricks[0][10]=0; 
     bricks[7][16]=0; 
     bricks[7][15]=0; 
     bricks[7][14]=0; 
     bricks[7][13]=0; 
     bricks[7][12]=0; 
     bricks[7][11]=0; 
     bricks[7][10]=0; 
     bricks[7][9]=0; 
     bricks[7][8]=0; 
     bricks[7][7]=0; 
     bricks[7][6]=0; 
     bricks[7][5]=0; 
     bricks[7][4]=0; 
     bricks[7][3]=0; 
     bricks[7][17]=0; 
     bricks[6][4]=0; 
     bricks[6][16]=0; 
     bricks[5][15]=0; 
     bricks[5][5]=0; 
     bricks[4][14]=0; 
     bricks[4][6]=0; 
     bricks[3][13]=0; 
     bricks[3][7]=0; 
     bricks[2][8]=0; 
     bricks[2][12]=0; 
     bricks[1][11]=0; 
     bricks[1][9]=0; 
     } 
     } 

initbricks(); 

function switchGameState(newState) { 
    currentGameState = newState; 
    switch (currentGameState) { 
     case GAME_STATE_TITLE: 
     currentGameStateFunction = gameStateTitle; 
     break; 
     case GAME_STATE_NEW_LEVEL: 
     currentGameStateFunction = gameStatePlayLevel; 
     break; 
     case GAME_STATE_GAME_OVER: 
     currentGameStateFunction = gameStateGameOver; 
     break; 
     } 
    } 

function gameStateTitle(){ 
    if (titleStarted != true){ 
     ctx.fillStyle = '#000000'; 
     ctx.fillRect(0,0,500,400); 
     ctx.fillStyle = '#ffffff'; 
     ctx.font = '20px _sans'; 
     ctx.textBaseline = 'top'; 
     ctx.fillText ("Breakout!", 200,150); 
     ctx.fillText ("Press Space to Play", 170,200); 
     if (keys == 0) { 
      ctx.fillText ("Mouse selected", 180,250); 
      ctx.fillText ("Press k to switch to keys", 140,300); 
      } else { 
      ctx.fillText ("Keys selected", 190,250); 
      ctx.fillText ("Press m to switch to mouse", 140,300); 
     } 
     titleStarted = true;  

    }else{ 
     if (keyPressList[75] == true){ 
      keys = 1; 
      titleStarted = false; 
      gameStateTitle(); // Redraw the title page 
      } 
     if (keyPressList[77] == true){ 
      keys = 0; 
      titleStarted = false; 
      gameStateTitle(); 
      } 
     if (keyPressList[32] == true){ 
      switchGameState(GAME_STATE_NEW_LEVEL); 
      titleStarted = false; 
      } 
     } 
    } 


function gameStatePlayLevel(){ 
    ctx.fillStyle = '#000000'; 
     ctx.fillRect(0,0,500,400); 
     ctx.fillStyle = '#ffffff'; 


    // Update the game state and check for game over 
     function update() { 
     x+=dx 
     y+=dy 
     if (keys == 0) { 
      paddlex = mouseX; 
      }else{ 
      if (keyPressList[37]==true){ 
      paddlex-=paddledx; 
      } 
     if (keyPressList[39]==true){ 
      paddlex+=paddledx; 
     } 
      } 
     //have we hit a brick? 
      rowheight = BRICKHEIGHT + PADDING; 
      colwidth = BRICKWIDTH + PADDING; 
      row = Math.floor(y/rowheight); 
      col = Math.floor(x/colwidth); 
      //if so, reverse the ball and mark the brick as broken 
       if (y < NROWS * rowheight && row >= 0 && col >= 0 &&  bricks[row][col] == 1) { 
        dy = -dy; 
        bricks[row][col] = 0; 
        brickcount--; 
        if (brickcount == 0) { 
         switchGameState(GAME_STATE_NEW_LEVEL); 
         difficulty+=1; 
         initbricks(); 
         x=250; 
         y=200 + (difficulty*20); 
         brickcount=NROWS*NCOLS; 
         bouncecount=0; 
        } 
       } 

        if(x<0 || x>WIDTH) dx=-dx; 
      if(y<0 || y>HEIGHT) dy=-dy; 
       else if (y + dy > HEIGHT) { 
        if (x > paddlex && x < paddlex + paddlew) { 
         dx = 8 * ((x-(paddlex+paddlew/2))/paddlew); 
         dy = -dy; 
         bouncecount++; 
        } 

     else { 
     //game over, so stop the animation 
      switchGameState(GAME_STATE_GAME_OVER); 
      initbricks(); 
     } 
     } 
     } 

     function render() { 
     ctx.save(); 
      function circle(x,y,r) { 
       ctx.beginPath(); 
       ctx.arc(x, y, r, 0, Math.PI*2, true); 
       ctx.fill(); 
      } 
      function rect(x,y,w,h) { 
       ctx.beginPath(); 
       ctx.rect(x,y,w,h); 
       ctx.closePath(); 
       ctx.fill(); 
       ctx.stroke(); 
      } 
     //draw bricks 
      for (i=0; i < NROWS; i++) { 
      ctx.fillStyle = rowcolours [i]; 
       for (j=0; j < NCOLS; j++) { 
        if (bricks[i][j] == 1) { 
        rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
        (i * (BRICKHEIGHT + PADDING)) + PADDING, BRICKWIDTH,  BRICKHEIGHT); 
        } 
       } 
      } 



     circle(x, y, 10); 
     // init_paddle(); 
     ctx.fillStyle = paddlecolour; 
     rect (paddlex, HEIGHT-paddleh, paddlew, paddleh); 

     ctx.restore(); 
     show_result() 
     } 
     update(); 
     render(); 
} 

function gameStateGameOver(){ 
    if (gameOver != true){ 
     bouncecount=0; 
     ctx.fillStyle = '#000000'; 
     ctx.fillRect(0,0,500,400); 
     ctx.fillStyle = '#ffffff'; 
     ctx.font = '20px _sans'; 
     ctx.textBaseline = 'top'; 
     ctx.fillText ("Game over", 200,150); 
     ctx.fillText ("Press Space to Restart", 160,200); 
     ctx.fillText ("You completed " + difficulty + " levels", 160,240); 
     difficulty=0; 
     gameOver = true; 
    }else{ 
    if (keyPressList[32] == true){ 
     switchGameState(GAME_STATE_TITLE); 
     gameOver = false; 
     } 
    } 
} 


function runGame(){ 
    currentGameStateFunction(); 
    } 

// Key handler 

document.onkeydown = function(e){ 
e= e?e:window.event; 
keyPressList[e.keyCode] = true; 
} 
document.onkeyup = function(e){ 
e= e?e:window.event; 
keyPressList[e.keyCode] = false; 
} 
function onMouseMove(evt) { 
// Event data passes to this function 
mouseX = evt.clientX-canvas.offsetLeft - paddlew/2; 
// Assign the relative position of the mouse in the canvas to mouseX 
mouseY = evt.clientY-canvas.offsetTop; 
//Do the same for mouseY 
document.title="("+mouseX+","+mouseY+")"; 
//Put the mouse X and Y in the title for info 
paddlex = mouseX; 
// Position the paddle 
} 
canvas.addEventListener("mousemove",onMouseMove, false); 

//Application start 

switchGameState(GAME_STATE_TITLE); 
const FRAME_RATE = 40; 
var intervalTime = 1000/FRAME_RATE; 
setInterval(runGame, intervalTime); 
     function show_result(){ 
      ctx.fillText ("There are " + brickcount + " bricks", 160,200); 
ctx.fillText ("Paddle bounces are " + bouncecount , 160,220); 
     } 
} 

Answer 1

だ、あなたのコードは次のようになります。つまり

 bricks = new Array(NROWS); 
     for (i=0; i < NROWS; i++) { 
      bricks[i] = new Array(NCOLS); 
      for (j=0; j < NCOLS; j++) { 
       bricks[i][j] = 1; 
      } 
      bricks[0][10]=0; 
      bricks[7][16]=0; 

、あなただけのbricks[0]がされているときに、非常に最初の繰り返しでbricks[7]にアクセスしようとしています作成した。オーバーライドのリストを実行する前に、最初のforループを}で正しく閉じてください。