Question

当我保持单词new在线时：

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

当我按任意箭头键时，红色方块继续移动。但是，当我删除该行上的新元素时，只要我释放箭头键，方块就会停止移动。

发生了什么，我不明白

＆＃13;

<!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>

＆＃13;

Answer 1

“new”在这种情况下是正确的，虽然它可以在没有它的情况下重写。您的代码需要的是在没有按下任何内容时简单添加2行：

<!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>

Javascript：即使我发布了密钥

1 个答案: