JavaScript 画布不会在单击按钮时更新

Question

我正在尝试制作一款可以通过箭头键或触摸/点击按钮移动的游戏。 “开始”按钮开始游戏。

我的期望：

左右箭头键应该在释放时停止，但它不会。

左右按钮应该起作用，但它们不起作用。它们就像停止箭头键按下的按钮。

实际输出在https://codepen.io/Gorzan123/pen/MWqLxNJ。预期输出在 Pen Description

中

HTML：

    <h1 id="title">Game</h1>
    <p id="descriptionOne">This is my game</p>
    <p id="descriptionTwo">Try it!</p>
    <button onclick="startGame()" id="start" class="active">Start</button>
    <button onclick="closeWindow()" id="close">Close</button>
    <br>
    <br>
    <button onmousedown="moveleft();" onmouseup="stopMove()" ontouchstart="moveleft()" style="display: none;" id="leftbtn">Left</button>
    <button onmousedown="moveright();" onmouseup="stopMove()" ontouchstart="moveright()" style="display: none;" id="rightbtn">Right</button>

CSS：

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
}

canvas {
    border: 1px solid #d3d3d3;
    border-radius: 14px;
    background-color: #f1f1f1;
}

button {
    background-color: black;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

button.active {
    background-color: #17B5E3;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}   

JS:

var dcalled = false;
var up;
var down;
var left;
var right;
var player;
const sprites = [
    "up",
    "down",
    "left",
    "right"
];

function closeWindow()
{
    close();
}

document.onkeydown = function (e) 
{
    if (e.key == "Enter")
    {
        document.getElementById("start").click();
    }
};


function startGame()
{
    game.start();
    // Remove instructions
    document.getElementById("title").remove();
    document.getElementById("start").remove();
    document.getElementById("close").remove();
    document.getElementById("leftbtn").removeAttribute("style");
    document.getElementById("rightbtn").removeAttribute("style");
    document.getElementById("descriptionOne").remove();
    document.getElementById("descriptionTwo").remove();

    // Setup things
    up = new component(30, 30, "black", 120, 20);
    down = new component(30, 30, "black", 180, 20);
    left = new component(30, 30, "black", 240, 20);
    right = new component(30, 30, "black", 300, 20);
    player = new component(30, 30, "black", 220, 230);
}

var game =
{
    canvas : document.createElement("canvas"),
    start : function()
    {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e)
        {
            game.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e)
        {
            game.key = false;
        })
    },
    clear : function ()
    {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y)
{
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.x = x;
    this.y = y; 
    this.update = function()
    {
        ctx = game.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function()
    {
        this.x += this.speedX;
    }
}

function updateGameArea()
{
    game.clear();
    if (dcalled == true)
    {
        player.speedX = 0;
    }
    if (game.key && game.key == 37) {player.speedX = -10; };
    if (game.key && game.key == 39) {player.speedX = 10; };
    choose = sprites[Math.floor(Math.random() * 4)];
    eval(choose + ".y += 2")
    eval(choose + ".newPos()")
    eval(choose + ".update()")
    player.newPos()
    player.update()
}

function moveleft()
{
    dcalled = true;
    player.speedX -= 10;
}
  
function moveright()
{
    dcalled = true;
    player.speedX += 10;
}

function stopMove()
{
    dcalled = false;    
    player.speedX = 0;
}