2016-10-17 60 views
2

的版本的jsfiddle没有工作,所以我添加了一个codepen代替 Working Codepen如何使用与jQuery或JavaScript

按钮刷新可变我是相当新的JavaScript和jQuery的,所以我道歉如果我的措辞不太对,或者答案非常明显,我就来这里学习:)所以我制作了一个摇滚纸剪刀游戏,除了我的“新游戏”按钮,一切都很棒。我无法弄清楚如何刷新变量'computerChoice'。我已经能够设置它以便页面刷新,但这不是我想要实现的。我需要它,当你点击'新游戏'时,变量'computerChoice'将根据随机数选择一个新选项,就像刷新页面一样。我已经尝试将它设置为空,当你点击“新游戏”,但是当你去玩游戏时,它只是返回数字。

HTML:

<h1>Rock Paper Scissors</h1> 
<h2>Pick your weapon!</h2> 
<p><button id="refresh">New Game</button></p> 
<button onClick='choose("rock")' class="choices">Rock</button> 
<button onClick='choose("paper")' class="choices">Paper</button> 
<button onClick='choose("scissors")' class="choices">Scissors</button> 
<p><button onClick='compare(user, computerChoice)' class="compares">1...2...3...</button></p> 
<p><b id="you">...</b> Vs. 
<b id="computer">...</b></p> 
<p><b id="results"></b></p> 

的JavaScript:

//user choices 
var user; 
var choose = function(choice) { 
user = choice; 
//document.getElementById("you").innerHTML = user; 
} 

//computer choices 
var computerChoice = Math.random(); 
if (computerChoice < 0.34) { 
    computerChoice = "rock"; 
} 
else if (computerChoice < 0.67) { 
    computerChoice = "paper"; 
} 
else { 
    computerChoice = "scissors"; 
} 

//compare user choice to computer choice 
function compare(choice1, choice2) { 
if (choice1 === choice2) { 
    document.getElementById('results').innerHTML = "How boring, you tied."; 
} 
else if (choice1 === "rock") { 
    if (choice2 === "scissors") { 
    document.getElementById('results').innerHTML = "They'll feel that in the morning."; 
} else { 
    document.getElementById('results').innerHTML = "Can you breathe? I think not."; 
} 
} 
else if (choice1 === "scissors") { 
if (choice2 === "paper") { 
    document.getElementById('results').innerHTML = "Snippitysnip, you sliced them in two."; 
} else { 
    document.getElementById('results').innerHTML = "Ouch, looking a little blunt."; 
} 
} 
else if (choice1 === "paper") { 
if (choice2 === "rock") { 
    document.getElementById('results').innerHTML = "You smothered them, eesh!" 
} else { 
    document.getElementById('results').innerHTML = "You're looking a bit like a banana split." 
} 
} 
else { 
document.getElementById('results').innerHTML = "Something's not quite right...what did you do?!" 
} 
} 

// refresh, clear and display computer choices and results. Disable, enable buttons. 
function disableButtons() { 
    $('button.choices').attr('disabled', true); 
} 

function enableButtons() { 
    $('button.choices').attr('disabled', false); 
} 

$('.choices').click(function() { 
    $('#you').html(user); // this works on codepen but not on jsfiddle? D: 
    $('#computer').html('...'); 
    disableButtons(); 
}); 
$('#refresh').click(function() { 
    $('#results').html(''); 
    $('#you, #computer').html('...'); 
    enableButtons(); 
    refreshComputer(); 
}); 
$('.compares').click(function() { 
    $('#computer').html(computerChoice); 
}); 

的版本的jsfiddle没有工作,所以我添加了一个codepen代替 Working Codepen

+0

'refreshComputer'定义在哪里? –

+2

检查您的控制台。遍地都有错误,大部分或全部都与变量或函数范围有关。 –

+0

对于这样一个更复杂的问题,最好把它放到[JSFiddle](https://jsfiddle.net/)或[CodePen](https://codepen.io/)中,让它工作在那里,那么找出一个有用的解决方案会变得更容易。 – samanime

回答

1

你的代码看起来不错,但它似乎尝试了混合香草JavaScript与JQuery,并在你的html中添加了一些(不必要的)处理程序,可能作为测试你的不同选项的一部分。

我只是重构了一下你的代码,这样它就会刷新每次点击'1..2..3'按钮时的计算机选择,并且它使用JQuery来处理所有你似乎是无论如何已经使用它(例如通过JQuery或使用innerHTML选项设置html,这是您自己的偏好课程,只需要有1个代码库,其中所有代码都使用类似的方式处理即可)。不错,但这个网站有一个完全有效的代码编辑器,你也可以显示出它的样子之后;)

$(function() { 
 
    // click function for choices 
 
    $('.choices').on('click', function(e) { 
 
    var choice = $(e.target).text(); 
 
    $('#you').html(choice); 
 
    disableButtons(); 
 
    }); 
 
    
 
    // click function for refresh 
 
    $('#refresh').click(function() { 
 
    $('#results').html(''); 
 
    $('#you, #computer').html('...'); 
 
    enableButtons(); 
 
    }); 
 
    
 
    // click function for 1..2..3 
 
    $('#compares').click(function() { 
 
    var computerChoice = getComputerChoice(), user = getUserChoice(); 
 
    $('#computer').html(computerChoice); 
 
    compare(user.toLowerCase(), computerChoice.toLowerCase()); 
 
    }); 
 
    
 
    // gets the previously stored userChoice 
 
    function getUserChoice() { 
 
    return $('#you').text(); 
 
    } 
 

 
    // gets a generated computer choice 
 
    function getComputerChoice() { 
 
    var computerChoice = Math.random(); 
 
    if (computerChoice < 0.34) { 
 
     computerChoice = "rock"; 
 
    } else if (computerChoice < 0.67) { 
 
     computerChoice = "paper"; 
 
    } else { 
 
     computerChoice = "scissors"; 
 
    } 
 
    return computerChoice; 
 
    } 
 

 
    //compare user choice to computer choice 
 
    function compare(choice1, choice2) { 
 
    var result; 
 
    if (choice1 === choice2) { 
 
     result = "How boring, you tied."; 
 
    } else if (choice1 === "rock") { 
 
     if (choice2 === "scissors") { 
 
     result = "They'll feel that in the morning."; 
 
     } else { 
 
     result = "Can you breathe? I think not."; 
 
     } 
 
    } else if (choice1 === "scissors") { 
 
     if (choice2 === "paper") { 
 
     result = "Snippitysnip, you sliced them in two."; 
 
     } else { 
 
     result = "Ouch, looking a little blunt."; 
 
     } 
 
    } else if (choice1 === "paper") { 
 
     if (choice2 === "rock") { 
 
     result = "You smothered them, eesh!" 
 
     } else { 
 
     result = "You're looking a bit like a banana split." 
 
     } 
 
    } else { 
 
     result = "Something's not quite right...what did you do?!" 
 
    } 
 
    $('#results').html(result); 
 
    } 
 

 
    // refresh, clear and display computer choices and results. Disable, enable buttons. 
 
    function disableButtons() { 
 
    $('button.choices').attr('disabled', true); 
 
    } 
 

 
    function enableButtons() { 
 
    $('button.choices').attr('disabled', false); 
 
    } 
 
});
body { 
 
    text-align: center; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Rock Paper Scissors</h1> 
 
<h2>Pick your weapon!</h2> 
 
<p> 
 
    <button id="refresh">New Game</button> 
 
</p> 
 
<button class="choices">Rock</button> 
 
<button class="choices">Paper</button> 
 
<button class="choices">Scissors</button> 
 
<p> 
 
    <button id="compares">1...2...3...</button> 
 
</p> 
 
<p><b id="you">...</b> Vs. 
 
    <b id="computer">...</b> 
 
</p> 
 
<p><b id="results"></b> 
 
</p>

+0

非常感谢你!我需要稍后坐下来了解所有这些:D – lmutton

+0

您是否可以为我解释这一行,var computerChoice = getComputerChoice(),user = getUserChoice(); – lmutton

+0

@lmutton是的,它声明了2个变量,它们从相应的方法中获取它们的值。 'getComputerChoice()'每次获得一个新的生成值,'getUserChoice()'通过单击html中的按钮来获取之前设置的文本。这两个值然后作为参数发送给“比较”功能。你想要解释的那个陈述的另一部分? – Icepickle

0

你为什么不创建新游戏的功能并在那里给出computerChoice的值。 声明变量函数

var computerChoice = 0 

function newgame(){ 
computerChoice = Math.Random() 
} 

前,并呼吁对NewGame按钮点击此功能。

<button onclick="newgame()">New Game</button> 

让我知道如果你想要别的东西,我会更新我的答案

+0

这看起来不起作用,我只是回到0而不是摇滚纸或剪刀。 – lmutton

+0

@lmutton我稍微更新了我的答案,你还可以调试代码,以便在更新后的代码运行后检查你到底在哪里得到0。 –

0

首先回答你的问题:

你可以在“刷新”的(改值)通过将其转换为一个计算变量来变量(换句话说,每次执行该函数时都会生成一个函数,并生成一个新的随机数并将其返回)。查看下面的代码和computerChoice函数。

持续到更多详细信息:你正在做的(至少)错误地两件事情:

  1. 混合jQuery's click method与本地(内置)onClick event handler
  2. 使用内联单击处理
  3. 混合的getElementById与元素

一般的jQuery选择器,在项目中增加一个很大的图书馆,而不是使用它的方法和工具,是没有意义的。

如果你需要在你的项目中使用jQuery(可能不适用于像这样简单的程序),最好使用the .on() method,这使得你可以更灵活地执行event delegation

您应该删除您在线点击处理程序,这是一个确定性:

<button class="js-choices">Rock</button> 
<button class="js-choices">Paper</button> 
<button class="js-choices">Scissors</button> 

然后装上js-choices元素的事件处理程序,使用事件代表团:

$('body').on('click', '.js-choices', function() { 
    choose($(this).text()); 
}); 

function choose(choice) { 
    user = choice; 
} 

我通过您的代码去了,使它工作。我看到下面的其他问题:

  1. 你用太多if S:几乎始终是一个很好的候选人switch statements
  2. 你在你的条件有逻辑孔(用于的Math.random的值进行比较时( ))

下剪断并不完美,但它肯定是一个进步:

var user; 
 

 
$('body').on('click', '.js-choices', function() { 
 
    user = $(this).text(); 
 
    $('#you').html(user); 
 
    $('#computer').html('...'); 
 
    disableButtons(); 
 
}); 
 

 

 
//computer choices 
 
function computerChoice() { 
 
    var temp = Math.random(); 
 
    if (temp < 0.34) { 
 
    return "rock"; 
 
    } 
 
    if (temp >= 0.34 && temp < 0.67) { 
 
    return "paper"; 
 
    } else { 
 
    return "scissors"; 
 
    } 
 
} 
 

 
//compare user choice to computer choice 
 

 
// cache your results element to only access it 1 time and improve performance 
 
// the naming convention says, use a variable with a '$' in front if its 
 
// a jquery object 
 

 
var $results = $('#results'); 
 

 
function compare(user, computer) { 
 
    if (user === computer) { 
 
    $results.text("How boring, you tied."); 
 
    } else if (user === "rock") { 
 
    if (computer === "scissors") { 
 
     $results.text("They'll feel that in the morning."); 
 
    } else { 
 
     $results.text("Can you breathe? I think not."); 
 
    } 
 
    } else if (user === "scissors") { 
 
    if (computer === "paper") { 
 
     $results.text("Snippitysnip, you sliced them in two."); 
 
    } else { 
 
     $results.text("Ouch, looking a little blunt."); 
 
    } 
 
    } else if (user === "paper") { 
 
    if (computer === "rock") { 
 
     $results.text("You smothered them, eesh!"); 
 
    } else { 
 
     $results.text("You're looking a bit like a banana split."); 
 
    } 
 
    } else { 
 
    $results.text("Something's not quite right...what did you do?!"); 
 
    } 
 
} 
 

 
// refresh, clear and display computer choices and results. Disable, enable buttons. 
 
function disableButtons() { 
 
    $('.js-choices').attr('disabled', true); 
 
} 
 

 
function enableButtons() { 
 
    $('.js-choices').attr('disabled', false); 
 
} 
 

 
$('#refresh').click(function() { 
 
    $('#results').html(''); 
 
    $('#you, #computer').html('...'); 
 
    computerChoice(); 
 
    enableButtons(); 
 
}); 
 
$('.js-play').click(function() { 
 
    compare(user, computerChoice()); 
 
    $('#computer').html(computerChoice); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h1>Rock Paper Scissors</h1> 
 
<h2>Pick your weapon!</h2> 
 
<p> 
 
    <button id="refresh">New Game</button> 
 
</p> 
 
<button class="js-choices">rock</button> 
 
<button class="js-choices">paper</button> 
 
<button class="js-choices">scissors</button> 
 
<p> 
 
    <button class="js-play">1...2...3...</button> 
 
</p> 
 
<p><b id="you">...</b> Vs. 
 
    <b id="computer">...</b></p> 
 
<p><b id="results"></b></p>

+0

我会同意你的大部分重构,但是你在每次尝试时都会调用比较函数而没有将游戏关联起来的参数(尽管我认为这是你的一个疏忽;))。 – Icepickle

+0

确实:)我只是在纠正一些东西。比较()函数通常是一团糟......那些嵌套的ifs .. –

+0

这对第一次尝试,块范围,稳定的分号使用来说并不坏,当然它可以被改进,但是在所有的诚实中,我都会记住,并有一些旧的代码铺设在我也认为,哎;)Btw不会从一开始就设置结果的一次ifs后受益吗? :)重复一个经常发表的声明,借给排除它,只设置一次:) – Icepickle