首頁猿問無法使用動畫鍵入游戲

無法使用動畫鍵入游戲

JavaScript

絕地無雙 2022-09-02 19:46:05

我試圖構建一個游戲，但我無法正確設置Interval。當我點擊開始游戲按鈕時，這個詞沒有打印在屏幕上，5秒后它直接顯示GAME OVER。var btn= document.querySelector('#btn');btn.addEventListener("click", myMove);function myMove() { var word = document.querySelector('#word'); var input=document.querySelector('#written'); var words=['xylophone', 'cat', 'bat', 'chollima']; var i=0; var id = setInterval(frame, 5000); function frame() { word.innerHTML=words[i]; i = (i < 3) ?( i+1) : 0; if (input.innerHTML== word.innerHTML) { clearInterval(id); } else { word.innerHTML='GAME OVER'; } } }<div id="heading">TYPING GAME</div> <label> <div id="word"></div> <br> <input type="text" id="written"> </label> <button id="btn">START</button> </body>

查看完整描述

2 回答

德瑪西亞99

TA貢獻1770條經驗獲得超3個贊

實際上，您當前的解決方案存在一些問題。

首先，您在5秒間隔后首次更改word.innerHTML，因此它將立即被GAME OVER替換，因此在相差幾毫秒的情況下，您將無法看到所需的輸出。innerHTML
然后，您將用于您的條件，其中innerHTML僅用于包含其中某些內容的HTML元素（獲得開始和結束標記），而對于獲取輸入值，您應該使用input.value。input.innerHTML

因此，為了使您的代碼正常工作，您應該在執行setInterval之前首先替換innerHTML。然后，在調用間隔（如果條件滿足）后，應遞增 i 值，然后以遞歸方式再次調用間隔。

所以你的最終代碼應該是這樣的：

var btn = document.querySelector('#btn');

btn.addEventListener("click", myMove);

function myMove() {

var word = document.querySelector('#word');

var input = document.querySelector('#written');

var words = ['xylophone', 'cat', 'bat', 'chollima'];

var i = 0;

word.innerHTML = words[i];

var id = setInterval(frame, 5000);

function frame() {

if (input.value == word.innerHTML) {

clearInterval(id);

i = (i < 3) ? (i + 1) : 0;

word.innerHTML = words[i];

id = setInterval(frame, 5000)

} else {

word.innerHTML = 'GAME OVER';

}

<div id="heading">TYPING GAME</div>

<label>

<br>

</label>

<button id="btn">START</button>

反對回復 2022-09-02

鴻蒙傳說

TA貢獻1865條經驗獲得超7個贊

不要使用，而是使用 input.value：input.innerHTML

var btn= document.querySelector('#btn');

btn.addEventListener("click", myMove);

function myMove() {

var word = document.querySelector('#word');

var input=document.querySelector('#written');

var words=['xylophone', 'cat', 'bat', 'chollima'];

var i=0;

var id = setInterval(frame, 5000);

function frame() {

word.innerHTML=words[i];

i = (i < 3) ?( i+1) : 0;

if (input.value == word.innerHTML) {

clearInterval(id);

} else {

word.innerHTML='GAME OVER';

}

<div id="heading">TYPING GAME</div>

<label>

<br>

</label>

<button id="btn">START</button>

</body>

反對回復 2022-09-02

2 回答
0 關注
88 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

無法使用動畫鍵入游戲

無法使用動畫鍵入游戲

2 回答

添加回答