Reputation: 49

Javascript: object moving without stop even though I release the key

When I keep the word new on line:

var myGamePiece = new makeComponent(myContext, 30, 30, "red", 10, 120);

the red square keep moving when I just press any arrow key. However, when I remove the new element on that line, the square can stop moving as long as I release the arrow key.

What is happening, I don't understand

<!DOCTYPE html>
<html>
    <head>
        <title>Car Race</title>
        <link rel="stylesheet" href="setup.css">
    </head>
    
    <body>
        <script>
            
            var myContext = makeGameArea(600, 600, "myArea", "#4d4d4d");
            var myGamePiece = new makeComponent(myContext, 30, 30, "red", 10, 120);
            myGamePiece.keyList = {37:false, 39:false, 38:false, 40:false};            
            window.addEventListener( "keydown", function(e){myGamePiece.keyList[e.keyCode] = true} );
            window.addEventListener( "keyup", function(e){myGamePiece.keyList[e.keyCode] = false} );
            setInterval(function(){keyDetect(myContext, myGamePiece, 600, 600)}, 15);
            
            var leftLine = new makeComponent(myContext, 10, 100, "white", 200, 10);
            setInterval(function(){movingDown(myContext, leftLine)}, 20);
            
            function makeGameArea(width, height, idName, backgroundColor){
                var gameArea = document.createElement("canvas");
                gameArea.id = idName;
                gameArea.width = width;
                gameArea.height = height;
                gameArea.style = "background-color:" + backgroundColor;
                document.body.appendChild(gameArea);
                return gameArea.getContext("2d");
            }
            
            function makeComponent(ctx, width, height, color, x, y){
                this.width = width;
                this.height = height;
                this.color = color;
                this.x = x;
                this.y = y;
                this.speedX = 0;
                this.speedY = 0;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
                
                return this;
            }
            
            function clearComponent(ctx, width, height, x, y){
                ctx.clearRect(x, y, width, height);
            }
            
            function keyDetect(ctx, object, borderX, borderY){
                if(object.keyList[37] == true){
                    //left
                    object.speedX = -4;
                }
                if(object.keyList[39] == true){
                    //right
                    object.speedX = 4;
                }
                if(object.keyList[38] == true){
                    //up
                    object.speedY = -4;
                }
                if(object.keyList[40] == true){
                    //down
                    object.speedY = 4;
                }
                clearComponent(ctx, object.width, object.height, object.x, object.y);
                
                //update object new position
                object.x = object.x + object.speedX;
                object.y = object.y + object.speedY;
                
                if(object.x <= 0){
                    object.x = 0;
                }
                
                if(object.y <= 0){
                    object.y = 0;
                }
                
                if(object.x + object.width >= borderX){
                    object.x = borderX - object.width;
                }
                
                if(object.y + object.height >= borderY){
                    object.y = borderY - object.height;
                }
                
                makeComponent(ctx, object.width, object.height, object.color, object.x, object.y);                  
            }
            
            function movingDown(ctx, object){
                clearComponent(ctx, object.width, object.height, object.x, object.y);
                object.y = object.y + 2;
                makeComponent(ctx, object.width, object.height, object.color, object.x, object.y);        
            }
            
        </script>
    
    </body>
    
</html>

Upvotes: 0

Answers (1)

Michał Sałaciński

Reputation: 2266

"new" is proper in this case, although it could be rewritten without it. What your code needs is a simple addition of 2 lines to execute when nothing is pressed:

<!DOCTYPE html>
<html>
    <head>
        <title>Car Race</title>
        <link rel="stylesheet" href="setup.css">
    </head>
    
    <body>
        <script>
            
            var myContext = makeGameArea(600, 600, "myArea", "#4d4d4d");
            var myGamePiece = new makeComponent(myContext, 30, 30, "red", 10, 120);
            myGamePiece.keyList = {37:false, 39:false, 38:false, 40:false};            
            window.addEventListener( "keydown", function(e){myGamePiece.keyList[e.keyCode] = true} );
            window.addEventListener( "keyup", function(e){myGamePiece.keyList[e.keyCode] = false} );
            setInterval(function(){keyDetect(myContext, myGamePiece, 600, 600)}, 15);
            
            var leftLine = new makeComponent(myContext, 10, 100, "white", 200, 10);
            setInterval(function(){movingDown(myContext, leftLine)}, 20);
            
            function makeGameArea(width, height, idName, backgroundColor){
                var gameArea = document.createElement("canvas");
                gameArea.id = idName;
                gameArea.width = width;
                gameArea.height = height;
                gameArea.style = "background-color:" + backgroundColor;
                document.body.appendChild(gameArea);
                return gameArea.getContext("2d");
            }
            
            function makeComponent(ctx, width, height, color, x, y){
                this.width = width;
                this.height = height;
                this.color = color;
                this.x = x;
                this.y = y;
                this.speedX = 0;
                this.speedY = 0;
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
                
                return this;
            }
            
            function clearComponent(ctx, width, height, x, y){
                ctx.clearRect(x, y, width, height);
            }
            
            function keyDetect(ctx, object, borderX, borderY){
                if(object.keyList[37] == true){
                    //left
                    object.speedX = -4;
                }
                else if(object.keyList[39] == true){
                    //right
                    object.speedX = 4;
                }
                else object.speedX = 0;
                if(object.keyList[38] == true){
                    //up
                    object.speedY = -4;
                }
                else if(object.keyList[40] == true){
                    //down
                    object.speedY = 4;
                }
                else object.speedY = 0;
                clearComponent(ctx, object.width, object.height, object.x, object.y);
                
                //update object new position
                object.x = object.x + object.speedX;
                object.y = object.y + object.speedY;
                
                if(object.x <= 0){
                    object.x = 0;
                }
                
                if(object.y <= 0){
                    object.y = 0;
                }
                
                if(object.x + object.width >= borderX){
                    object.x = borderX - object.width;
                }
                
                if(object.y + object.height >= borderY){
                    object.y = borderY - object.height;
                }
                
                makeComponent(ctx, object.width, object.height, object.color, object.x, object.y);                  
            }
            
            function movingDown(ctx, object){
                clearComponent(ctx, object.width, object.height, object.x, object.y);
                object.y = object.y + 2;
                makeComponent(ctx, object.width, object.height, object.color, object.x, object.y);        
            }
            
        </script>
    
    </body>
    
</html>

Upvotes: 1

Javascript: object moving without stop even though I release the key

Answers (1)

Related Questions