Ok, well with hangman you’ll only be interested in capturing the keys a - z
These are represented by the keycodes 65 - 90.
You can capture a keycode thus:
$(document).keyup(function(e) {
// Key's value is held in e.keyCode;
});
You don’t have to use jQuery to do this, but it smooths out a couple of cross-browser compatibility issues, so I’ll do so for this example.
We’re also using the .keyup() method, to prevent firing multiple events if a user holds a key down for a long time.
Then, you need some way of storing keys pressed, so that the user can only press them once:
var keysPressed = [];
$(document).keydown(function(e) {
// Key's value is held in e.keyCode;
});
And you’ll need a way of mapping these keycodes to actual letters. For this we can use an object literal:
var keysPressed = [];
var keyCodes = {
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z"
}
$(document).keydown(function(e) {
// Key's value is held in e.keyCode;
});
Now we’ll need some kind of check to see if we are interested in the key pressed:
You can do this by using an if/else statement and checking that the key code is within the desired range.
We’ll also need somewhere to display the results. Let’s use a <p> tag and give it a unique id:
<p id="results">Nothing pressed yet</p>
$(document).keydown(function(e) {
if(e.keyCode > 64 && e.keyCode < 91){
$("#results").text("You pressed: " + keyCodes[e.keyCode]);
} else {
$("#results").text("Key not recognized");
}
});
I’m using the .text() method to alter the contents of the p tag.
Now we can recognize keys which are relevant for the game and display them on screen.
The next thing to do is to store them in the array.
keysPressed.push(e.keyCode);
And to stop the array from growing to silly proportions, let’s strip out any duplicate values immediately after adding the keypress value.
keysPressed = $.unique(keysPressed);
Note: this is maybe not the best way to do this, but I’m trying to keep things simple.
Then when a key is pressed, all we need to do is to check the array to see if has been pressed before.
We can do this using jQuery’s .inArray() method.
if($.inArray(e.keyCode, keysPressed) === -1){
$("#results").text("You pressed: " + keyCodes[e.keyCode]);
} else {
$("#results").text("You have pressed this key before!!");
}
And for good measure, let’s give the player some kind of feedback as to what they have pressed:
<p>So far, you have pressed: <span id="keysPressed">nothing</span></p>
var keys = keysPressed.map(function(value){
return keyCodes[value];
}).sort().join(', ');
$("#keysPressed").text(keys);
We can do this by looping over our array in which we stored the values of the key presses and mapping them to actual letters.
Here’s everything together. I added a bit of styling and altered the user feedback ever so slightly.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>keypress example</title>
<style>
body{
background: black;
padding:15px;
color: lime;
font-family: 'Lucida Console', Monaco, monospace;
}
.warning{
color: yellow;
}
</style>
</head>
<body>
<p>Press a key!</p>
<p id="results">Nothing pressed yet</p>
<div>So far, you have pressed: <span id="keysPressed">nothing</span></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var keysPressed = [];
var keyCodes = {
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z"
}
$(document).keydown(function(e) {
if(e.keyCode > 64 && e.keyCode < 91){
$("#results").text("You pressed: " + keyCodes[e.keyCode]);
if($.inArray(e.keyCode, keysPressed) !== -1){
$("#results").append("<span class='warning';> - you have pressed this key before!!</span>");
}
keysPressed.push(e.keyCode);
keysPressed = $.unique(keysPressed);
} else {
$("#results").text("Key not recognized");
}
var keys = keysPressed.map(function(value){
return keyCodes[value];
}).sort().join(', ');
$("#keysPressed").text(keys);
});
</script>
</body>
</html>
And here’s a demo.
I hope that helps.