計算機猜猜遊戲JavaScript

我想在網頁中創建一個簡單的「猜數字遊戲」，其中用戶是數字的一個想法，而計算機將猜測用戶想要的數字（沒有用戶需要輸入）。我需要創建三個按鈕供用戶響應計算機的猜測：猜猜較高，猜測較低，正確。我不知道如何使GuessHigher（）和GuessLower（）函數工作。下面是Java腳本代碼：計算機猜猜遊戲JavaScript

function getFieldValue(target) { 
    var elm = document.getElementById(target); 
    var val = parseInt(elm.value); 
    return val; 
} 

function getCompGuess() { 
    var upper = getFieldValue("UPPER"); 
    var lower = getFieldValue("LOWER"); 

    return (parseInt((upper + lower)/2)) 
} 


/* User starts game. */ 
function play() { 
    var remaining = getFieldValue("REMAINING"); 

    var compGuess = getCompGuess() 
    var compElm = document.getElementById("COMP_GUESS") 

    compElm.innerHTML = compGuess 
} 

function GuessHigher() { 

} 

function GuessLower() { 

} 

function correct() { 
    alert ("YAY! Thank you for playing"); 
}

下面是HTML代碼：

<html> 

    <head> 
     <meta charset="UTF-8"> 
     <script src="lab1a.js"></script> 
    </head> 
<body> 
Guess a number game: <br/> <br/> 

Upper Bound: <input id="UPPER" type="text"></input> <br/> 
Lower Bound: <input id="LOWER" type="text"></input> <br/> 
Guesses Remaining: <input id="REMAINING" type="text"></input> <br/> 

<button onclick="play()">Play!</button> <br/> 

Computer's Guess: <span id="COMP_GUESS"></span> <br/> 

<button onclick="GuessHigher()">Guess Higher</button> 
<button onclick="GuessHigher()">Guess Lower</button> 
<button onclick="correct()">Correct!!!</button> 


</body> 
</html>

來源

2016-02-21 Sambhav Towson

「猜高」和「低猜測」應該更新上限和下限*用於後續的猜測*，分別。雖然字段值本身可以更新，但也可以通過變量「保留原始字段值」來完成。 – user2864740

我不確定你在說什麼。你能否詳細說明一下？ –

範圍是[[lower，upper]]。目前這些是從字段值中讀取的。例如，如果邊界是[0,10]，猜測是5，用戶說「太高」，那麼下一個猜測就會受到[0,4]的限制。接下來的猜測是2，用戶說「太低」，然後界限是「[3,4]」等。 – user2864740

GUESS高等教育：它可能不是優雅，但你可以嘗試採取數量最後猜測，並加入到它與UPPER BOUND-LAST GUESS的區別內的任何數字。例如，讓我們說我們有一個號碼符合UPPER = 10和LOWER = 0

0 | ---------- | 10

和我們猜測5作爲計算機。現在，如果我們想要猜測更高的話，我們需要爲我們的老猜測（5）需要一個佔位符，並且需要減少猜測範圍，所以我們不會超過我們的上限。

0 | ---- < 5> ---- | 10，想象僅上半部5> --- 10放大：

5> ---- | 10。這個新的範圍我稱爲availableGuessingRange等於10-5或5.

我們只打算讓計算機現在使用Math.random選擇1到5之間的新數字。

讓我們說它選擇3.現在我們可以通過添加它（即5 + 3 = 8）來使這個數字回到我們的舊猜測，現在8是計算機NEW GUESS。

我認爲這可能是這樣的：對於GUESS LOWER

var lastGuess=document.getElementById("COMP_GUESS").value 
var avaliableGuessingRange = upper-lastGuess; 
return Math.floor(Math.random()*avaliableGuessingRange)+lastGuess

：我認爲這將是一個類似的設置，但是它使用lastGuess-下創建新的範圍，你會被減去來自上次猜測的新猜測向下移動數字線。

我寫代碼的方式目前不會工作，因爲變量範圍，但我認爲邏輯應該工作。

來源

2016-02-21 22:26:12 Rob

這就是我正要做的。我會在一段時間後編碼，我會讓你知道它是如何發生的。謝謝 –

我讓這個小提琴演奏，並重構代碼tini一點點，內聯監聽器被認爲是不好的做法。你應該考慮使用一些linter，因爲有一些語法錯誤，主要是你沒有終止你的語句; < ---看，其實這是錯字，我意外地終止了句子;代替。

(function() { 
 
    //getting references to buttons 
 
    var high = document.getElementById('high'); 
 
    var lower = document.getElementById('lower'); 
 
    var btn_correct = document.getElementById('correct'); 
 

 
    //setting listeners 
 
    high.addEventListener('click', GuessHigher); 
 
    lower.addEventListener('click', GuessLower); 
 
    btn_correct.addEventListener("click", correct); 
 

 
    function getFieldValue(target) { 
 
    var elm = document.getElementById(target); 
 
    return parseInt(elm.value); 
 
    } 
 

 
    function getCompGuess() { 
 
    var upper = getFieldValue("UPPER"); 
 
    var lower = getFieldValue("LOWER"); 
 

 
    return (parseInt((upper + lower)/2)); 
 
    } 
 

 

 
    /* User starts game. */ 
 
    function play() { 
 
    var remaining = getFieldValue("REMAINING"); 
 

 
    var compGuess = getCompGuess(); 
 
    var compElm = document.getElementById("COMP_GUESS"); 
 

 
    compElm.innerHTML = compGuess; 
 
    } 
 

 
    function GuessHigher() { 
 
    console.log('higher'); 
 
    } 
 

 
    function GuessLower() { 
 
    console.log('lower'); 
 
    } 
 

 
    function correct() { 
 
    console.log("YAY! Thank you for playing"); 
 
    } 
 
}());

<body> 
 
    Guess a number game: 
 
    <br/> 
 
    <br/>Upper Bound: 
 
    <input id="UPPER" type="text"> 
 
    <br/>Lower Bound: 
 
    <input id="LOWER" type="text"> 
 
    <br/>Guesses Remaining: 
 
    <input id="REMAINING" type="text"> 
 
    <br/> 
 

 
    <button id='play'>Play!</button> 
 
    <br/>Computer's Guess: <span id="COMP_GUESS"></span> 
 
    <br/> 
 

 
    <button id='high'>Guess Higher</button> 
 
    <button id='lower'>Guess Lower</button> 
 
    <button id='correct'>Correct!!!</button> 
 

 
</body>

來源

2016-02-21 22:52:22 Marko

不，我只關注一些語法的東西，可能我會完成它，但是我發現混淆了你的解釋並且與代碼不一致。 – Marko

計算機猜猜遊戲JavaScript

回答

相關問題