내 게임에 자바 스크립트 라운드 카운터와 점수 카운터가 필요합니다.

codeacademy.com을 사용하여 코딩하는 법을 가르쳐려고합니다. 나는 웹 기반의 바위, 종이, 가위, 도마뱀, 스폿 게임을 만들기 위해 배운 것들 중 일부를 시도하고 적용하기로 결정했다. 게임 코드는 잘 작동하지만 더 나은 방법이 있다는 것을 알고 있습니다.하지만 나중에 알아 보겠습니다.하지만 플레이어와 컴퓨터에 점수를 더하고 라운드 카운터를 더하고 싶습니다. 아무도 카운터 작동 방법을 말해 줄 수 있습니까, 나는 몇 가지 시도했지만 그것을 알아낼 수 없습니다.내 게임에 자바 스크립트 라운드 카운터와 점수 카운터가 필요합니다.

일단 자바 스크립트가 작동하면 HTML과 CSS를 연습 할 단일 페이지 사이트를 만들 예정입니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <script> 
    var rock = "rock" 
    var paper = "paper" 
    var scissors = "scissors" 
    var lizard = "lizard" 
    var spock = "spock" 
    var compScore = 1 
    var playerScore = 1 

    function roundUp() { 
     round += 1 
    } 

    function compare(choice1, choice2) { 
     var round = 1 
     var computerChoice = Math.random() 
     if (computerChoice <= 0.2) { 
     choice2 = "rock"; 
     } else if(computerChoice <= 0.4) { 
     choice2 = "paper"; 
     } else if (computerChoice <= 0.6) { 
     choice2 = "scissors"; 
     } else if (computerChoice <= 0.8) { 
     choice2 = "lizard"; 
     } 
     else { 
     choice2 = "spock"; 
     } 

     if (choice1 === choice2) { 
     document.getElementById("winner").innerHTML = "Round tied!"; 
     } else if (choice1 === rock) { 
     if (choice2 === paper) { 
      compScore += 1 
      document.getElementById("winner").innerHTML = 
      "Paper covers rock, computer wins"; 
     } 
     else if (choice2 === scissors) { 
      playerScore += 1 
      document.getElementById("winner").innerHTML = 
      "Rock breaks scissors, you win"; 
     } 
     else if (choice2 === lizard) { 
      playerScore += 1 
      document.getElementById("winner").innerHTML = 
      "Rock crushes lizzard, you win"; 
     } 
     else { 
      compScore += 1 
      document.getElementById("winner").innerHTML = 
      "Spock vaporises rock, computer wins"; 
     } 
     } else if (choice1 === paper) { 
     if (choice2 === rock) { 
      document.getElementById("winner").innerHTML = 
      "Paper covers rock, you win"; 
      playerScore += 1 
     } else if (choice2 === scissors) { 
      document.getElementById("winner").innerHTML = 
      "Scissors cut paper, computer wins"; 
      compScore += 1 
     } else if (choice2 === lizard) { 
      document.getElementById("winner").innerHTML = 
      "lizard eats paper, computer wins"; 
      compScore += 1 
     } else { 
      document.getElementById("winner").innerHTML = 
      "Paper disproves spock, you win"; 
      playerScore += 1 
     } 
     } else if (choice1 === scissors) { 
     if (choice2 === rock) { 
      document.getElementById("winner").innerHTML = 
      "Rock breaks scissors, computer wins"; 
      compScore += 1 
     } else if (choice2 === paper) { 
      document.getElementById("winner").innerHTML = 
      "Scissors cut paper, you win"; 
      playerScore += 1 
     }else if (choice2 === lizard) { 
      document.getElementById("winner").innerHTML = 
      "Scissors decapitate lizard, you win"; 
      playerScore += 1 
     } else { 
      document.getElementById("winner").innerHTML = 
      "Spock smashes scissors, computer wins"; 
      compScore += 1 
     } 
     } else if (choice1 === lizard) { 
     if (choice2 === rock) { 
      document.getElementById("winner").innerHTML = 
      "Rock crushes lizzard, computer wins"; 
      compScore += 1 
     } else if (choice2 === scissors) { 
      document.getElementById("winner").innerHTML = 
      "Scissors decapitate lizard, computer wins"; 
      compScore += 1 
     } else if (choice2 === paper) { 
      document.getElementById("winner").innerHTML = 
      "Lizard eats paper, you win"; 
      playerScore += 1 
     } else { 
      document.getElementById("winner").innerHTML = 
      "Lizard poisons spock, you win"; 
      playerScore += 1 
     } 
     } else { 
     if (choice2 === rock) { 
      document.getElementById("winner").innerHTML = 
      "Spock vaporises rock, you win"; 
      playerScore += 1 
     } else if (choice2 === scissors) { 
      document.getElementById("winner").innerHTML = 
      "Spock smashes scissors, you win"; 
      playerScore += 1 
     } else if (choice2 === paper) { 
      document.getElementById("winner").innerHTML = 
      "Paper disproves spock, computer wins"; 
      compScore += 1 
     } else { 
      document.getElementById("winner").innerHTML = 
      "Lizard poisons spock, computer wins"; 
      compScore += 1 
     } 
     } 

     document.getElementById("choice1").innerHTML = choice1 
     document.getElementById("choice2").innerHTML = choice2 
     document.getElementById("computerChoice").innerHTML = computerChoice 
     document.getElementById("playerScore").innerHTML = playerScore 
     document.getElementById("compScore").innerHTML = compScore 
     document.getElementById("round").innerHTML = round 

     roundUp() 
    } 

    </script> 
    </head> 

    <body> 

    <h1>My Web Page</h1> 

    <h3>Round</h3> 
    <p id="round"></p> 

    <h4>Player Choice</h4> 
    <p id="choice1"></p> 
    <h4>Player Score</h4> 
    <p id="playerScore"></p> 

    <h4>Computer Choice</h4> 
    <p id="choice2"></p> 
    <h4>Computer Score</h4> 
    <p id="compScore"></p> 

    <h4>And the winner is</h4> 
    <p id="winner"></p>   

    <button type="button" onclick="compare(rock, choice2)">Rock</button> 
    <button type="button" onclick="compare(paper, choice2)">Paper</button> 
    <button type="button" onclick="compare(scissors, choice2)">scissors</button> 
    <button type="button" onclick="compare(lizard, choice2)">lizard</button> 
    <button type="button" onclick="compare(spock, choice2)">Spock</button> 

    </body> 
</html>

출처

2014-09-30 Marc

적어도 세미콜론이 누락되었습니다. – Roope

[jQuery] (http://jquery.com/)를 사용하면 코드가 훨씬 적어집니다. 'document.getElementById()'를 사용하는 것은 꽤 해킹입니다. 적어도 자세한 정보를 줄이기위한 래퍼 함수를 작성하십시오. 또한'if'의 전체 힙 대신'switch' 문이 절실히 필요합니다. – tadman

안녕하세요, 귀하의 의견에 감사드립니다. 난 정말 자바 스크립트에 새로운이야, 난 단지 지난 토요일 codeacademy.com 자바 모듈을 시작하고 난 게임에 대한 대부분의 만들었 후 스위치에 대해 배워야 해. 약 4 ~ 5 일 안에 jquery 모듈에 가야하므로 조금 더 배웠다면 다시 작성해야 할 것입니다. – Marc

당신은 당신이 rock, paper와 함께했던 것처럼 scissors 등, 전역 변수로 round을 만들 때와 같은 방법으로

var round = 0;

및 예상대로 roundUp 기능이 작동해야 둘레에 정의해야합니다.

EDIT : 또한 성명을 세미콜론으로 끝내는 것을 잊어 버렸습니다. 그리고 당신이 당신의 함수 안에서 그것을 설정하는 동안 당신은 버튼 클릭에 파라미터로 choice2을 보낼 필요가 없다고 생각합니다.

출처

2014-09-30 16:41:29 TheFrozenOne

compare 함수를 실행할 때마다 round가 1로 다시 설정되기 때문에 var round = 1이 필요합니다. 대신 다른 변수 선언과 함께 var round = 0을 맨 위에 넣으십시오. 또한 스크립트 앞에 페이지 요소가로드되는지 확인하기 위해 스크립트를 맨 아래쪽에 붙입니다. 변수 선언 후에 세미콜론을 사용하는 것이 좋습니다. http://jsfiddle.net/ja4m0qoL/

출처

2014-09-30 16:43:28

이것은 대우를 받았다. 링크에 추가 한 코드를 전송하여 내가 잘못 된 부분을 완전히 이해했는지 확인했다. 제 질문에 대답하고 jsfiddle.net에서 코드를 작성해 주셔서 감사합니다. – Marc

플레이어가 선택을 할 때 라운드 카운터와 마찬가지로 playerScore를 업데이트하는 함수를 실행해야합니다. 어떤 플레이어가 득점 한 roundUp()을 말하는 매개 변수를 전달합니다.

roundUp(winner){ 
    round++; //increments round 
    if(winner === computer){ 
     compScore++; //increments score 
     document.getElementById("compScore").innerHTML = compScore; //updates HTML 
    } 
    else if(winner === player){ 
     playerScore++; //increments score 
     document.getElementById("playerScore").innerHTML = playerScore; //updates HTML 
    } 
};

출처

2014-09-30 16:48:46

내 게임에 자바 스크립트 라운드 카운터와 점수 카운터가 필요합니다.

답변

관련 문제