I am making a classic snake remake in JavaScript just for weekend fun, and I ran into this problem that if I press buttons quite fast - the snake (caterpillar in my case) is able to change direction to opposite and run into itself.
The way to recreate this situation is as follows:
direction is for example 'left'
press up(or down) and press right quickly after
now the caterpillar goes backwards. And my goal is it should make U-turn
I made the checks for opposite dir, but this doesn't prevent this
update = function() {
if (cat.direction != 'right' && key[37] === true) {
cat.direction = 'left';
}
if (cat.direction != 'left' && key[39] === true) {
cat.direction = 'right';
}
if (cat.direction != 'down' && key[38] === true) {
cat.direction = 'up';
}
if (cat.direction != 'up' && key[40] === true) {
cat.direction = 'down';
}
};
the full code
I was using normal addEventListener for the key listening, but I changed it for another approach (found somewhere), where I do update on keys very often and caterpillar moving is happening only from time to time, as I thought it might be a problem to directly associate drawing, changing direction and moving in the same time interval. I hope I am understandable, sorry if something isn't clear - I would be happy to provide more info if so.
One solution is to not process more than one key per move, but to allow more responsiveness you could implement a key buffer, instead of maintaining the key states as you do know. You would only collect arrow key presses in that buffer, and not push any repetitions of the same key into it.
Here are the relevant changes to the code:
Initialise the key buffer:
var keyBuffer = [];
Push arrow keys into the buffer when pressed:
var keyDown = function(e) {
var keyCode = e.which ? e.which : e.keyCode;
// *** Queue the arrow key presses
if (keyCode >= 37 && keyCode <= 40 &&
keyCode !== keyBuffer[keyBuffer.length-1] && ) {
keyBuffer.push(keyCode);
}
};
Process one key from the buffer at a time:
var update = function() {
// *** Extract next key from buffer, and only treat that one
// -- could be `undefined`, but that is not a problem:
var key = keyBuffer.shift();
if(cat.direction != 'right' && key === 37){
cat.direction = 'left';
} else if(cat.direction != 'left' && key === 39){
cat.direction = 'right';
} else if(cat.direction != 'down' && key === 38){
cat.direction = 'up';
} else if(cat.direction != 'up' && key === 40){
cat.direction = 'down';
}
};
Only process next key when about to move:
function loop() {
board.resetCanvas();
if(counter > 1000){
update(); // ***only process buffered keys when moving
cat.move();
counter = 0;
}
cat.draw();
counter += 5*cat.multiplier;
};
That's it. See fiddle below:
var canvas = document.getElementById("board");
var context = canvas.getContext("2d", {alpha:false});
var pieceSideLength = canvas.width / 40;
var key = [];
var keyBuffer = [];
window.addEventListener('keyup', function(e) {
this.keyUp.call(this, e);
}, false);
window.addEventListener('keydown', function(e) {
this.keyDown.call(this, e);
}, false);
function Piece(x,y){
this.x = x;
this.y = y;
}
board = {
leftBound: 0,
rightBound: canvas.width / pieceSideLength,
topBound: 0,
bottomBound: canvas.height / pieceSideLength,
drawPiece: function(x, y, color){
context.fillStyle = color;
context.fillRect(x*pieceSideLength,y*pieceSideLength,pieceSideLength,pieceSideLength);
context.strokeStyle = 'white';
context.strokeRect(x*pieceSideLength,y*pieceSideLength,pieceSideLength,pieceSideLength);
},
resetCanvas: function(){
context.clearRect(0,0,canvas.width,canvas.height);
}
};
//cat as for caterpillar
cat = {
x: canvas.width/pieceSideLength/2, //initial x
y: canvas.height/pieceSideLength/2, //initial y
pieces: [],
direction: 'up',
color: '#5da03c',
shouldGrow: false,
multiplier: 5,
init: function(){
cat.pieces.push(new Piece(this.x, this.y));
},
move: function(){
if(cat.pieces.length <= 10){
cat.shouldGrow = true;
}
var newX = cat.pieces[cat.pieces.length-1].x;
var newY = cat.pieces[cat.pieces.length-1].y;
if(cat.direction=='up'){
cat.makeNewHeadAt(newX,newY-1);
}
if(cat.direction=='down'){
cat.makeNewHeadAt(newX,newY+1);
}
if(cat.direction=='left'){
cat.makeNewHeadAt(newX-1,newY);
}
if(cat.direction=='right'){
cat.makeNewHeadAt(newX+1,newY);
}
cat.grow();
},
makeNewHeadAt: function(x,y){
cat.pieces.push(new Piece(x,y));
},
grow: function(){
if(cat.shouldGrow == false){
cat.pieces.shift();
} else {
cat.shouldGrow = false;
}
},
draw: function(){
for(i=0;i<cat.pieces.length;i++){
var p = cat.pieces[i];
board.drawPiece(p.x,p.y,cat.color);
}
}
};
cat.init();
update = function() {
// *** Extract next key from buffer, and only treat that one
// -- could be `undefined`, but that is not a problem:
var key = keyBuffer.shift();
if(cat.direction != 'right' && key === 37){
cat.direction = 'left';
} else if(cat.direction != 'left' && key === 39){
cat.direction = 'right';
} else if(cat.direction != 'down' && key === 38){
cat.direction = 'up';
} else if(cat.direction != 'up' && key === 40){
cat.direction = 'down';
}
};
keyUp = function(e) {
var keyCode = e.which ? e.which : e.keyCode;
this.key[keyCode] = false;
};
keyDown = function(e) {
var keyCode = e.which ? e.which : e.keyCode;
// *** Queue the key presses
if (keyCode >= 37 && keyCode <= 40 &&
keyCode !== keyBuffer[keyBuffer.length-1]) {
keyBuffer.push(keyCode);
}
this.key[keyCode] = true;
};
var counter = 0;
function loop() {
board.resetCanvas();
if(counter > 1000){
update(); // ***only process buffered keys when moving
cat.move();
counter = 0;
}
cat.draw();
counter += 5*cat.multiplier;
};
setInterval(loop, 1);
body { margin: 0px }
<div>
<canvas id="board" width="300" height="200" style="display: block; margin: 0 auto; background-color: #553300; border-style: solid; border-color: green;"></canvas>
</div>
Limiting the buffer size
You can limit the buffer size by replacing this:
keyBuffer.push(keyCode);
with:
keyBuffer = keyBuffer.slice(-2).concat(keyCode);
This will limit the size to 3. Adjust the slice argument as desired.
You can keep track of whether the snake has 'moved'. If you receive keyboard input, don't react to another keypress until the snake has moved. This way you're only allowing 1 key for each movement, so you can't change direction and run into yourself.
Modified example: link
update = function() {
if (moved = true) {
if(cat.direction != 'right' && key[37] === true){
and so forth
I've been working on a simple html5 canvas game, and I'm trying to add touch controls for devices as well as keyboard input for desktops etc.
The keyboard controls are perfect: space bar is tapped to jump, and held for a longer jump.
I've added event listeners for touch control, which emulate the single tap of the spacebar, but I can't figure out how to recreate holding the space bar for longer jumps with the touch control. My keyboard code looks like this:
// jump if not currently jumping or falling
if (KEY_STATUS.space && player.dy === 0 && !player.isJumping) {
player.isJumping = true;
assetLoader.sounds.jump.play();
player.dy = player.jumpDy;
jumpCounter = 12;
}
// jump higher if the space bar is continually pressed
if (KEY_STATUS.space && jumpCounter) {
player.dy = player.jumpDy;
assetLoader.sounds.jump.play();
}
jumpCounter = Math.max(jumpCounter-1, 0);
this.advance();
And that gets tracked with this code:
var KEY_CODES = {
32: 'space'
};
var KEY_STATUS = {};
for (var code in KEY_CODES) {
if (KEY_CODES.hasOwnProperty(code)) {
KEY_STATUS[KEY_CODES[code]] = false;
}
}
document.onkeydown = function(e) {
var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
if (KEY_CODES[keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[keyCode]] = true;
}
};
document.onkeyup = function(e) {
var keyCode = (e.keyCode) ? e.keyCode : e.charCode;
if (KEY_CODES[keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[keyCode]] = false;
}
};
My new event listeners for touch screen devices looks like this:
document.addEventListener("touchstart", touchHandler);
document.addEventListener("touchhold", touchHandler);
document.addEventListener("touchend", touchHandler);
And then I have this function, which is more or less identical to the function for keyboard input, only 'e.touches' is referenced, rather than 'KEY_STATUS':
function touchHandler(e) {
if(e.touches && player.dy === 0 && !player.isJumping) {
player.isJumping = true;
assetLoader.sounds.jump.play();
player.dy = player.jumpDy;
jumpCounter = 12;
e.preventDefault();
}
}
That function enables the little jump. If I include this 'if' statement, it enables multiple jumps:
if (e.touches && jumpCounter) {
player.dy = player.jumpDy;
assetLoader.sounds.jump.play();
}
...rather than enabling the player to perform the longer jump. Essentially, the player could tap to fly throughout the game, which I don't want! Is there a way to specify within the 'touchHandler()' function which kind of jump is being made ie. is the screen being tapped or held? Or would I need to write a separate function for that?
Thanks in advance.
I'm practicing moving around objects when a user presses an arrow key. I've got it so when they press right it moved an object to the right and when they press up it moves it up. However, my function is only able to record 1 of these keypresses at once, so they can't move diagonally:
document.onkeydown = function(e){
if (e.which == 39){ // Move Right
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (e.which == 38){ // Move Up
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
};
Is there a way to respond to both key presses at the same time?
You have to detect both keydown and keyup
var key = {};
document.onkeydown = function(e){
if (e.which == 39 || e.which == 38){ // Move Right
key[e.which] = true;
if (key[39]) {
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (key[38]) {
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
}
};
document.onkeyup = function(e){
if (key[e.which])
delete key[e.which];
};
I would like to add this code to allow navigation through a website with left and right arrows. Is there any way to assign the window.location variable from an image that is linked on that page? I'm trying to make the left and right arrows on the page that are used for navigation on the page to be assigned to the left and right arrows on the keyboard.
img src="leftarrow.png" = previous page
img src="rightarrow.png" = next page
Code to be used: (other code is fine too)
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39){
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39) {
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
Assuming the image is wrapped in an anchor tag (otherwise how would it work?), you could do something like this:
if (keycode == 37) {
img = document.querySelector("img[src='leftarrow.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='rightarrow.png']");
window.location = img.parentElement.href;
return false;
}
We're looking for the appropriate image/navigation link and getting the url from it's anchor container.
I've got several editable divs. I want to jump through them by pressing arrow keys (38 and 40).
Firefox 3 on Mac OS and Linux won't repeat the events on holding the key. Obviously only keypress events are supported for repetition. As the keys 38 and 40 are only supported on keydown I'm kind of stuck.
Yes, you're kind of stuck. You could emulate the behaviour you want by using timers until you receive the corresponding keyup, but this obviously won't use the user's computer's keyboard repeat settings.
The following code uses the above method. The code you want to handle keydown events (both real and simulated) should go in handleKeyDown:
var keyDownTimers = {};
var keyIsDown = {};
var firstKeyRepeatDelay = 1000;
var keyRepeatInterval = 100;
function handleKeyDown(keyCode) {
if (keyCode == 38) {
alert("Up");
}
}
function simpleKeyDown(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
handleKeyDown(keyCode);
}
document.onkeydown = function(evt) {
var timer, fireKeyDown;
evt = evt || window.event;
var keyCode = evt.keyCode;
if ( keyIsDown[keyCode] ) {
// Key is already down, so repeating key events are supported by the browser
timer = keyDownTimers[keyCode];
if (timer) {
window.clearTimeout(timer);
}
keyIsDown[keyCode] = true;
handleKeyDown(keyCode);
// No need for the complicated stuff, so remove it
document.onkeydown = simpleKeyDown;
document.onkeyup = null;
} else {
// Key is not down, so set up timer
fireKeyDown = function() {
// Set up next keydown timer
keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, keyRepeatInterval);
handleKeyDown(keyCode);
};
keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, firstKeyRepeatDelay);
keyIsDown[keyCode] = true;
}
};
document.onkeyup = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
var timer = keyDownTimers[keyCode];
if (timer) {
window.clearTimeout(timer);
}
keyIsDown[keyCode] = false;
};
You can use keypress and check the e.keyCode == 38,40 instead of e.which or e.charCode
This is consistent across Mac and Win.
$('#test').bind($.browser.mozilla ? 'keypress' : 'keyup', function(e) {
if ( (e.which || e.keyCode) == 40 ) { /* doSometing() */ }
});
See JavaScript Madness: Keyboard Events (3.2. Values Returned on Character Events)
and event.keyCode on MDC.