0

I'm working on a project where I'm writing the game Tetris to be played in a browser using Javascript. I'm having a problem where the game simply stops working. It doesn't give any error messages. It's as if the game pauses itself after a random amount of time (usually around 30 seconds), after which nothing happens.

I'm using a game loop to manage the game. Here is the highest level section of code which manages the game.

var cycle = function GameTick(elapsed){

    if(menuStatus != "game"){
        renderMenu();
        updateMenu();
    }

    if(menuStatus == "game"){
        render();
        update();
    }

    requestAnimationFrame(cycle);
}

My first instinct says that after running this for a while, constantly calling new iterations of the GameTick function, it runs out of stack space, but I have no idea if this is correct. Thanks for your help, and I'd be happy to clarify anything that doesn't make sense. I know I haven't given you much to go on, but I'm not sure what else would help besides posting the entire game code (which is very long).

EDIT: I'm posting my render and update functions as requested

function update(){

    var currentTime = performance.now();
    currentTime = Math.trunc(currentTime);

    if((currentTime - beginTime) > dropTime)
    {
        pieceMoved = movePieces();
    }

    if(!pieceMoved && (currentTime - beginTime) > dropTime)  //If no pieces can move
    {
        setPieceLocation();
        handleFullRows();
        spawnNewPiece();
        console.log(pieceArray.length)
    }

    if(pieceArray.length > 0)
        console.log(pieceArray[pieceArray.length - 1].color);

    if((currentTime - beginTime) > dropTime)
        beginTime = performance.now();
}

function render(){        //This function handles the rendering
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(pieceArray.length > 0)    //This renders the current moving piece
    {
        for(var j = 0; j < 4; j++)
        {
            drawColoredBlock(pieceArray[pieceArray.length - 1].color,
                             pieceArray[pieceArray.length - 1].xCoordinates[j],
                             pieceArray[pieceArray.length - 1].yCoordinates[j]);
        }
    }

    for(var i = 0; i < 10; i++)    //This renders all of the pieces that have been placed
    {

        for(var j = 0; j < 20; j++)
        {

            if(gameBoard[i][j] != 'white')
            {
                drawColoredBlock(gameBoard[i][j], i, j);
            }
        }
    }
}
RobG
  • 142,382
  • 31
  • 172
  • 209
user3047641
  • 149
  • 1
  • 2
  • 12
  • what does render*/update* contain? –  Mar 31 '15 at 02:52
  • If line 1 of your loop is a `console.log`, does that continue to log after it "crashes"? – Farzher Mar 31 '15 at 02:59
  • Have you tried hitting F12 to check if there are any errors? – Millie Smith Mar 31 '15 at 03:01
  • Yes, I've looked at the console. There are no errors. The console.log function continues to run after it stops working. – user3047641 Mar 31 '15 at 03:02
  • Just looking at it quickly, I think you are doing something wrong with the timings. Could you set up a minimalist demo of what you have so we can check closer? (fiddle or inline). I am particularly interested in how you set dropTime; and you never use elapsed time. There shouldn't be a need to truncate the time either.. –  Mar 31 '15 at 05:37

0 Answers0