【问题标题】:How can I create a reset button for this game?我怎样才能为这个游戏创建一个重置按钮?
【发布时间】:2021-12-29 07:20:15
【问题描述】:

我已经发布了我当前的代码,我正在尝试创建一个重置按钮。我的 HTML 中已经创建了一个按钮,我在底部抓住它,并添加了一个事件侦听器,由于某种原因它不起作用,还试图找出正确的代码来为我的游戏重置添加它单击按钮时。但是在语法上遇到了困难。

 // Array of words
const words = ['planet', 'stars', 'astroid', 'moon', 'satilite', 'orbit', 'universe', 'umbra', 'lunar', 'space', 'astronomy', 'eclipse', 'nebula', 'mars', 'meteorite']

// guesses Array
let myGuesses = []


//variables
let wordSpace = ' - '
let guess = ' '
let space; //number of spaces in word


//score
let tries = 10
let counter ;
//Get random word
let index = Math.floor(Math.random()* words.length)  

//play function
function play() {
    let userInput = prompt(`would you like to play spaceman? (Y/N)`, "Y")
    console.log(words[index])
    
        
        
    for(let i = 0; i < words[index].length; i++){
        console.log(words[0][i])
            
        let div = document.createElement('div')
        div.classList.add('letters')
        div.innerHTML=' - '//words[0][i]
        document.querySelector('.word-space').append(div)
           
    
    }                                        
}
//handle click function, inactivates buttons, and changes color to grey; once clicked
let handleclick = e => {
    e.target.removeEventListener('click', handleclick)
    e.target.style.backgroundColor= 'grey'
    console.log(e.target.innerHTML)
    myGuesses.push(e.target.innerHTML)
    console.log(myGuesses)
    console.log(words[index].includes(e.target.innerHTML))
    if(words[index].includes(e.target.innerHTML)){
        document.querySelector('.word-space').innerHTML= '  '
        // let correct = document.createElement('ul')
        

        for(let i = 0; i < words[index].length; i++){
            
            // correct.setAttribute('id','correctLetters' )
            // let guess= document.createElement('li')
            // guess.setAttribute('class','guess')
            console.log(words[0][i])
             let div = document.createElement('div')
             div.classList.add('letter')
              if (myGuesses.includes(words[index][i])){
                div.innerHTML = words[index][i]
                        
                                 
            } else {
                div.innerHTML = ' - '
            }
                
            document.querySelector('.word-space').append(div)
            
        }
        getNumOfTries()         
            
              
} else {    
    tries -- 
    getNumOfTries()
    
}
                        
}
function ans () {
    const buttons = document.querySelectorAll('.letter')
    buttons.forEach(letter => letter.addEventListener('click',handleclick))
     
    
    
    


    
}
ans()



 

function getNumOfTries (){
    console.log(tries)
    const showTries = document.querySelector('#myTries')
    showTries.innerHTML = ' You have ' + tries + ' tries'
    if(tries < 1){
       setTimeout(() =>{prompt(`Would you like to try again? (Y,N)`, 'Y')
       showTries.innerHTML = 'You loose!'

       },2000) 
      
       
        
               
    }
    // if(tries > 0  && words[index].length === myGuesses.length) {
    
        if(tries > 0  && Array.from(document.querySelectorAll('.letters')).every(letter => letter.innerHTML !== ' - ')) {
            // showTries.innerHTML = 'You Win!'
             setTimeout(() =>{alert(`You Win!`)
             showTries.innerHTML = 'You Win!'
     
             },1000)
            
        
        }
        
        
        
}




//reset game
let tryAgain = document.querySelector('.Try-Again')
tryAgain.addEventListener('clcik', play)
prevent
div.innerHTML=' - '//words[0][i]
document.querySelector('.word-space').append(div)


    

   

play()

                

                



            
           

            
            
            


        
        








        
    
       
    
        
        
    
    

    
    
    
    
    
    
    
        
    

【问题讨论】:

  • 您在活动名称“clcik”中有一个小错字。
  • 所以这应该作为错字关闭?

标签: javascript button reset


【解决方案1】:

你有一个错字:)

tryAgain.addEventListener('clcik', play)

对书面代码的一些注释:

  • 您不需要引用该元素,如果您不打算在其他地方使用它,只需这样做:

    document.querySelector('.Try-Again')?.addEventListener('click', play);

  • 我不确定“预防”应该在这里做什么

  • 您尚未定义要在以下位置使用的“div”参数的全局引用:

    div.innerHTML=' - '//words[0][i]

  • 使用分号';'在每个执行的代码结束时,代码更清晰+检查一些编码标准

  • 使用 Visual Studio 代码 等代码编辑器或其他工具 - 它们通常具有一些基本的代码格式化程序(了解它们的快捷方式,它将优化您的编码过程)+ 其他有用的功能,例如单击定义的参数引用等等

【讨论】:

  • 是的,我在发布阻止之前忘记删除一些代码,并且潜水是以前的尝试,我会试试你的解决方案
猜你喜欢
  • 2017-07-01
  • 2017-08-11
  • 2019-05-14
  • 2011-04-27
  • 2017-07-06
  • 2022-10-24
  • 2017-08-20
  • 2018-05-03
  • 2021-07-10
相关资源
最近更新 更多