Image Stops For A Second While Switching Arrow Keys

I have another question. When I move the main player image Left or Right it moves great except for when you are moving right and then you hurry and press the left key while the rig

Solution 1:

This is because you stop your player no matter what key is up. You should store what key down is last pressed, than on key up you need to check if last key is released.

It was hard to me to debug your code, so I made it in jQuery (and had same troubles as you had):

var game = {
    settings: {
    	moveSpeed: 5, // 5 milliseconds, 200fps  moveBy: 2// 2 pixels
    },
    land: null,
    landWidth: null,
    landLeft: null,
    viewport: null,
    viewportWidth: null,
    landMinLeft: null,
    init: function() {
        game.land = $('.land');
        game.landWidth = game.land.width();
        game.landLeft = game.land.position().left;
        game.viewport = $('.viewport');
        game.viewportWidth = game.viewport.width();
        game.landMinLeft = -(game.landWidth-game.viewportWidth);
    },
    movingInterval: null,
    lastKey: null,
    keyDown: function (e) {
		switch (e.keyCode) {
        	case39: // RIGHT
                game.lastKey = e.keyCode;
                clearInterval( game.movingInterval );
                game.movingInterval = setInterval( function() {
                    game.move('right');
                }, game.settings.moveSpeed);
                break;
            case37: // LEFT
                game.lastKey = e.keyCode;
                clearInterval( game.movingInterval );
                game.movingInterval = setInterval( function() {
                    game.move('left');
                }, game.settings.moveSpeed);
                break;
        }
    },
    keyUp: function(e) {
        if( e.keyCode==game.lastKey ) {
        	game.stopMoving();
        };
    },
    move: function( direction ) {
    	switch( direction ) {
            case'left':
                var newLeft = game.land.position().left+game.settings.moveBy;
                if( newLeft>0 ) newLeft=0;
                game.land.css({
                   'left': newLeft+'px' 
                });
                break;
            case'right':
                var newLeft = game.land.position().left-game.settings.moveBy;
                if( newLeft<game.landMinLeft ) newLeft=game.landMinLeft;
                game.land.css({
                   'left': newLeft+'px' 
                });
                break;
        };
    },
    stopMoving: function() {
    	clearInterval( game.movingInterval );
    }
};
game.init();
$(window).on('keydown', game.keyDown);
$(window).on('keyup', game.keyUp);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html, .viewport {
    width: 100%;
    height: 100%;
}
.viewport {
    position: relative;
    overflow: hidden;
}
.land {
    position: absolute;
    left: 0;
    top: 0;
    width: 2300px;
    height: 200px;
    background: url('//dummyimage.com/2300x400/000/fff&text=Mario+is+great!+Mario+is+our+hero!+We+love+you+mario!') no-repeat center center;
    background-size: cover;
    will-change: left;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="viewport"><divclass="land"></div></div>

Also on Playground.

Solution 2:

This is how you do it in Javascript/HTML5

theGame.js

var getPlatF1POSX = 0;
var getPlatF1POSY = 0;
var addVar = 0;
var addVar2 = 0;
var addVar3 = 0;

var thisThis = 1;
var moveBlock1 = 350;
var stLandT = 0;

var moveRight = false;
var moveLeft = false;
var movePL = 0;
var movePR = 0;

//////////////////////////////////////////////////////////
//
// LOAD PLATFORMS/SET KEY UP AND DOWN/SET PLAYER POS 


function loadGame() {
    document.getElementsByTagName("DIV")[4].style.visibility = "visible";
    addEventListener('mousemove', getData, false);
    addEventListener('keydown', movePlayer, false);
    addEventListener('keyup', stopPlayer, false);
    moveP();

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  
}

function getData(gData) {

}

//////////////////////////////////////////////////////////
//
// KEY DOWN TO MOVE PLAYER 

function movePlayer(mPlayer) {
    switch (mPlayer.keyCode) {
        case 39: // RIGHT
            if (stLandT == 0) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;    
            }

                movePL = 0;
                movePR = 1;

        break;

        case 37: // LEFT
            if (stLandT == 0) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;    
            }

                movePL = 1;
                movePR = 0;

        break;

        case 38: // UP

        break;

        case 40: // DOWN

        break;
    }
}


//////////////////////////////////////////////////////////
//
// KEY UP TO STOP PLAYER/VOID STOP AND GO GLITCH

function stopPlayer(sPlayer) {
    if (sPlayer.keyCode == 39) {
        clearTimeout(setThis);
        clearTimeout(thisSet);
        stLandT = 0;
        movePR = 0;
    }

    if (sPlayer.keyCode == 37) {
        clearTimeout(setThis);
        clearTimeout(thisSet);
        stLandT = 0;
        movePL = 0;
    }
}

landThis.js/ MOVE PLAYER AND PLATFORMS

var cTAdd = 0;
var setThis = 1;
var GAPlayer = 3;

//////////////////////////////////////////////////////////
//
// SHOW PLATFORMS TO MOVE

function landT() {
    setThis = setTimeout(landT, 500);

    if (xPos >= 500) {
        cTAdd = Math.floor(Math.random() * 100 + 1);

        var block00 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 25) {
            block00.src = "images/sep2.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block00.src = "images/sep1.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block00.src = "images/platform00.png";
        }

        document.getElementById("land01").appendChild(block00);

        var block01 = document.createElement("img");
        var getB = block01.getBoundingClientRect();


        if (cTAdd > 0 && cTAdd < 25) {
            block01.src = "images/platform00.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
            block01.src = "images/sep2.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
            block01.src = "images/sep1.png";
        }

        document.getElementById("land00").appendChild(block01);

        GAPlayer = GAPlayer + 2;
    }

}

//////////////////////////////////////////////////////////
//
// MOVE PLATFORMS 

var thisSet = 1;
var cPlayer = 0;
var moveSpeed = 5;
var xPos = 50;
var yPos = 300;
function moveLand() {

    thisSet = setTimeout(moveLand, 30);

    if (xPos >= 500) {
        moveBlock1 = moveBlock1 - 10;
        document.getElementById("land00").style.left = moveBlock1 + "px";
        document.getElementById("land01").style.left = moveBlock1 + "px";
    }

}


//////////////////////////////////////////////////////////
//
// MOVE PLAYER

var setP = 1;
function moveP() {
    setP = setTimeout(moveP, 10);


    if (movePR == 1) {
        xPos = xPos + moveSpeed;

        cPlayer++;
        if (cPlayer >= 4) 
            cPlayer = 0;
            document.images[GAPlayer].src = gPlayer[cPlayer].src;
    }


    if (movePL == 1) {
        xPos = xPos - moveSpeed;

        cPlayer++;
        if (cPlayer >= 4) 
            cPlayer = 0;
            document.images[GAPlayer].src = gPlayer[cPlayer].src;
    }

    document.getElementById("player").style.left = xPos + "px";
    document.getElementById("player").style.top = yPos + "px";  


    if (xPos >= 500) {
        xPos = 500; 
    }
    if (xPos <= 50) {
        xPos = 50;  
    }   
}