Question

做摇滚，纸，剪刀，spock，蜥蜴游戏，它不起作用。我确定我没有正确地写它，但是在我寻求帮助之前想尽我所能。所以是的，它不起作用：/

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

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>
<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 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 (#game-image === comproll) {
            #win = "This ends in a tie"
        }
        else if (game-image === 1) {
            if (comproll === 2, 4) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 3, 5){
            #win = "You lose, comp choose " + comp + ".";
            }

        else if (game-image === 2) {
            if (comproll === 4, 5) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 1, 3){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 3) {
            if (comproll === 1, 2) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 4, 5){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 4) {
            if (comproll === 3, 5) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 1, 2){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 5) {
            if (comproll === 1, 3) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 2, 4){
            #win = "You lose, comp choose " + comp + ".";
            }

    });//closes play function

});// closes function

像往常一样，谢谢，你们真棒。

Answer 1

正如Robby Cornelissen所说，你的变量名无效。请参阅此前提到的有关此主题的问题：What characters are valid for JavaScript variable names?

话虽这么说，你确实有很多错误，所以在来找我们之前，试着调查一下。这就是你如何取得进步，而不是让别人为你做这份工作。

一旦这些错误得到解决，你就会得到一些有用的东西（参见下面的代码片段）。但是你的方法非常痛苦和笨重。我没有完整的东西 - 岩石剪刀 - 蜥蜴spock中的东西，但是为了编写优雅的代码，你应该试着找到一种方法来决定谁是胜利者，而不用描述每个特定的情况一个if语句。

在数组中包含您的值，比较您的值的索引（您的用户和计算机）以及我正在思考的问题时，可能还有值得关注的事情。阵列上的置换循环以使值具有正确的顺序。

＆＃13;

$(function() {

  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win;
    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"
    } else if (value === 1) {
      if (comproll === 2, 4) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 3, 5) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 2) {
      if (comproll === 4, 5) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 1, 3) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 3) {
      if (comproll === 1, 2) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 4, 5) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 4) {
      if (comproll === 3, 5) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 1, 2) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 5) {
      if (comproll === 1, 3) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 2, 4) {
        win = "You lose, comp choose " + comp + ".";
      }

    }

    $('#win').text(win);
  }); //closes play function

}); // closes function

＆＃13;

<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>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="unit2.js"></script>
</body>

＆＃13;

Answer 2

不清楚你在这里尝试做什么，但

#comproll
#game-image
game-image

不是有效的变量名。即使它们是，但变量也没有在任何地方声明。

Answer 3

There you go

<强> HTML

<div class="item" id="rock" data-val="0">
    <img src="" alt="rock"></img>    
</div>
<div class="item" id="paper" data-val="1">
    <img src="" alt="paper"></img>
</div>
<div class="item" id="scissors" data-val="2">
    <img src="" alt="scissors"></img>
</div>
<div class="item" id="lizrd" data-val="3">
    <img src="" alt="lizrd"></img>
</div>
<div class="item" id="spock"  data-val="4">
    <img src="" alt="spock"></img>
</div>

<强> JS

$.fn.versus = function() {
    var you = $(this).data('val');
    var oponent = getRandomInt(0, 4); 

    // Instead of using a lot if/else stuff
    // we can use some kind of versus result matrix
    // where rows are your selection (first index)    
    // and columns are your oponent's selection (second index)
    //     0 : you win
    //     1 : you lose
    //     2 : tie
    var versusMatrix = [
    //    0  1  2  3  4
    //    r  p  s  l  sp
        [ 2, 1, 0, 0, 1 ],  //0. rock
        [ 0, 2, 1, 1, 0 ],  //1. paper
        [ 1, 0, 2, 0, 1 ],  //2. scissors
        [ 1, 0, 1, 2, 0 ],  //3. lizard
        [ 0, 1, 0, 1, 2 ]   //4. spock
    ];

    var result = versusMatrix[you][oponent];
    return getResultMessage(you, oponent, result);
}

function getRandomInt(bottom, top) {
    return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
}

function getResultMessage(you, oponent, result) {
    var items = ["rock", "paper", "scissors", "lizard", "spock"];
    var results = ["You won!", "You lost!", "It's a tie!"]

    return 'You: ' + items[you] + '\nOponent: ' + items[oponent] + '\n\n' + results[result];
}

$(document).ready(function(){
    initGame();    
});

function initGame() {
    var items = $('.item');

    items.click(function(){
        alert($(this).versus());
    });
}

摇滚，纸张，剪刀jQuery游戏无法正常工作

3 个答案: