Javascript 点击按钮启动gameReady功能

我是JS的新手，我在看一个关于如何创建简单记忆游戏的教程。我有足够的信心理解代码背后的逻辑，开始进行更改，但也许我没有想象中那么理解它

当前，当我在页面重新加载时单击覆盖文本时，游戏开始并运行。我想改变这一点，使游戏只在我点击新创建的开始按钮时开始

我试过下面的代码，但似乎不起作用。我的console.log上没有错误

有谁能告诉我我到底做错了什么？谢谢你的帮助。谢谢

function gameReady() {
    let overlays = Array.from(document.getElementsByClassName("screen-overlay"));
    let cards = Array.from(document.getElementsByClassName("card"));
    let startButton = Array.from(document.getElementById("start"));
    let game = new SimpleMemoryGame (60, cards);

    overlays.forEach(overlay => {
        overlay.addEventListener("click",() =>{
            overlay.classList.remove("show-front");
            //game.startGame();
        });
    });
    cards.forEach(card =>{
        card.addEventListener("click" , () => {
            game.flip(card);
        });
    });

    startButton.forEach(start =>{
        startButton.addEventListener("click" , () => {
            game.startGame();
        });
    });

类simpleMemoryName{ 时间，卡片{ this.cardsList=卡片； 这个时间=时间； timeLeft=时间； this.timerElement=document.getElementByIdtime-left； } StartName{ this.cardToCheck=null； this.timeLeft=this.time； this.matches=[]； this.busy=true； 设置超时=>{ this.shufflethis.cardsList； this.timerStarted=this.startTimer； this.busy=false； },500; 这是大便； this.timerelation.innerText=this.timeLeft； } //在每场比赛开始时，检查所有的牌，以移除表演前场 粪便{ this.cardsList.forEach卡=>{ card.classList.removeshow-front； }; } 游戏结束{ clearIntervalthis.timerStarted； document.getElementByIdgame-over-screen.classList.addshow-front； } 赢{ clearIntervalthis.timerStarted； document.getElementByIdyou-won.classList.addshow-front； } //带有if语句的计时器，用于在等于0时触发gameOver函数。 //将setInterval设置为1000毫秒，以复制1s倒计时 斯塔蒂默{ return setInterval=>{ 这个.timeLeft-=1； this.timerelation.innerHTML=this.timeLeft； 如果this.timeLeft==0，则this.gameOver； },1000; } //函数，通过使用if语句检查其他函数作为条件来检查卡是否可以翻转 活页卡{ 如果这是cardIsFlippablecard{ card.classList.addshow-front； ifthis.cardToCheck{ 此.matchedCardCheckercard； }否则{ this.cardToCheck=卡片； } } } 匹配的卡片检查卡{ 如果此.getCardTypecard===此.getCardTypethis.cardToCheck this.cardMatchescard，this.cardToCheck； 其他的 this.card不匹配卡，this.card进行检查； this.cardToCheck=null； } 卡片配对卡片1，卡片2{ 这个.matches.pushcard1； 这个.matches.pushcard2； 如果this.matches.length==this.cardsList.length this.win； } 卡不匹配卡1，卡2{ this.busy=true； 设置超时=>{ card1.classList.removeshow-front； card2.classList.removeshow-front； this.busy=false； },1000 } getCardTypecard{ 返回卡。getElementsByClassNamecard匹配[0]。src； } 洗牌{ forlet i=this.cardsList.length-1；i>0；i-{ 设randomise=Math.floorMath.random*i+1； this.cardsList[randomise].style.order=i； this.cardsList[i].style.order=randomise； } } //功能检查用户是否可以翻转卡 cardIsFlippablecard{ //所有语句都需要返回false才能为true，这样才能翻转卡片 return！this.busy&&！this.matches.includecard&&card！==this.cardToCheck； } } //语句检查页面是否已加载 如果document.readyState==正在加载{ document.addEventListener DOMContentLoaded，gameReady； }否则{ 游戏就绪； } 功能gameReady{ 让overlays=Array.fromdocument.getElementsByClassNamescreen-overlays； let cards=Array.fromdocument.getElementsByClassNamecard； 让游戏=新SimpleMemoryGame 60，卡片； overlays.forEachoverlay=>{ overlay.AddEventListener单击，=>{ overlay.classList.removeshow-front； //game.startGame； }; }; cards.forEachcard=>{ card.AddEventListener单击，=>{ game.flipcard； }; }; }document.getElementById仅返回单个节点，而不是节点数组

因此，您可以使用querySelectorAll来指定选择具有相同ID或类的多个元素

因此，如下所示更改startButton赋值，并将startButton.addEventListener替换为start.addEventListener

在StartName中添加clearInterval，如下所述。所以当用户开始游戏而没有先完成游戏时，它会清除前一个计时器

let startButton = Array.from(document.querySelectorAll("#start"));

startButton.forEach(start => {
    start.addEventListener("click" , () => {
        game.startGame();
    });
});

startGame() {
    this.cardToCheck = null;
    this.timeLeft = this.time;
    this.matches = []; 
    this.busy = true;
    setTimeout(()=> {
        this.shuffle(this.cardsList);
        // add clearInterval here so when user starts game without finishing the game first then it will clear previous timer.
        clearInterval(this.timerStarted);
        this.timerStarted = this.startTimer();
        this.busy = false;
    },500);
    this.hideCards();
    this.timerElement.innerText = this.timeLeft;
}

---

您需要一些HTML元素来通过javascriptcheck控件进行操作

---

ole logstartButton。我猜，这是一个空白的数组，答案是哈利什。我在下面看到一个控制台错误。不确定它为什么会作为非函数返回。我是否需要创建一个单独的函数，而不是将其放在gameReady函数中？script.js:149 Uncaught TypeError:startButton.addEventListener不是script.js:149 at Array.forEach at gameReady script.js:148 at script.js:126@Lance，仅供参考您应该在@Harish的答案下添加注释。或者你应该用@Harish提到他，那么只有他会收到关于你评论的通知。谢谢@Karan。对这一切都很陌生，所以为所有的错误道歉。