【发布时间】：2015-02-27 17:43:41
【问题描述】：
以下是游戏 Master Mind 的硬编码页面。用户
我知道我需要
-
使用 Array 存储 RBGY 和一些与 indexOf(array 名称）我需要定义一个正确的答案（比如现在硬编码的 RRBY） 我需要检查用户键入的数组中的每个字母并进行比较 它与 RRBY。
-
我需要在页面上直观地显示两件事作为答案，以便用户知道哪个
CLOSE : 错误位置的正确颜色 精确：正确位置的正确颜色
例如：2 接近和 1 精确
另外，我需要用户在你输掉显示后只玩这个游戏 10 次。
胜利条件是用户得到正确的组合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>【问题讨论】：
-
对我来说好像是作业。你真的尝试过什么，我没有看到任何真正实现的逻辑。但是，如果您需要帮助，请从这里开始。回答你的4个问题。 1. 编写一个函数，从用户那里获取输入字符串并设置为一个数组。 2. 写两个检查，1 用于索引检查 0, 1, 2, 3 用于 4 种颜色。如果其中任何一个匹配，请通知用户哪个索引上的正确颜色。再次检查数组的颜色 contains() 并再次通知。 3. 遍历一个整数，设置为 0，每次提交时计数加 1。 9 点返回你就输了。 4. 用户数组匹配设置的答案，返回你赢。
-
泰勒谢谢我确实需要帮助。这4个答案有帮助。我会尝试这些。
-
Tyler 我试图编写第一个函数，但我的浏览器返回 undefined 并且日志中没有错误。我究竟做错了什么。谢谢
标签： javascript arrays if-statement logic