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

Need help in building a logic in Javascript . Array Logic

本文关键字：构建阵列 Javascript 帮助更新时间：2024-07-03

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

我知道我需要

使用Array存储RBGY和indexOf（Arrayname）我需要定义一个正确的答案（比如现在的RRBY硬编码）我需要检查用户键入的数组中的每个字母并进行比较它与RRBY。
1. 我需要在页面上直观地显示两件事作为答案，以便用户知道哪个
  
  关闭：正确的颜色在错误的地方精确：正确点中的正确颜色
  
  例如：2个闭合和1个精确
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='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')
            }
}

我认为它满足了你的所有需求。。。

已编辑

这就是它的工作原理。。。

guess=textBox.value；从文本框中检索用户的猜测
guessDiv.innerText=guess；在屏幕上显示猜测
if(!guess)；!guess与guess==''相同，或者没有输入猜测，因此提醒用户并返回/结束函数
else if(guess==answer)；如果猜测与answer变量相同，则祝贺用户并结束函数
else；如果用户输入了一些文本ie:guess!=''，并且猜测与答案ie:guess!=answer不匹配，则：
5.1.result=[]；准备好一个数组以返回结果
5.2.x='Wrong'; y='Wrong'；集合x&y默认为"错误"
5.3.for(i in guess)；循环遍历guess字符串中的每个字符
5.3.1.if(guess[i]==answer[i])；如果guess中[i]处的字符与answer中[i]处的字符匹配，即：guess[i]=='R' && answer[i]=='R'，则结果为"正确位置的颜色正确"，因此更改x&y匹配
5.3.2 else if(answer.indexOf(guess[i])>=0)；如果guess中[i]处的字符与answer中[i]处的字符不匹配，即：guess[i]=='Y' && answer[i]=='R'，则answer.indexOf()检查answer以查看其是否包含值guess[i]，如果false则返回-1，如果true则返回guess[i]的索引。>=0如果返回值（-1或索引）大于或等于0，则guess[i]存在于answer中，因此更改x，结果为"在错误的位置更正颜色"
5.3.3.result.push(...)；现在CCD_ 41&修改y以正确显示，使用.push()将显示字符串附加到results阵列的末尾
5.4.displayDiv.innerText；现在循环已经结束，results包含了一个字符串，用户可以猜测这个字符串中的任何字符，您只需要在显示div中显示它
5.4.1.result.join(''n')；与'''n'一起加入results数组，然后显示为innerText

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