I made a Hangman game in python- let's do it in javascript now. I want to make it portable instead of embedded in a website, so let's make it as a userscript.
system
Fiz um jogo de Hangman em Python- vamos fazer isso em JavaScript agora.Quero torná -lo portátil em vez de incorporado em um site, então vamos fazer isso como um Usuários.
user
Aqui está um exemplo de como você pode implementar um jogo de Hangman em um JavaScript Userscript.

window.addeventListener ('load', function () {
    principal()
});

função main () {
// elemento de exibição de palavras
var wordDisplay = document.createElement ("div");
wordDisplay.id = "word";
wordDisplay.style.fontsize = "36px";
wordDisplay.style.marginbottom = "20px";
wordDisplay.innerhtml = "Play Hangman!";
document.body.appendChild (wordDisplay);

// suposições elemento de exibição
var adivesdisplay = document.createElement ("div");
adivinhaçãoDisplay.id = "adivinhação";
adivinhaçãoDisplay.style.fontsize = "24px";
adivinhesdisplay.style.marginbottom = "20px";
adivinhesdisplay.innerhtml = "adivinhe uma carta para começar";
document.body.appendChild (adivinhaçãoDisplay);

// elemento de contêiner de botão de letra
var buttonContainer = document.createElement ("div");
ButtonContainer.id = "Botões";
document.body.appendChild (ButtonContainer);

// botão de reset
var resetButton = document.createElement ("botão");
resetbutton.innerhtml = "redefinir";
resetbutton.style.fontsize = "16px";
resetbutton.style.padding = "10px";
resetbutton.style.margin = "5px";
ResetButton.addeventListener ("Click", function () {
resetGame ();
});
ButtonContainer.AppendChild (ResetButton);

// Botões da carta
for (var i = 0; i <26; i ++) {
var letter = string.FromCharCode (97 + i);
var Button = document.createElement ("botão");
Button.id = letra;
button.innerhtml = letra;
Button.style.fontsize = "16px";
Button.style.padding = "10px";
Button.style.margin = "5px";
button.addeventListener ("clique", function () {
handlebuttonClick (this.innerhtml);
});
ButtonContainer.AppendChild (Button);

}

// Estilos CSS
var cssstyles = `
H1 {
Alinhamento de texto: centro;
}

#palavra {
Size da fonte: 36px;
Margin-Bottom: 20px;
}

#guesses {
Size da fonte: 24px;
Margin-Bottom: 20px;
}

Botão #buttons {
Size da fonte: 16px;
preenchimento: 10px;
margem: 5px;
}
`;

// injete os estilos CSS
var style = document.createElement ("style");
style.innerhtml = cssstyles;
document.head.appendChild (estilo);

// Dicionário de palavras
var words = ["variável", "função", "objeto", "array", "string", "número", "booleano", "nulo", "indefinido", "operador", "método", "propriedade"," evento "," retorno de chamada "," biblioteca "," jQuery "," react "," node.js "," json "," ajax "," dom "," protótipo "," fechamento "," construtor ""," Es6 "];

// Escolha uma palavra aleatória
var word = palavras [math.floor (math.random () * words.length)];

// Matriz vazia para rastrear cartas que foram adivinhadas
Var GOUDEESCELTERS = [];

// variável para rastrear suposições incorretas
var incorretoguesses = 0;

// Atualize as palavras exibidas
função updatewordDisplay () {
var displayword = "";
for (var i = 0; i <word.length; i ++) {
if (adivinhado.includes (palavra [i])) {
displayword += word [i];
} outro {
displayword += "_";// cartas não adivinhadas são substituídas por um sublinhado
}
}
wordDisplay.innerhtml = displayword;
}

// Atualize a exibição de suposições
função updateGuessSDisplay () {
adivinhesdisplay.innerhtml = "suporta:" + incorretoGuesses;
}

// Se a matriz de letra adivinhada incluir a palavra, retornar true, senão continue
função checkforwin () {
for (var i = 0; i <word.length; i ++) {
if (! adoucedletters.includes (palavra [i])) {
retorna falso;
}
}
retornar true;
}

// Se as suposições incorretas forem 6 ou mais, retorne verdadeiro
função checkForLoss () {
return incorrectguesses> = 6;
}

// Redefinir variáveis e elementos da interface do usuário
função resetGame () {
word = palavras [math.floor (math.random () * words.length)];// Obtenha uma nova palavra
adivinhe letters = [];
incorretoguesses = 0;
updatewordDisplay ();
UpdateGuessSDisplay ();
Var Buttons = Document.getElementsByTagName ("Button");
for (var i = 0; i <botões.length; i ++) {
botões [i] .Disabled = false;
botões [i] .style.backgroundColor = "";
}}


// Botão da letra Clique na função
Função HODEDBUTTONCLICK (letra) {
    var Button = document.getElementById (letra);// Atribuir letra clicada à variável do botão
se (! adicionedletters.includes (letra)) {// se a carta não estiver na matriz de letras adivinhadas, adicione -a
adoucedletters.push (letra);
if (! word.includes (letra)) {// Se a carta não faz parte da palavra, incremento incorretoguesses
IncorrectGuESSSes ++;
}
updatewordDisplay ();
UpdateGuessSDisplay ();
if (checkforwin ()) {
alerta ("você adivinhou a palavra" + word + "!");
} else if (checkforloss ()) {
alerta ("Desculpe, a palavra era" + word + ".");
}
}
     botão.disabled = true;// Desativar o botão clicado
button.style.backgroundColor = "#dddddd";
    }
}

Este código cria elementos da interface do usuário usando document.createElement () e appendchild () e pode precisar ser modificado dependendo da estrutura do site onde você pretende executá -lo.O código cria três elementos da interface do usuário: uma exibição de palavras, que é tratada pela função UpdatewordsDisplay (), uma exibição de suposições, que é tratada pela função UpdateguessesDisplay () e um contêiner de elemento de botão, tratado pelo handlebuttonClick ().
assistant
<|system|>
</s>
<|user|>
Fiz um jogo de Hangman em Python- vamos fazer isso em JavaScript agora.Quero torná -lo portátil em vez de incorporado em um site, então vamos fazer isso como um Usuários.</s>
<|assistant|>
Aqui está um exemplo de como você pode implementar um jogo de Hangman em um JavaScript Userscript.

window.addeventListener ('load', function () {
    principal()
});

função main () {
// elemento de exibição de palavras
var wordDisplay = document.createElement ("div");
wordDisplay.id = "word";
wordDisplay.style.fontsize = "36px";
wordDisplay.style.marginbottom = "20px";
wordDisplay.innerhtml = "Play Hangman!";
document.body.appendChild (wordDisplay);

// suposições elemento de exibição
var adivesdisplay = document.createElement ("div");
adivinhaçãoDisplay.id = "adivinhação";
adivinhaçãoDisplay.style.fontsize = "24px";
adivinhesdisplay.style.marginbottom = "20px";
adivinhesdisplay.innerhtml = "adivinhe uma carta para começar";
document.body.appendChild (adivinhaçãoDisplay);

// elemento de contêiner de botão de letra
var buttonContainer = document.createElement ("div");
ButtonContainer.id = "Botões";
document.body.appendChild (ButtonContainer);

// botão de reset
var resetButton = document.createElement ("botão");
resetbutton.innerhtml = "redefinir";
resetbutton.style.fontsize = "16px";
resetbutton.style.padding = "10px";
resetbutton.style.margin = "5px";
ResetButton.addeventListener ("Click", function () {
resetGame ();
});
ButtonContainer.AppendChild (ResetButton);

// Botões da carta
for (var i = 0; i <26; i ++) {
var letter = string.FromCharCode (97 + i);
var Button = document.createElement ("botão");
Button.id = letra;
button.innerhtml = letra;
Button.style.fontsize = "16px";
Button.style.padding = "10px";
Button.style.margin = "5px";
button.addeventListener ("clique", function () {
handlebuttonClick (this.innerhtml);
});
ButtonContainer.AppendChild (Button);

}

// Estilos CSS
var cssstyles = `
H1 {
Alinhamento de texto: centro;
}

#palavra {
Size da fonte: 36px;
Margin-Bottom: 20px;
}

#guesses {
Size da fonte: 24px;
Margin-Bottom: 20px;
}

Botão #buttons {
Size da fonte: 16px;
preenchimento: 10px;
margem: 5px;
}
`;

// injete os estilos CSS
var style = document.createElement ("style");
style.innerhtml = cssstyles;
document.head.appendChild (estilo);

// Dicionário de palavras
var words = ["variável", "função", "objeto", "array", "string", "número", "booleano", "nulo", "indefinido", "operador", "método", "propriedade"," evento "," retorno de chamada "," biblioteca "," jQuery "," react "," node.js "," json "," ajax "," dom "," protótipo "," fechamento "," construtor ""," Es6 "];

// Escolha uma palavra aleatória
var word = palavras [math.floor (math.random () * words.length)];

// Matriz vazia para rastrear cartas que foram adivinhadas
Var GOUDEESCELTERS = [];

// variável para rastrear suposições incorretas
var incorretoguesses = 0;

// Atualize as palavras exibidas
função updatewordDisplay () {
var displayword = "";
for (var i = 0; i <word.length; i ++) {
if (adivinhado.includes (palavra [i])) {
displayword += word [i];
} outro {
displayword += "_";// cartas não adivinhadas são substituídas por um sublinhado
}
}
wordDisplay.innerhtml = displayword;
}

// Atualize a exibição de suposições
função updateGuessSDisplay () {
adivinhesdisplay.innerhtml = "suporta:" + incorretoGuesses;
}

// Se a matriz de letra adivinhada incluir a palavra, retornar true, senão continue
função checkforwin () {
for (var i = 0; i <word.length; i ++) {
if (! adoucedletters.includes (palavra [i])) {
retorna falso;
}
}
retornar true;
}

// Se as suposições incorretas forem 6 ou mais, retorne verdadeiro
função checkForLoss () {
return incorrectguesses> = 6;
}

// Redefinir variáveis e elementos da interface do usuário
função resetGame () {
word = palavras [math.floor (math.random () * words.length)];// Obtenha uma nova palavra
adivinhe letters = [];
incorretoguesses = 0;
updatewordDisplay ();
UpdateGuessSDisplay ();
Var Buttons = Document.getElementsByTagName ("Button");
for (var i = 0; i <botões.length; i ++) {
botões [i] .Disabled = false;
botões [i] .style.backgroundColor = "";
}}


// Botão da letra Clique na função
Função HODEDBUTTONCLICK (letra) {
    var Button = document.getElementById (letra);// Atribuir letra clicada à variável do botão
se (! adicionedletters.includes (letra)) {// se a carta não estiver na matriz de letras adivinhadas, adicione -a
adoucedletters.push (letra);
if (! word.includes (letra)) {// Se a carta não faz parte da palavra, incremento incorretoguesses
IncorrectGuESSSes ++;
}
updatewordDisplay ();
UpdateGuessSDisplay ();
if (checkforwin ()) {
alerta ("você adivinhou a palavra" + word + "!");
} else if (checkforloss ()) {
alerta ("Desculpe, a palavra era" + word + ".");
}
}
     botão.disabled = true;// Desativar o botão clicado
button.style.backgroundColor = "#dddddd";
    }
}

Este código cria elementos da interface do usuário usando document.createElement () e appendchild () e pode precisar ser modificado dependendo da estrutura do site onde você pretende executá -lo.O código cria três elementos da interface do usuário: uma exibição de palavras, que é tratada pela função UpdatewordsDisplay (), uma exibição de suposições, que é tratada pela função UpdateguessesDisplay () e um contêiner de elemento de botão, tratado pelo handlebuttonClick ().</s>
