如何使用空格键将组件设置为不同的颜色，并且在按下键时不会回到原来的位置？

Question

这是我的JavaScript代码：

<script>

    //character
    var myGamePiece;

    //colors for changing myGamePiece using Spacebar

    var color = ["white","#1ab2ff", "#4dff4d", "#FF7900"];
    var i = 0;  



    function startGame() {

        myGameArea.start();


        //(width,height, "color", X,Y)
        //my character


           window.addEventListener('keydown', 
            function() {
            myGameArea.key && myGameArea.key == 32
            myGamePiece = new component (50, 50, color[i], 0, 0);
            i = i < color.length ? ++i : 0;
            //i = (i+1) % color.length;
            myGamePiece.style.backgroundColor = color[i]    
            })

        }



    //game platform
    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 1400;
            this.canvas.height = 789;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 1);
            window.addEventListener('keydown', function (e) {

                //one pressed key 
                myGameArea.key = e.keyCode;
                })


            //one pressed key 
            window.addEventListener('keyup', function (e) {
                myGameArea.key = false;
            })
        }, 
        clear : function(){
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        stop : function(){
            clearInterval (this.interval);

        }

    }

    function component(width, height, color, x, y, type) {
        this.type = type;
        this.gamearea = myGameArea;
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;    
        this.x = x;
        this.y = y;
        this.color = color;


        this.update = function() {
            ctx = myGameArea.context;
            if (this.type == "text") {
          ctx.font = this.width + " " + this.height;
          ctx.fillStyle = color;
          ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
        this.newPos = function() {
            this.x += this.speedX;
            this.y += this.speedY;        
        }


    //crashing of the object into the myLines or obstacles
        this.crashWith = function(otherobj) {
            var myLeft = this.x;
            var myRight = this.x + (this.width);
            var myTop = this.y;
            var myBottom = this.y + (this.height);
            var otherLeft = otherobj.x;
            var otherRight  = otherobj.x + (otherobj.width);
            var otherTop = otherobj.y;
            var otherBottom = otherobj.y +(otherobj.height);

            var crash = true;
                if ((myBottom < otherTop) || (myTop > otherBottom) || (myRight < otherLeft) || 
                    (myLeft > otherRight)) 
                    {
                        crash = false;
                    }
                    return crash;
                }
        }


    //speed, controls, crashing
    function updateGameArea() {
        myGameArea.frameNo += 1;
        myGamePiece.speedX = 0;
        myGamePiece.speedY = 0;


        if (myGameArea.key && myGameArea.key == 65) {myGamePiece.speedX = -1; }
        if (myGameArea.key && myGameArea.key == 68) {myGamePiece.speedX = 1; }
        if (myGameArea.key && myGameArea.key == 87) {myGamePiece.speedY = -1; }
        if (myGameArea.key && myGameArea.key == 83) {myGamePiece.speedY = 1; }

    }
</script>