Game loop SLOW!!!

[Sim]

;(function() {
 
 fps = 0
 requestTime = 0
  canvas = document.getElementById('gameCanvas')
  ctx = canvas.getContext('2d')
  gridWidth = 10
  gridHeight = 10
  xOffset = 0
  yOffset = 0
  grid = createGrid(gridWidth, gridHeight)
  
  
  initialize()
  
  window.addEventListener('resize', resizeCanvas)
    canvas.addEventListener('click', canvasClick )
    window.requestAnimationFrame(gameLoop)
    gameLoop()
  //gameLoop()

function gameLoop() {
    drawGrid()
    //setTimeout(gameLoop, 1000)
    window.requestAnimationFrame(gameLoop)
}

  
  function drawX()
  {
    for(x = 0; x < gridWidth - 1; x++)
    {
      for(y = 0; y < gridHeight; y++)
      {
        if(grid[x][y] == "X")
        {
          
          xOffset = window.innerWidth / gridWidth
          xPOS = x * xOffset
    
          yOffset = window.innerHeight / gridHeight
          yPOS = y * yOffset

          ctx.moveTo(xPOS, yPOS)
          ctx.moveTo(xPOS + xOffset, yPOS + yOffset)
          
          ctx.moveTo(xPOS + xPOS, yPOS)
          ctx.moveTo(xPOS, yPOS + yOffset)
          ctx.stroke()
          
        }
      }
    }
  }
  
  function drawGrid() 
  {
    ctx.save()
    ctx.strokeStyle = 'black'
    ctx.lineWidth = .05

    for(x = 1; x < gridWidth; x++)
    {
      for(y = 1; y < gridHeight; y++)
      {
        ctx.moveTo(x * xOffset, 0)
        ctx.lineTo(x * xOffset, window.innerHeight)
        ctx.stroke()
        
        ctx.moveTo(0, y * yOffset)
        ctx.lineTo(window.innerWidth, y * yOffset)
        ctx.stroke()
        
        if(grid[x-1][y-1] == "X")
        {
          ctx.strokeStyle = 'blue'
          ctx.lineWidth = .75
          //alert(grid[x-1][y-1] + x + ';' + y)
          
          xPOS = (x -1) * xOffset
          yPOS = (y - 1) * yOffset

          ctx.moveTo(xPOS, yPOS)
          ctx.lineTo(xPOS + xOffset, yPOS + yOffset)
          ctx.stroke()
          
          ctx.moveTo(xPOS + xOffset, yPOS)
          ctx.lineTo(xPOS, yPOS + yOffset)
          ctx.stroke()
          
          ctx.strokeStyle = 'black'
          ctx.lineWidth = .05
          
        }        
        
      }
    }
   ctx.restore()

  }
  
function checkDiagnolBackwards(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function checkDiagnolForward(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
 
  function checkColumns(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function checkRows(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function createGrid(gWidth, gHeight)
  {
    g = new Array()
    for(i = 0; i < gWidth; i++)
    {
      g[i] = new Array(gHeight).fill(3)
    }
    
    return g
  }

  function initialize() {
    resizeCanvas()
    
  }


  function redrawBoarder() {
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = '5'
    ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight)
  }


  function resizeCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    xOffset = window.innerWidth / gridWidth
    yOffset = window.innerHeight / gridHeight
    //redrawBoarder();
  }
  
  
  function canvasClick(e)
  {
 
    xClick = window.innerWidth / gridWidth
    xClick = Math.ceil(e.pageX / xClick)
    
    yClick = window.innerHeight / gridHeight
    yClick = Math.ceil(e.pageY / yClick)
    grid[xClick-1][yClick-1] = "X"
    
  }
  
})();

 

 

So I been playing around with a little JS project just took get my mind back into full coding mind.

 

The problem is, my game loop is ruining extremity slow. Ex: when a grid is CLICKED it takes second to draw the new X. Does anyone have any ideas?

[Sim]

;(function() {
 
 fps = 0
 requestTime = 0
  canvas = document.getElementById('gameCanvas')
  ctx = canvas.getContext('2d')
  gridWidth = 10
  gridHeight = 10
  xOffset = 0
  yOffset = 0
  grid = createGrid(gridWidth, gridHeight)
  
  initialize()
  
  window.requestAnimationFrame(gameLoop)
  canvas.addEventListener('click', canvasClick )
  resizeCanvas()

function gameLoop() 
{
  //  ctx.clearRect(0,0,gridWidth, gridHeight)
   // ctx.save()
    
    drawGrid()
    drawPieces()
    
   // ctx.restore()
    //setTimeout(gameLoop, 1000)
    window.requestAnimationFrame(gameLoop)
}

  function drawPieces()
  {
   for(x = 0; x < gridWidth - 1; x++)
    {
      for(y = 0; y < gridHeight - 1; y++)
      {
        if(grid[x][y] == "X")
        {
          drawX(x, y)
        }
      }
    }
  }
  
  function drawX(x, y)
  {
    yPOS = y * yOffset
    xPOS = x * xOffset

    ctx.moveTo(xPOS, yPOS)
    ctx.lineTo(xPOS + xOffset, yPOS + yOffset)
    ctx.stroke()
          
    ctx.moveTo(xPOS + xOffset, yPOS)
    ctx.lineTo(xPOS, yPOS + yOffset)
    ctx.stroke()
  }
  
  function drawGrid() 
  {
    ctx.strokeStyle = 'black'
    ctx.lineWidth = .05

    for(i = 0; i < gridWidth; i++)
    {
      ctx.moveTo(i * xOffset, 0)
      ctx.lineTo(i * xOffset, window.innerHeight)
      ctx.stroke()
        
      ctx.moveTo(0, i * yOffset)
      ctx.lineTo(window.innerWidth, i * yOffset)
      ctx.stroke()
    }
    
  }
  
function checkDiagnolBackwards(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function checkDiagnolForward(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
 
  function checkColumns(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function checkRows(rows, columns, piece, gWidth, gHeight, count)
  {
    
  }
  
  function createGrid(gWidth, gHeight)
  {
    g = new Array()
    for(i = 0; i < gWidth; i++)
    {
      g[i] = new Array(gHeight).fill(3)
    }
    
    return g
  }

  function initialize()
  {
    resizeCanvas()
    
  }


  function redrawBoarder()
  {
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = '5'
    ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight)
  }


  function resizeCanvas() 
  {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    xOffset = window.innerWidth / gridWidth
    yOffset = window.innerHeight / gridHeight
    //redrawBoarder();
  }
  
  
  function canvasClick(e)
  {
    
    xClick = Math.ceil(e.pageX / xOffset)
    yClick = Math.ceil(e.pageY / yOffset)
    grid[xClick-1][yClick-1] = "X"
    
  }
  
})();

 

 

I found my problem. I was running to manyy calculations that wasn't needed at the time.  That's from taking a break does to people after awhile.

[Dave]

Sounds like you found the optimizations you needed, always be mindful of what operations you complete inside of for or foreach loops.