Javascript и HTML-ссылки

Я работаю над javascript для игры Rock, Paper, Scissors. Но, когда я пошел, чтобы запустить его, у меня возникают проблемы с HTML и JS для общения.Javascript и HTML-ссылки

У меня есть три кнопки, которые должны передать строку JS, которая сравнивает ее со случайным значением, которое назначено компьютерному игроку.

Любая помощь, получающая эту функцию, очень ценится. Благодаря


 

 
    var choicePrompt = "Please, pick your poison."; 
 
var victory = "Congrats, you Won!"; 
 
var defeat = "Sorry, you Lost"; 
 
var catsgame = "It's a draw!"; 
 

 
function run(userIn) { 
 
\t var loop = true; 
 
\t var winner; 
 
\t var scoreCount = 0; 
 

 
\t document.getElementById("prompt"); 
 

 
\t while (loop) 
 
\t { 
 
\t \t compChoice = Math.random(); 
 
\t \t compChoice = stringify(compChoice); 
 
\t \t userChoice = userIn; 
 

 
\t \t if (compChoice === "SOMETHING WENT WRONG") 
 
\t \t { 
 
\t \t \t document.getElementById("prompt").alert("JAVASCRIPT ERROR"); 
 
\t \t } 
 

 
\t \t winner = victor(userIn, compChoice); 
 

 
\t \t switch (winner) { 
 
\t \t \t case "WIN": 
 
\t \t \t \t scoreCount += 1; 
 
\t \t \t \t document.getElementById("score") = "Score: " + scoreCount; 
 
\t \t \t \t document.getElementById("prompt").innerHTML = victory; 
 
\t \t \t \t break; 
 

 
\t \t \t case "LOSS": 
 
\t \t \t \t scoreCount -= 1; 
 
\t \t \t \t document.getElementById("score") = scoreCount; 
 
\t \t \t \t document.getElementById("prompt").innerHTML = defeat; 
 
\t \t \t \t break; 
 

 
\t \t \t case "DRAW": 
 
\t \t \t \t document.getElementById("prompt").innerHTML = catsgame; 
 
\t \t \t \t break; 
 

 
\t \t \t case "ERROR": 
 

 
\t \t \t default: 
 
\t \t \t \t document.getElementById("prompt").innerHTML = "Something went wrong"; 
 
\t \t } 
 
\t \t loop = false; 
 
\t } 
 
} 
 

 
function stringify(float) { 
 
\t if (float <= 0.33) 
 
\t { 
 
\t \t return "ROCK"; 
 
\t } 
 
\t else if (float > 0.33 && float <= 0.66) 
 
\t { 
 
\t \t return "PAPER"; 
 
\t } 
 
\t else if (float > 0.66) 
 
\t { 
 
\t \t return "SCISSORS"; 
 
\t } 
 
\t else 
 
\t { 
 
\t \t return "SOMETHING WENT WRONG"; 
 
\t } 
 
} 
 

 
function victor(user, comp) { 
 
\t switch (user) 
 
\t { 
 
\t \t case "ROCK": 
 
\t \t \t switch (comp) 
 
\t \t \t { 
 
\t \t \t \t case "ROCK": 
 
\t \t \t \t \t return "DRAW"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "SCISSORS": 
 
\t \t \t \t \t return "WIN"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "PAPER": 
 
\t \t \t \t \t return "LOSS"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t default: 
 
\t \t \t \t \t return "ERROR"; 
 
\t \t \t } 
 
\t \t \t break; 
 
\t \t case "PAPER": 
 
\t \t \t switch (comp) 
 
\t \t \t { 
 
\t \t \t \t case "ROCK": 
 
\t \t \t \t \t return "WIN"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "SCISSORS": 
 
\t \t \t \t \t return "LOSS"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "PAPER": 
 
\t \t \t \t \t return "DRAW"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t default: 
 
\t \t \t \t \t return "ERROR"; 
 
\t \t \t } 
 
\t \t \t break; 
 
\t \t case "SCISSORS": 
 
\t \t \t switch (comp) 
 
\t \t \t { 
 
\t \t \t \t case "ROCK": 
 
\t \t \t \t \t return "LOSS"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "SCISSORS": 
 
\t \t \t \t \t return "DRAW"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case "PAPER": 
 
\t \t \t \t \t return "WIN"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t default: 
 
\t \t \t \t \t return "ERROR"; 
 
\t \t \t } 
 
\t \t \t break; 
 
\t \t default: 
 
\t \t \t return "ERROR"; 
 
\t } 
 
}

 <!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Rock Paper Scissors</title> 
 
    <link rel="stylesheet" href="../assets/css/hmwk-3.css" /> 
 
    <script source src="play.js"></script> 
 
</head> 
 

 

 
<header> 
 
    <h2>Rock, Paper, Scissors</h2> 
 

 
    <nav> 
 
    <a href="index.html">Homework Home</a> | 
 
    <a href="welcome.html"> Play Rock, Paper, Scissors</a> 
 
    </nav> 
 
</header> 
 

 

 
<body> 
 
    <h3 id="prompt">Please, pick your poison.</h3><br> 
 
\t <h3 id="score">Score: 0</h3> 
 

 
    <table> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" /> 
 
    </td> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" /> 
 
    </td> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" /> 
 
    </td> 
 
    </table> 
 
</body> 
 
</html>

Я обновил код, и заявление победа не обновляется. Я могу получить его, чтобы достичь «Это ничья», если я возьму документ в качестве входного сигнала. Я также хочу, чтобы это выполнялось бесконечно до тех пор, пока пользователь не покинет страницу, мне нужен цикл, чтобы сделать это, или если они выбирают другое изображение, будет ли он работать нормально без цикла. Спасибо за вход

источник

2015-10-29 zgangwer20

отладки кода и задать конкретный вопрос .. – LiranBo

Вы пропускаете объявление переменной для catsgame см комментарий от Elliot Родригес ниже, и вы в то время как цикл создает бесконечный цикл, как loop никогда не устанавливается на false см комментарий от pL4Gu33:

var choicePrompt = "Please, pick your poison."; 
 
var victory = "Congrats, you Won!"; 
 
var defeat = "Sorry, you Lost"; 
 
var catsgame = "It is a draw"; //added to the code, see Elliot Rodriguez' answer 
 

 
function run(userIn) { 
 
    var loop = true; 
 
    var winner; 
 
    var scoreCount = 0; 
 

 
    while (loop) { 
 
    compChoice = Math.random(); 
 
    compChoice = stringify(compChoice); 
 
    userChoice = userIn; 
 

 
    if (compChoice === "SOMETHING WENT WRONG") { 
 
     document.getElementById("prompt").alert("JAVASCRIPT ERROR"); 
 
    } 
 

 
    winner = victor(userIn, compChoice); 
 

 
    switch (winner) { 
 
     case "WIN": 
 
     document.getElementById("prompt").innerHTML = victory; 
 
     break; 
 

 
     case "LOSS": 
 
     document.getElementById("prompt").innerHTML = defeat; 
 
     break; 
 

 
     case "DRAW": 
 
     document.getElementById("prompt").innerHTML = catsgame; 
 
     break; 
 

 
     case "ERROR": 
 

 
     default: 
 
     document.getElementById("prompt").innerHTML = "Something went wrong"; 
 
    } 
 

 
    loop = false;//terminate loop, see comment by @pL4Gu33. 
 
    } 
 
} 
 

 
function stringify(float) { 
 
    if (float <= 0.33) { 
 
    return "ROCK"; 
 
    } else if (float > 0.33 && float <= 0.66) { 
 
    return "PAPER"; 
 
    } else if (float > 0.66) { 
 
    return "SCISSORS"; 
 
    } else { 
 
    return "SOMETHING WENT WRONG"; 
 
    } 
 
} 
 

 
function victor(user, comp) { 
 
    switch (user) { 
 
    case "ROCK": 
 
     switch (comp) { 
 
     case "ROCK": 
 
      return "DRAW"; 
 
      break; 
 
     case "SCISSORS": 
 
      return "WIN"; 
 
      break; 
 
     case "PAPER": 
 
      return "LOSS"; 
 
      break; 
 
     default: 
 
      return "ERROR"; 
 
     } 
 
     break; 
 
    case "PAPER": 
 
     switch (comp) { 
 
     case "ROCK": 
 
      return "WIN"; 
 
      break; 
 
     case "SCISSORS": 
 
      return "LOSS"; 
 
      break; 
 
     case "PAPER": 
 
      return "DRAW"; 
 
      break; 
 
     default: 
 
      return "ERROR"; 
 
     } 
 
     break; 
 
    case "SCISSORS": 
 
     switch (comp) { 
 
     case "ROCK": 
 
      return "LOSS"; 
 
      break; 
 
     case "SCISSORS": 
 
      return "DRAW"; 
 
      break; 
 
     case "PAPER": 
 
      return "WIN"; 
 
      break; 
 
     default: 
 
      return "ERROR"; 
 
     } 
 
     break; 
 
    default: 
 
     return "ERROR"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Rock Paper Scissors</title> 
 
    <link rel="stylesheet" href="assets/css/main.css" /> 
 
    <script source src="play.js"></script> 
 
</head> 
 

 

 
<header> 
 
    <h2>Rock, Paper, Scissors</h2> 
 

 
    <nav> 
 
    <a href="index.html">Homework Home</a> | 
 
    <a href="welcome.html"> Play Rock, Paper, Scissors</a> 
 
    </nav> 
 
</header> 
 

 

 
<body> 
 
    <h3 id="prompt" /> 
 
    <table> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/rock.png" onclick="run('ROCK')" /> 
 
    </td> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/paper.png" onclick="run('PAPER')" /> 
 
    </td> 
 
    <td> 
 
     <input type="image" src="../assets/hmwk-3/scissors.png" onclick="run('SCISSORS')" /> 
 
    </td> 
 
    </table> 
 
</body> 
 

 
</html>

источник

2015-10-29 21:33:18 Jaco

Он отсутствует объявление переменной для 'catsgame' - Я тоже побежал и добавил переменную, но в противном случае получили его бежать. –

Я новичок в js, но это не бесконечный цикл в методе run? Loop никогда не устанавливается ложным, и перерывы предназначены только для корпуса коммутатора – pL4Gu33

Да @ pL4Gu33 Я просто нашел его. Хорошо поймал. –

Это работает в FF. Я смог отобразить все 3 условия. Вы не установили loop в false, который создал бесконечный цикл, а случай DRAW представил переменную, которая не была объявлена. И это, безусловно, может быть реорганизовано, , который я оставлю в качестве упражнения для OP.

Первый кредит на бесконечный цикл до @ pL4Gu33.

var choicePrompt = "Please, pick your poison."; 
var victory = "Congrats, you Won!"; 
var defeat = "Sorry, you Lost"; 
var catsgame = "Kiss yer sister"; 

function run(userIn) { 
    var loop = true; 
    var winner; 
    var scoreCount = 0; 

    while (loop) 
    { 
     compChoice = Math.random(); 
     compChoice = stringify(compChoice); 
     userChoice = userIn; 

     if (compChoice === "SOMETHING WENT WRONG") 
     { 
      document.getElementById("prompt").alert("JAVASCRIPT ERROR"); 
      loop = false; 
     } 

     winner = victor(userIn, compChoice); 

     switch (winner) { 
      case "WIN": 
       document.getElementById("prompt").innerHTML = victory; 
       loop = false; 
       break; 

      case "LOSS": 
       document.getElementById("prompt").innerHTML = defeat; 
       loop = false; 
       break; 

      case "DRAW": 
       document.getElementById("prompt").innerHTML = catsgame; 
       loop = false; 
       break; 

      case "ERROR": 
       loop = false; 
       break; 
      default: 
       loop = false; 
       document.getElementById("prompt").innerHTML = "Something went wrong"; 
     } 
    } 
} 

function stringify(float) { 
    if (float <= 0.33) 
    { 
     return "ROCK"; 
    } 
    else if (float > 0.33 && float <= 0.66) 
    { 
     return "PAPER"; 
    } 
    else if (float > 0.66) 
    { 
     return "SCISSORS"; 
    } 
    else 
    { 
     return "SOMETHING WENT WRONG"; 
    } 
} 

function victor(user, comp) { 
    switch (user) 
    { 
     case "ROCK": 
      switch (comp) 
      { 
       case "ROCK": 
        return "DRAW"; 
        break; 
       case "SCISSORS": 
        return "WIN"; 
        break; 
       case "PAPER": 
        return "LOSS"; 
        break; 
       default: 
        return "ERROR"; 
      } 
      break; 
     case "PAPER": 
      switch (comp) 
      { 
       case "ROCK": 
        return "WIN"; 
        break; 
       case "SCISSORS": 
        return "LOSS"; 
        break; 
       case "PAPER": 
        return "DRAW"; 
        break; 
       default: 
        return "ERROR"; 
      } 
      break; 
     case "SCISSORS": 
      switch (comp) 
      { 
       case "ROCK": 
        return "LOSS"; 
        break; 
       case "SCISSORS": 
        return "DRAW"; 
        break; 
       case "PAPER": 
        return "WIN"; 
        break; 
       default: 
        return "ERROR"; 
      } 
      break; 
     default: 
      return "ERROR"; 
    } 
}

источник

2015-10-29 21:41:36

Я согласен с @ Elliot-Rodriguez, это может быть написано намного чище, взгляните на некоторые ответы в этом посте: http://stackoverflow.com/questions/17976883/rock-paper-scissors-in-javascript – Jaco

Javascript и HTML-ссылки

ответ

Смежные вопросы