石头，纸，剪刀jQuery游戏不工作

Rock, paper, scissors jQuery game not working

本文关键字：工作 游戏 剪刀 石头 jQuery      更新时间：2023-09-26

玩石头、布、剪刀、斯波克、蜥蜴游戏，但都不起作用。我确信我写得不对，但在寻求帮助之前，我想尽我所能。所以，是的，它不起作用：/

Jsfidle-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

和往常一样，谢谢，你们太棒了。

正如Robby Cornelissen所说，您的变量名无效。请参阅前面关于此主题的问题：哪些字符对JavaScript变量名有效？

话虽如此，你确实有不少错误，所以在来找我们之前，试着调查一下。这就是你取得一些进步的方式，而不是让别人为你做这项工作。

一旦这些错误得到解决，您就会得到一些有效的东西（请参阅下面的片段）。然而，你的方法非常痛苦和庞大。我不知道石头剪刀蜥蜴斯波克的全部优点，但要编写优雅的代码，你应该试着找到一种方法来决定谁是赢家，而不必用if语句描述每个特定的情况。

把你的值放在一个数组里，比较你的值（你的用户和计算机的）的索引，也许有一些值得研究的地方，我正在考虑数组上的排列循环，以使值按正确的顺序排列。

$(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
<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>

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

#comproll
#game-image
game-image

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

到了

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());
    });
}
相关文章：