Jump to content
MakeWebGames

Game loop SLOW!!!


Sim

Recommended Posts

;(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?

Link to comment
Share on other sites

;(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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...