Question

我正在做一个课堂项目，它是一个纸质岩石剪刀式游戏。我让游戏运行正常，我现在只是想让它在三个场景中发挥最佳效果。

我编码了（至少我试过），这样当你赢了，玩家获得了一个点，当你输了，compwin得到了一个点。当你们中的一个人有两个积分时，你会得到一个警告，说你输了或输了。

我试图通过堆栈试图找出如何自己做这件事，因为这对我来说是新的。尽我所能，做得很短。我没有得到任何实际的错误，它只是没有做我想要的。我认为parseInt-变量会使它成为一个数字，但它会以NaN形式出现，所以它显然不是。我做错了什么？

Jsfiddle - http://jsfiddle.net/Lwj2zny5/

Html -

<body>
<div id="wrapper">
<h1>Lizard, paper, scissors, spock, rock</h1>

<div id="images">
<img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1"/>
<img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2"/>
<img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3"/>
<img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4"/>
<img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5"/>
</div>

<div id="win">
</div>

<div id="score">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="unit2.js"></script>
</body>

JS -

$(function() {

  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win; 
    var playerwin = parseInt($.trim($(this).html()));
    var compwin = parseInt($.trim($(this).html()));
    var comproll = 1 + Math.floor(Math.random() * 5);
    //$('#comproll').html('Result: '+comproll)
    if (comproll === 1) {
      comp = "Lizard";
    } else if (comproll === 2) {
      comp = "paper";
    } else if (comproll === 3) {
      comp = "scissors";
    } else if (comproll === 4) {
      comp = "Spock";
    } else if (comproll === 5) {
      comp = "Rock";
    }

    if (value === comproll) {
      win = "This ends in a tie, computer chose " + comp + " also.";
    } else if (value === 1) {
      if (comproll === 2 || comproll === 4) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 3 || comproll === 5) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 2) {
      if (comproll === 4|| comproll ===  5) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 1 ||comproll ===  3) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 3) {
      if (comproll === 1 || comproll ===  2) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 4 || comproll ===  5) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 4) {
      if (comproll === 3 || comproll ===  5) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 1 || comproll ===  2) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }
    } else if (value === 5) {
      if (comproll === 1 || comproll ===  3) {
        win = "You win, comp choose " + comp + ".";
        $(this).html(++playerwin);
      } else if (comproll === 2 || comproll ===  4) {
        win = "You lose, comp choose " + comp + ".";
        $(this).html(++compwin);
      }

    }

    $('#score').text(playerwin, compwin);
        if (playerwin == 2) {
            alert("You Won");
        } else if (compwin == 2) { 
            alert("You lose");
        }
    $('#win').text(win);
  }); //closes play function

}); // closes function

是的，我知道这是一个庞大的代码，但我们正在学习的是if / else语句，这就是我正在使用的内容。

提前致谢！

Answer 1

$(document).on('click', '.game-image', function(event) {
   ...
   var playerwin = parseInt($.trim($(this).html()));
   ...

$（this）指的是点击后的图片。图片不包含.html（）

Answer 2

$(function() {
  var compwin = 0;
  var playerwin = 0;
  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win; 
    var comproll = 1 + Math.floor(Math.random() * 5);

然后

    $("#win").text(win);
    $('#score').text("Player = " + playerwin + ", Computer = " + compwin);
    if (playerwin == 2) {
        alert("You Won");
        compwin = 0;
        playerwin = 0;
        $('#score').text("");
        $("#win").text("");
    } else if (compwin == 2) {
        alert("You lose");
        compwin = 0;
        playerwin = 0;
        $('#score').text("");
        $("#win").text("");
    }

Answer 3

正如其他人所指出的那样，你是从图像html获得分数而不是跟踪它的变量。我创建了一个试图理解你的代码的jsfiddle。但是我把它清理得太多了，看起来有点不同。

http://jsfiddle.net/sheth/uzagumu7/22/

我创建了一些简短的函数，试图让代码更清晰。

var playerScore = 0;
var computerScore = 0;

var choices = ["Lizard", "Paper", "Scissors", "Spock", "Rock"];

var computerRoll = function () {
    return 1 + Math.floor(Math.random() * 5);
}

var resultOfGame = function (playerChoice, computerChoice) {
    if (playerChoice === computerChoice) {
        return 0; // tie
    } else if (
    ((playerChoice === 1) && ((computerChoice === 2) || (computerChoice === 4))) || 
    ((playerChoice === 2) && ((computerChoice === 4) || (computerChoice === 5))) || 
    ((playerChoice === 3) && ((computerChoice === 1) || (computerChoice === 2))) || 
    ((playerChoice === 4) && ((computerChoice === 3) || (computerChoice === 5))) || 
    ((playerChoice === 5) && ((computerChoice === 1) || (computerChoice === 3)))) 
    { 
        // player wins
        return 1;
    } else {
        return -1;
    }
}

较新版本的jsfiddle具有使用usemap的图像。还删除了警报。

http://jsfiddle.net/sheth/uzagumu7/78/

即使我使用parseInt作为加性方程，也要获得NaN

3 个答案: