Javascript 使用jQuery要求用户按键盘上的每个字母和数字

我需要使用jQuery创建一个游戏，要求用户按键盘上的每个字母和数字

我首先创建了一个包含26个字母和10个数字的数组，并将它们显示在屏幕上。这应该使用jQuery向DOM追加一次，而不是对每个字母单独追加。当用户按下某个键时，我需要检查它是否被按下。如果已按下，则将字母或数字灰显。如果之前按过该键，请告知用户。一旦按下所有角色，我需要让用户知道他们赢了游戏，应该使用jQuery显示消息

这是我到目前为止在DOM上显示字母的所有代码，我真的不知道从这里可以走到哪里：

var array = [];
var func = function(num1,num2){

    for(var i = num1; i <= num2; i++){
        array.push(String.fromCharCode(i));
    }

  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}

func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)

var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

var数组=[]；
var func=函数（num1，num2）{
对于（var i=num1；i，这里有一种方法可以实现您想要的：

假设html文件包含：

<div id="board"></div>
<div id="log"></div>

Html文件：

<div id="board"></div>



Js文件：

var array = []
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        // create a button with the charcode, and an id
        var btn = $('<button>').html(String.fromCharCode(i)).prop('id', i)
  array.push(btn)
    }
}
func(65,90)
func(48,57)

// appending button to the board
$('#board').append(array)

var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode || 0;
    if(pressed.indexOf(code) > -1) return
    // quit  if code has already been pressed
    pressed.push(code); // adding the code to the pressed array
    // changing button color via css class
    $('#' + code).addClass('disabled')
})

var数组=[]
var func=函数（num1，num2）{
对于（var i=num1；i-1）返回
//如果已按下代码，则退出
push（code）；//将代码添加到按下的数组中
//通过css类更改按钮颜色
$（'#'+code）.addClass（'已禁用'）
})
这里有一种方法可以实现您的目标：

假设html文件包含：

<div id="board"></div>
<div id="log"></div>

Html文件：

<div id="board"></div>



Js文件：

var array = []
var func = function(num1,num2){
    for(var i = num1; i <= num2; i++){
        // create a button with the charcode, and an id
        var btn = $('<button>').html(String.fromCharCode(i)).prop('id', i)
  array.push(btn)
    }
}
func(65,90)
func(48,57)

// appending button to the board
$('#board').append(array)

var pressed = []
// listenning on window 'keypress' event
$(document).on('keypress', function(ev) {
    // get the charcode pressed
    var code = ev.charCode || ev.keyCode || 0;
    if(pressed.indexOf(code) > -1) return
    // quit  if code has already been pressed
    pressed.push(code); // adding the code to the pressed array
    // changing button color via css class
    $('#' + code).addClass('disabled')
})

var数组=[]
var func=函数（num1，num2）{
对于（var i=num1；i-1）返回
//如果已按下代码，则退出
push（code）；//将代码添加到按下的数组中
//通过css类更改按钮颜色
$（'#'+code）.addClass（'已禁用'）
})
另一个答案，稍微接近原始代码，也满足了一次添加所有字母的原始要求

需要css标记：

.gray {color:gray;}

下面是javascript：

var array = [];
var func = function(num1,num2){

    for(var i = num1; i <= num2; i++){
         var ch = String.fromCharCode(i);
        array.push('<span id="char-'+ch.toLowerCase()+'">'+ch+'</span>');
    }

  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}

func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)

var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

$(document).keypress(function(e){
    if(/[a-z0-9]/i.test(e.key)) {
        $('#char-'+e.key.toLowerCase()).addClass('gray');
    }
});

var数组=[]；
var func=函数（num1，num2）{
对于（var i=num1；i另一个答案，稍微接近原始代码，同时也满足一次添加所有字母的原始要求

需要css标记：

.gray {color:gray;}

下面是javascript：

var array = [];
var func = function(num1,num2){

    for(var i = num1; i <= num2; i++){
         var ch = String.fromCharCode(i);
        array.push('<span id="char-'+ch.toLowerCase()+'">'+ch+'</span>');
    }

  for(var i = 0; i < array.length; i++){
  array[i].className= array[i];
  }
    return(array);
}

func(65,90)
func(48,57)
String.fromCharCode(65,66,67,68)

var para = document.createElement("p");
para.innerHTML=array
document.body.appendChild(para);

$(document).keypress(function(e){
    if(/[a-z0-9]/i.test(e.key)) {
        $('#char-'+e.key.toLowerCase()).addClass('gray');
    }
});

var数组=[]；
var func=函数（num1，num2）{
对于（var i=num1；i thxs）要获得帮助，我想知道如果代码被推入按下的数组中，并且再次按下该键，我将如何提醒用户该键已按下？只需将
if（pressed.indexOf（code）>-1）return
部分替换为
if（pressed.indexOf（code）>-1）alert（'ready pressed'）
我尝试使用if（array.length-pressed.length==0）{alert（“你赢了这场比赛”）；}之类的东西，但pressed.length会考虑所有按下的内容，即使按下两次，我如何设置一旦按下所有内容，即使按键按下两次，主要条件是每个按钮都已按下，该条件将发出警报（“您赢了”）使用
if（pressed.indexOf（code）>-1）返回警报（'ready pressed'）
（添加
return
语句）。然后，如果（pressed.length==array.length）返回警报（'win the game'），则可以执行
）
thxs要获得帮助，我想知道如果将代码推入按下的数组，并且再次按下该键，我将如何提醒用户该键已按下？只需将
if（pressed.indexOf（code）>-1）返回
if（pressed.indexOf（code）>-1）警报（“已按下”）之类的内容替换为
if（pressed.indexOf（code）>-1）
我尝试使用if（array.length-pressed.length==0）{alert（“你赢了这场比赛”）；}之类的东西，但pressed.length会考虑所有按下的内容，即使按下两次，我如何设置一旦按下所有内容，即使按键按下两次，主要条件是每个按钮都已按下，该条件将发出警报（“您赢了”）使用
if（pressed.indexOf（code）>-1）返回警报（'ready pressed'）
（添加
return
语句）。然后，如果（pressed.length==array.length）返回警报（'win the game'），则可以执行