重复无效的用户输入,直到它有效为止(伪)
Repeat invalid user input until it is valid (pseudo)
由于某些原因,我很难在JS中执行以下代码:
假设我们要求用户移动棋盘上的一个棋子。他们可以做的位置是位置A,位置B或位置c。每个位置一次只能放一件。否则无效。
第一个用户决定移动位置A,第二个用户想移动到位置A,但当然不能,因为它已经被占用了。直到第二个用户正确地输入了一个有效的移动,第一个用户必须等到那个时候。
在我的代码中,我能够创建一个函数来检查用户的输入是否有效,board.validMove(position) (boolean)。
我本以为这样的东西可以工作,但它似乎进入了一个无限循环:
Game.prototype.playerTurn = function(player){
$(".cell").click(function(){
var position = #(this).attr("id");
var isItValid = board.validMove(position) // this will return true or false if it is valid
while( isItValid === false) { // I'd thought until isItValid becomes true, it will ask the user to choose another position
game.playerTurn(player) //call again
if (isItValid === true){
break;
}
}
board.updateBoard(position, player) // updates the board
game.switchPlayer() //switch the currentPlayer
}
我错过了什么?
这里的基本思想是,当您使用while
循环时,用户永远没有机会更改任何内容。只要JavaScript 在主动运行,它就不能接受来自用户的任何输入。
相反,您想要验证移动是否有效,只有在有效的情况下才继续。否则,您希望通知用户他们所做的操作无效。
下面是这个想法的一个基本例子:
// Track which players turn it is
var whosTurn = 1;
// Only setup the event handler once
// Setting up the handler multiple times will cause problems
$('div').click(function() {
var $el = $(this);
var playerClass = 'player-' + whosTurn;
if ($el.hasClass('taken')) {
// Alert the user that it isn't a valid move and allow them to change their move
alert('That spot is already taken');
return;
}
// Mark the spot and switch the players
$el.addClass('taken ' + playerClass);
whosTurn = (whosTurn === 1) ? 2 : 1;
});
div {
width: 100px;
height: 100px;
color: #FFF;
background-color: #333;
float: left;
margin-right: 2em;
margin-bottom: 2em;
}
.player-1 {
background-color: #F00;
}
.player-2 {
background-color: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div style="clear: left">4</div>
<div>5</div>
<div>6</div>
变量isItValid
在函数内定义,我没有看到任何修改它的代码。我猜你想让game.playerTurn(player)
修改它,但它不能。您需要检查在while
循环的每次迭代中移动是否有效。同时删除
if (isItValid === true){
break;
}
这是相当多余的。
.click
也不等待点击,它附加一个点击处理程序。下面是一个示例,说明如何附加一个处理程序并切换它的可用性
(function($) {
// Flags
var waitingForClick = flase;
// Some action sets waitingForClick = true
// Click handlers
$('.cell').click(function(
if(!waitingForClick) return;
movePlayer(this);
});
function movePlayer(cell) {
var position = $(cell).attr("id");
}
})(jQuery);
相关文章:
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- 滚动在Chrome中有效,但在Firefox或IE中无效
- 文本字段显示它是有效的,即使它在ExtJS中是无效的
- JS代码在jsbin中有效,在jsfiddle或Chrome/Safari中无效
- 为什么这个按钮在IE中有效,但在Firefox中无效
- Joomla模式框弹出代码在文章中有效,但在代码中无效
- jQuery"焦点”;在一个实例中有效,但在其他实例中无效
- javascript/jQuery:在title中添加换行符——在IE9中有效,但在IE8中无效
- 数组在手动写入时有效,但从文本文件加载时无效
- parseJSON在一种情况下有效,而在另一种情况中无效
- 为什么视频不显示在有角度的灯箱中?图像有效,但视频无效;t
- MagnificPopupLightbox在RubyonRails开发中有效,但在部署到Heroku时无效
- 获取所选选项的Javascript在Webkit/FF中有效,但在IE中无效
- @媒体查询在桌面浏览器中有效,而在移动浏览器中无效
- 为什么form.submit()在使用jQuery时有效,而在使用普通JS时无效
- 转换链接在jsfiddle中有效,但在我的浏览器上无效
- 指定的侧边栏广播器无效 -- 有效的侧边栏广播器是什么样子的
- MySql数据库INSERT操作在硬盘(localhost)上有效,但在Internet上托管时无效
- 哪些字符在JSON键名中有效/无效
- 角度材料设计输入有效/无效