单击“一个播放器”按钮时，我有两个播放器，我想禁用第二个播放器的键盘，与“两个播放器”按钮相同。每回合，他们只能一次猜测一个单词。每个玩家必须使用不同的词来避免提示或欺骗。我的问题是，两个玩家都有相同的单词可以猜测。当我猜到字母时，两个字母都出现在空白方框中。有人可以帮我解决我的问题吗？
<div id="app">
<!-- title bar / header -->
<div id="header">
<div id="header-title">
Hangman
</div>
</div>
<!-- canvas where hangman is drawn -->
<div id="board">
<canvas id="board-canvas"></canvas>
</div>
<!-- row of blank letters for the selected word -->
<div id="word">
<div class="word-blankletter" v-for="letter in wordDivs" v-cloak>{{ letter }}</div>
</div>
<!-- keyboard -->
<div id="keyboard">
<div v-for="row in letters" class="keyboard-row">
<letter-button v-for="letter in row" :letter="letter" :game-over="gameOver" :two-players="twoPlayers" :key="letter" @check="check(letter)" v-cloak></letter-button>
</div>
</div>
<div id="word">
<div class="word-blankletter" v-for="letter in wordDivs" v-cloak>{{ letter }}</div>
</div>
<div id="keyboard">
<div v-for="row in letters" class="keyboard-row">
<letter-button v-for="letter in row" :letter="letter" :game-over="gameOver" :two-players="twoPlayers" :key="letter" @check="check(letter)" v-cloak></letter-button>
</div>
</div>
<!-- 'one player' 'play again' 'two players' -->
<div id="buttons">
<button class="buttons-button" :class="{ orange: !twoPlayers }" @click="onePlayer">One Player</button>
<button id="playagain" class="buttons-button" :class="{ hidden: !gameOver }" @click="playAgain">Play Again</button>
<button class="buttons-button" :class="{ orange: twoPlayers }" @click="twoPlayer">Two Players</button>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
// random integer helper function
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// keyboard letter button component
Vue.component("letter-button", {
props: ["letter", "gameOver", "twoPlayers"],
template: "<button class='keyboard-row-letter' :id='letter' :disabled='disabled' @click='clicked()'>{{ letter }}</button>",
data: function() {
return {
disabled: false
};
},
// disable button on click, and send 'check' event to run check() in main vue instance
methods: {
clicked: function() {
this.disabled = true;
this.$emit("check");
}
},
watch: {
// disable all buttons on game over; re-enable all buttons on restart
gameOver: function(newValue) {
this.disabled = newValue;
},
// re-enable all buttons when a new two-player game is started
twoPlayers: function(newValue) {
this.disabled = false;
}
}
})
// main vue instance
var app = new Vue({
el: "#app",
data: {
// keyboard letters
letters: [
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
["A", "S", "D", "F", "G", "H", "J", "K", "L"],
["Z", "X", "C", "V", "B", "N", "M"]
],
// words to choose from
words: [
"DOGS",
"CATS",
"MICE",
"HAWK"
],
// currentWord will be set to a random word from above list
currentWord: "",
// each element in this array is a letter in the word
wordDivs: [],
// to count the number of wrong guesses
guesses: 0,
gameOver: false,
lose: false,
twoPlayers: false,
// will be set to the canvas element in mounted()
canvas: "",
// will be set to the canvas 2d context
ctx: ""
},
methods: {
// draws the gallows
drawGallows: function(ctx) {
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.fillStyle = "#FF9800";
ctx.strokeStyle = "#FF9800";
ctx.beginPath();
// left side
ctx.moveTo(this.canvas.width / 10, this.canvas.height / 10);
ctx.lineTo(this.canvas.width / 10, this.canvas.height * 0.95);
// bottom side
ctx.lineTo(this.canvas.width * 0.8, this.canvas.height * 0.95);
// top side
ctx.moveTo(this.canvas.width / 10, this.canvas.height / 10);
ctx.lineTo(this.canvas.width * 0.4, this.canvas.height / 10);
// hanging notch
ctx.lineTo(this.canvas.width * 0.4, this.canvas.height / 5);
ctx.stroke();
ctx.closePath();
},
// fill this.wordDivs with empty strings to create the orange blanks
makeBlanks: function() {
for (var i = 0; i < this.currentWord.length; i++) {
this.wordDivs.push("");
}
},
// draws the appropriate part of the hanging man and/or 'game over'
updateCanvas: function(ctx) {
// this.drawGallows(ctx);
// draw the head
if (this.guesses === 0) {
ctx.beginPath();
ctx.arc(this.canvas.width * 0.4, (this.canvas.height / 5) + 20, 20, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
}
// draw the torso
else if (this.guesses === 1) {
ctx.beginPath();
ctx.moveTo(this.canvas.width * 0.4, (this.canvas.height / 5) + 40);
ctx.lineTo(this.canvas.width * 0.4, this.canvas.height / 2);
ctx.stroke();
ctx.closePath();
}
// draw the right leg
else if (this.guesses === 2) {
ctx.beginPath();
ctx.moveTo(this.canvas.width * 0.4, this.canvas.height / 2);
ctx.lineTo((this.canvas.width * 0.4) + 30, this.canvas.height * 0.7);
ctx.stroke();
ctx.closePath();
}
// draw the left leg
else if (this.guesses === 3) {
ctx.beginPath();
ctx.moveTo(this.canvas.width * 0.4, this.canvas.height / 2);
ctx.lineTo((this.canvas.width * 0.4) - 30, this.canvas.height * 0.7);
ctx.stroke();
ctx.closePath();
}
// draw the right arm
else if (this.guesses === 4) {
ctx.beginPath();
ctx.moveTo(this.canvas.width * 0.4, (this.canvas.height / 5) + 55);
ctx.lineTo((this.canvas.width * 0.4) + 35, (this.canvas.height / 2) + 10);
ctx.stroke();
ctx.closePath();
}
// draw the left arm and handle game over
else if (this.guesses === 5) {
ctx.beginPath();
ctx.moveTo(this.canvas.width * 0.4, (this.canvas.height / 5) + 55);
ctx.lineTo((this.canvas.width * 0.4) - 35, (this.canvas.height / 2) + 10);
ctx.stroke();
ctx.closePath();
// game over
ctx.font = "24px Roboto, sans-serif";
ctx.fillText("Game Over", this.canvas.width * 0.4 - 30, this.canvas.height * 0.9);
this.gameOver = true;
this.lose = true;
// fill in the word with the correct answer
for (var i = 0; i < this.currentWord.length; i++) {
Vue.set(this.wordDivs, i, this.currentWord[i]);
}
}
this.guesses++
},
// check the chosen letter when a letter component emits 'check'
check: function(letter) {
if (!this.gameOver) {
var guessCorrect = false;
// check if the letter is in the word, if so, fill it in
for (var i = 0; i < this.currentWord.length; i++) {
if (letter == this.currentWord[i]) {
Vue.set(this.wordDivs, i, letter);
guessCorrect = true;
}
}
// if there are no more blanks in the word, you win
if (!this.wordDivs.some(function(value) {return value == ""})) {
this.gameOver = true;
this.ctx.font = "24px Roboto, sans-serif";
this.ctx.fillText("You Win!", this.canvas.width * 0.4 - 30, this.canvas.height * 0.9);
}
// if they guess wrong, draw the man
if (!guessCorrect) {
this.updateCanvas(this.ctx);
}
}
},
// re-initializes the game
restart: function() {
this.gameOver = false;
this.lose = false;
this.guesses = 0;
this.wordDivs.splice(0);
this.drawGallows(this.ctx);
this.makeBlanks();
},
// resets the game to one-player mode and chooses a new word
onePlayer: function() {
if (this.twoPlayers) {
this.twoPlayers = false;
this.currentWord = this.words[randomInteger(0, this.words.length - 1)];
this.restart();
}
},
// starts two-player mode and prompts the user to enter a word
twoPlayer: function() {
if (this.twoPlayers) {
this.twoPlayers = false;
this.currentWord = this.words[randomInteger(0, this.words.length - 1)];
this.restart();
}
},
// chooses a new word and resets the game when 'play again' is clicked
playAgain: function() {
if (this.twoPlayers) {
this.currentWord = this.words[randomInteger(0, this.words.length - 1)];
}
else {
this.currentWord = this.words[randomInteger(0, this.words.length - 1)];
}
this.restart();
}
},
// identify the canvas element and initialize it, draw the gallows, choose a word, and draw the blanks.
mounted: function() {
this.canvas = document.getElementById("board-canvas");
this.canvas.width = document.getElementById("board").offsetWidth;
this.canvas.height = document.getElementById("board").offsetHeight;
this.ctx = this.canvas.getContext("2d");
this.ctx.lineWidth = 2;
this.drawGallows(this.ctx);
this.currentWord = this.words[randomInteger(0, this.words.length - 1)];
this.makeBlanks();
}
});