Question

以下是游戏Master Mind的硬编码页面。用户

我知道我需要

使用Array存储RBGY以及与indexOf（数组）有关的事情 name）我需要定义一个正确的答案（就像现在的RRBY硬编码一样）我需要检查用户键入的那个数组中的每个字母并进行比较它与RRBY。
1. 我需要在页面上直观地显示2个内容作为答案，以便用户知道哪个
  
  关闭：错误的地方正确的颜色确切：右侧正确的颜色
  
  例如：2 close和1 exact
2. 此外，我需要用户在您丢失的显示后仅播放此游戏10次。
3. 胜利条件是用户获得正确的组合RRBY然后显示恭喜

如何设置所有这些。 JS新手。第一个目标是让它工作，然后可能变得复杂的显示（接近和准确）。

有人可以帮我结构/功能，这样我就能理解逻辑然后我可以尝试编写语法（我不知道这是否有意义:)

任何帮助将不胜感激。

window.onload = init;
	
	function init(){
	var button = document.getElementById("usrButton");
	button.onclick = sayHello;
	}
	
		// my attempt at putting this logic
	var colors = ["R", "B", "Y", "G"];
	var correctAnswer = ["R", "Y", "Y", "G"];
	// maybe i thought I need to define what is the right answer in an array first
	
		
	

	if () {
	 // check if all the index in array CorrectAnswer are same as what   user typed. maybe using every method
	 // display success message
	}
	
	else
	// just display what the user types in on the page with display logic 
	
	else if {
	// if the user leaves the text box blank . Alert him to enter some values
	}
	

	function sayHello(){
	var usrTxt = document.getElementById("usrTxt");
	var usrName = usrTxt.value;
	var display = document.getElementById("displayHere");
	
	var currentOutput = display.innerHTML;  
	
	display.innerHTML = currentOutput + usrName '<br>'; 

	var div = document.getElementById("total");
	div.appendChild(p);
	
	//display.innerHTML = usrName;
	
	//var p = document.createElement("p");
	//p.innerHTML = "looks good";
	

	}

body { color: black; background-color: #d0e4fe; margin-left: 45px; padding: 0;}
	h1 { color: black; text-align: center; text-transform: uppercase;}
	p { font-family: arial, verdana; font-size: 12px;}

<html>
<head></head>
<body>
<h1> Master Mind</h1>
<p> <b>Game Rules</b>
<ul>
<li>The user gets 10 chances to enter their guess of 4 colors from RGBY. After which you lose</li>
<li>Right Answer is  - Correct Color in the Right Spot </li>
<li>Close Answer is  - Correct Color but in the wrong Spot</li>

<li></li>
</ul>

Enter your name and click Submit.</p>
<input type="text" id="usrTxt">
<input type="button" onclick="" id="usrButton" value="Submit">
<div id="total">
<p id="displayHere"></p>
</div>
</body>
</html>

=============================================== ===

	window.onload = init;
	
	function init(){
	var button = document.getElementById("usrButton");
	button.onclick = submitAnswer;
	}

// global counter variable 
//var i = 0;
	
	function submitAnswer(){
		var usrTxt;
		var answers = []; 
			//define a new variable and make a empty array
		
		answers.push(document.getElementById('usrTxt').value);
			// push the content the user types as array in a variable called answers

		//defined a new variable so that I can display what the user entered as it is 
		var display = document.getElementById("displayHere");
		display.innerHTML = usrTxt; 
		
		}

	body { color: black; background-color: #d0e4fe; margin-left: 45px; padding: 0;}
	h1 { color: black; text-align: center; text-transform: uppercase;}
	p { font-family: arial, verdana; font-size: 12px;}

<html>
<head></head>
<body>
<h1> Master Mind</h1>
<p> <b>Game Rules</b>
<ul>
<li>The user gets 10 chances to enter their guess of 4 colors from RGBY. After which you lose</li>
<li>Right Answer is  - Correct Color in the Right Spot </li>
<li>Close Answer is  - Correct Color but in the wrong Spot</li>

<li></li>
</ul>

Enter your Guess and click Submit.</p>
<input type="text" id="usrTxt">
<input type="button" onclick="submitAnswer()" id="usrButton" value="Submit">
<div id="total">
<p id="displayHere"></p>
</div>
</body>
</html>

Answer 1

尝试这样的事情：

answer='RYYG'
function haveAguess(){
    guess=textBox.value
    guessDiv.innerText=guess
    if(!guess){
        alert('No Guess Entered!')
        return
    }
        else if(guess==answer){
            alert('Congratulations')
            return
        }
            else{
                result=[]
                x='Wrong'
                y='Wrong'
                for(i in guess){
                    if(guess[i]==answer[i]){
                        x='Correct';    y='Right'
                    }
                        else if(answer.indexOf(guess[i])>=0)    x='Correct';
                    result.push('Color ['+i+'] is the: '+x+' Color in the '+y+' Spot');
                }
                displayDiv.innerText=result.join('\n')
            }
}

我认为它符合您的所有需求......

的 EDITED

这是它的工作原理......

guess=textBox.value;从文本框中检索用户猜测。

guessDiv.innerText=guess;在屏幕上显示猜测。

if(!guess); !guess与guess==''相同，或者没有输入猜测，因此提醒用户并返回/结束该功能。

else if(guess==answer);如果猜测与answer变量相同，则祝贺用户并结束该功能。

else;如果用户输入了一些文字，即：guess!=''并且猜测不匹配答案，即：guess!=answer，则：
5.1。 result=[];准备好一个数组来返回结果 5.2。 x='Wrong'; y='Wrong';设置x＆amp; y默认为＆＃39;错误＆＃39;。
5.3。 for(i in guess);循环遍历guess字符串中的每个字符 5.3.1。 if(guess[i]==answer[i]);如果[i]中guess处的字符与[i] answer中的字符匹配，即：guess[i]=='R' && answer[i]=='R'，则结果为＆＃39;正确的颜色为右放置＆＃39;所以改变x＆amp; y要匹配。
5.3.2。 else if(answer.indexOf(guess[i])>=0);如果[i]中guess处的字符不与[i] answer中的字符匹配，即：guess[i]=='Y' && answer[i]=='R'，则{{} 1}}检查answer.indexOf()以查看它是否包含值answer，如果guess[i]它返回false，如果-1它返回true的索引}}。 guess[i]如果返回值（-1或索引）大于或等于0，则>=0中会出现guess[i]，因此更改answer结果是在错误的地方正确的颜色＆＃39; 5.3.3。 x;现在result.push(...)＆amp; x被修改为正确显示，使用y将显示字符串附加到results数组的末尾。
5.4。 .push();现在循环已经完成，displayDiv.innerText包含用户猜测的任意字符的字符串，您只需要在显示div 中显示它。
5.4.1。 results;将result.join('\n')数组与＆＃39; \ n＆＃39; 一起加入，然后显示为results ...

需要更多帮助？！试试这些：
http://www.w3schools.com/
https://developer.mozilla.org/en-US/

需要帮助在Javascript中构建逻辑。阵列逻辑

1 个答案:

的 EDITED