Javascript:即使我松开按键，物体仍不停地移动-6ren

Javascript:即使我松开按键，物体仍不停地移动

转载作者：行者123 更新时间：2023-12-03 04:18:57

当我在线上保留“new”这个词时:

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

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

这是怎么回事，我不明白

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

最佳答案

“new”在这种情况下是正确的，尽管没有它也可以重写。您的代码需要的是简单添加两行代码，以便在没有按下任何按钮时执行:

<!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:即使我松开按键，物体仍不停地移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44030622/

文章推荐： c# - 复制 Azure Append Blob 并收到 404

文章推荐： javascript - 如何在 Node JS 中执行正则表达式匹配？

java - 鼠标按下->拖动->松开。在 java
对不起: 我只是不知道如何链接这些连续的操作？鼠标按下然后拖动然后松开。如果用户不执行此操作，则不会发生某些操作... 我是否应该添加代码，因为已经按下了区分它？常量 MOUSE_MOVED 不起
javascript - 触控板收缩/松开 w/javascript (MacBook)
我正在尝试使用 native javascript - 没有 jQuery，也就是说。捏合和松开但不适用于缩小/放大。它在 iOS 和 android 上使用触摸等很好。但我不知道如何为我的 Mac-

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript:即使我松开按键，物体仍不停地移动