简体   繁体   English

我怎样才能为这个游戏创建一个重置按钮?

[英]How can I create a reset button for this game?

I have my current code posted, I'm trying to create a reset button.我发布了我当前的代码,我正在尝试创建一个重置按钮。 A button has already been created in my HTML, and I'm grabbing it at the bottom, and adding an event listener, which isn't working for some reason, also trying to figure out the correct code to add it for my game resets when the button is clicked.我的 HTML 中已经创建了一个按钮,我在底部抓住它,并添加了一个事件侦听器,由于某种原因它不起作用,还试图找出正确的代码来为我的游戏重置添加它单击按钮时。 However having a difficult time with the syntax.但是在语法上遇到困难。

 // 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()

                

                



            
           

            
            
            


        
        








        
    
       
    
        
        
    
    

    
    
    
    
    
    
    
        
    

You've got a typo there:)你那里有一个错字:)

tryAgain.addEventListener('clcik', play)

some notes to the written code:编写代码的一些注释:

  • you don't need to reference the element, if you're not going to use it elsewhere, just do:您不需要引用该元素,如果您不打算在其他地方使用它,只需执行以下操作:

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

  • i'm not sure about what the "prevent" should do here我不确定“预防”应该在这里做什么

  • you haven't defined a global reference to a "div" parameter that you want to use at:您尚未定义对要在以下位置使用的“div”参数的全局引用:

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

  • use semicolon ';'使用分号';' by the end of each executed code for better code clarity + checkout some coding standards在每个执行的代码结束时,代码更清晰+检查一些编码标准

  • use code editors like Visual Studio code or other tools - they usually have some basic code formatter (learn they shortcuts, it will optimize your coding process) + other usefull features like clicking through defined param references etc.使用代码编辑器,如Visual Studio 代码或其他工具——它们通常有一些基本的代码格式化程序(了解它们的快捷方式,它将优化您的编码过程)+ 其他有用的功能,如单击定义的参数引用等。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM