The image momentarily pauses as the arrow keys are switched

Question

The image momentarily pauses as the arrow keys are switched

I have a query regarding the movement of the main player image. While it generally moves smoothly Left or Right, there is an issue when quickly switching directions from right to left. When the left key is pressed while the right key is still held down, the image pauses momentarily before moving left.

Main.js

var getPlatF1POSX = 0;
var getPlatF1POSY = 0;
var addVar = 0;
var addVar2 = 0;
var addVar3 = 0;
function initializeGame() {
    document.getElementsByTagName("DIV")[4].style.visibility = "visible";
    addEventListener('mousemove', fetchData, false);
    addEventListener('keydown', movePlayer, false);
    addEventListener('keyup', stopPlayer, false);
    movePlatform();
    movePlayerCharacter();

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

function fetchData(gData) {

}

var thisThis = 1;
var moveBlock1 = 350;
var stLandT = 0;
var gPos = "";
var rightPos = false;
var leftPos = false;
function movePlatform() {

}

function movePlayerCharacter(mPlayer) {
    switch (mPlayer.keyCode) {
        case 39: // RIGHT
            if (stLandT == 0 && gPos == "" && rightPos == false) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;
            }
            gPos = "RIGHT";
            rightPos = true;
            leftPos = false;
        break;

        case 37: // LEFT
            if (stLandT == 0 && gPos == "" && leftPos == false) {
                setThis = setTimeout(landT, 500);
                thisSet = setTimeout(moveLand, 30);
                stLandT = 1;
            }
            gPos = "LEFT";
            rightPos = false;
            leftPos = true;
        break;

        case 38: // UP

        break;

        case 40: // DOWN

        break;
    }
}

function stopPlayer(sPlayer) {
    switch (sPlayer.keyCode) {
        case 39:
            clearTimeout(setThis);
            clearTimeout(thisSet);
            stLandT = 0;
            gPos = "";
            rightPos = false;
            leftPos = false;
        break;
        case 37:
            clearTimeout(setThis);
            clearTimeout(thisSet);
            stLandT = 0;
            gPos = "";
            rightPos = false;
            leftPos = false;
        break;
    }
}

Move Land And Player

var cTAdd = 0;
var setThis = 1;
var GAPlayer = 3;
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;
    }

}

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";
    }

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

}

function moveP() {
    var setThis = setTimeout(moveP, 10);

    if (leftPos == false) {
        xPos = xPos + moveSpeed;
    }

    if (rightPos == false) {
        xPos = xPos - moveSpeed;
    }

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

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

javascript css html

Answer 1

Answer №1

This is because the player is stopped regardless of which key is released. It is important to keep track of the last key that was pressed down, and only stop movement when that key is released.

I struggled to debug the code, so I decided to rewrite it using jQuery (but encountered similar issues):

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) {
        case 39: // RIGHT
                game.lastKey = e.keyCode;
                clearInterval( game.movingInterval );
                game.movingInterval = setInterval( function() {
                    game.move('right');
                }, game.settings.moveSpeed);
                break;
            case 37: // 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;
}

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

Check it out on the Playground.

Answer 2

This is because the player is stopped regardless of which key is released. It is important to keep track of the last key that was pressed down, and only stop movement when that key is released.

I struggled to debug the code, so I decided to rewrite it using jQuery (but encountered similar issues):

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) {
        case 39: // RIGHT
                game.lastKey = e.keyCode;
                clearInterval( game.movingInterval );
                game.movingInterval = setInterval( function() {
                    game.move('right');
                }, game.settings.moveSpeed);
                break;
            case 37: // 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;
}

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

Check it out on the Playground.

Answer 3

Answer №2

This is a simple demonstration of implementing game logic using Javascript/HTML5.

File: 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;

// Function to load the game and set key event listeners
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) {

}

// Function to handle key down events for player movement
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;
    }
}

// Function to handle key up events for stopping player movement
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;
    }
}

File: landThis.js (Move Player and Platforms)

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

// Function to show platforms and move them
function landT() {
    setThis = setTimeout(landT, 500);

    if (xPos >= 500) {
        // Logic for platform generation
    }

}

// Function to 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) {
        // Code to move platforms
    }

}

// Function to move the player
var setP = 1;
function moveP() {
    setP = setTimeout(moveP, 10);

    // Player movement logic
}

Answer 4

This is a simple demonstration of implementing game logic using Javascript/HTML5.

File: 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;

// Function to load the game and set key event listeners
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) {

}

// Function to handle key down events for player movement
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;
    }
}

// Function to handle key up events for stopping player movement
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;
    }
}

File: landThis.js (Move Player and Platforms)

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

// Function to show platforms and move them
function landT() {
    setThis = setTimeout(landT, 500);

    if (xPos >= 500) {
        // Logic for platform generation
    }

}

// Function to 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) {
        // Code to move platforms
    }

}

// Function to move the player
var setP = 1;
function moveP() {
    setP = setTimeout(moveP, 10);

    // Player movement logic
}

The image momentarily pauses as the arrow keys are switched

Answer №1

Answer №2

Similar questions

Ways to align text within a table cell on a background using CSS

What is the best method for choosing the parent elements?

I am unable to incorporate added height into the component

Ajax returns with a successful response, yet the specified action is never executed

Where is the best place to implement HTML form validation: on the frontend or backend?

Next.js app experiencing issues with Chakra UI not transitioning to dark mode

Enabling Video Autoplay in HTML5

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

JavaScript Lightbox for Full Page Content (or near full page)

Slightly puzzled by the declaration of `var app = express()`

Using AJAX to search through paginated pages is quite simple and effective

Stylish CSS animation enhancing an image

Are you utilizing content loaded through jquery load in your work?

potential issues with memory leakage and browser crashes in three.js

Discovering the Secrets of Accessing and Modifying Item Values in BIRT

How can I modify the container to prevent the Bootstrap dropdown from being clipped by overflow:hidden settings?

An HTML webpage that automatically refreshes but does't display the iframe content when the underlying HTML page is being updated

What is the best way to display a red cross on a button?

What is the best .scss file to use for updating the site?

I am interested in creating a ranking system in JavaScript using JSON data based on points