Develop Reference

js keybourd function - event is undefined

what wrong in this code? why console.log(evt) returns 'undefined'?
this is my code:
var documentKeydown = (evt)=>{
console.log(evt);
if (counter == 0) {
XWhenDown = currentX;
YWhenDown = currentY;
document.onkeyup = documentKeyup();
switch (evt.keyCode) {
case 37 : currentX -= 10; break;
case 38 : currentY -= 10; break;
case 39 : currentX += 10; break;
case 40 : currentY += 10; break;
}
animationTick = Ticker.add(animation);
}
}
document.onkeydown = documentKeydown();

You should call your function only when an event happens:
var documentKeydown = ()=>{
console.log(event);
if (counter == 0) {
XWhenDown = currentX;
YWhenDown = currentY;
document.onkeyup = documentKeyup();
switch (event.keyCode) {
case 37 : currentX -= 10; break;
case 38 : currentY -= 10; break;
case 39 : currentX += 10; break;
case 40 : currentY += 10; break;
}
animationTick = Ticker.add(animation);
}
}
document.addEventListener('keydown', documentKeydown) ;

it will be document.onkeydown = documentKeydown;
not document.onkeydown = documentKeydown();
documentKeydown is a function so do not need add () to call
var documentKeydown = (evt)=> {
console.log(evt);
}
document.onkeydown = documentKeydown;
<input type="text"/>

How to make this object move faster

In my code I make an object (A man sprite) move 1 pixel every time an arrow key is pressed. When you hold down the arrow key, the man is very very slow. I tried increasing the amount each time the key is pressed but that is not smooth enough. Can somebody tell me how I can make him move one pixel each time but move one pixel every 100 milliseconds? Thanks I appreciate the help.
function moveLeft() {
var newLeft = left - 1;
left = newLeft;
myElement.style.left = newLeft + 'px';
}
function moveUp() {
var newTop = topStyle - 1;
topStyle = newTop;
myElement.style.top = newTop + 'px';
}
function moveRight() {
var newLeft2 = left + 1;
left = newLeft2;
myElement.style.left = newLeft2 + 'px';
}
function moveDown() {
var newTop2 = topStyle + 1;
topStyle = newTop2
myElement.style.top = newTop2 + 'px';
}

try it, i just re-write the whole code for you. now i use an interval for each 100 milliseconds
var myElement = document.getElementById("character");
var move_left = false;
var move_up = false;
var move_right = false;
var move_down = false;
setInterval(function (){
if (move_left) myElement.style.left = (getIntfromStyle(myElement.style.left) - 1) + 'px';
if (move_up) myElement.style.top = (getIntfromStyle(myElement.style.top) - 1) + 'px';
if (move_right) myElement.style.left = (getIntfromStyle(myElement.style.left) + 1) + 'px';
if (move_down) myElement.style.top = (getIntfromStyle(myElement.style.top) + 1) + 'px';
}, 100);
// with this function, you dont need topStyle & left variables to store previous positions
// you can get current positioin easilysily
function getIntfromStyle(in_style) {
return parseInt(in_style.replace('px', ''));
}
// i use keyboard to tell code when character should be moved and when must stop
document.onkeydown = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37: // left
move_left = true;
break;
case 38: // up
move_up = true;
break;
case 39: // right
move_right = true;
break;
case 40: // down
move_down = true;
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
}
document.onkeyup = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37: // left
move_left = false;
break;
case 38: // up
move_up = false;
break;
case 39: // right
move_right = false;
break;
case 40: // down
move_down = false;
break;
}
}
<div id="character" style="background:red;width:20px;height:20px;position:fixed;display:block;left:0;top:0"></div>

js move object with arrow keys (only once)

Hi I've taken the code (to move objects with arrow keys) from some internet template. Since then, I've limited the area that the object can be moving around but I still have a problem that when I press an arrow key the object moves more than necessary, I just want to move it 20px in the appropriate direction, regardless how long the key is pressed.
Here are the functions:
var GameInput = (function() {
var pressedKeys = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
pressedKeys[key] = status;
}
document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
function isDown(key) {
return pressedKeys[key];
}
return {
isDown: isDown
};
})();
And the function calling it:
function update() {
if(GameInput.isDown('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
if(GameInput.isDown('UP')) {
if(player.y > 0) {
player.y -= 20;
}
}
if(GameInput.isDown('LEFT')) {
if(player.x > 0) {
player.x -= 20;
}
}
if(GameInput.isDown('RIGHT')) {
// Don't go out of canvas
if(player.x < canvas.width - player.sizeX) {
player.x += 20;
}
}
// You can pass any letter to `isDown`, in addition to DOWN,
// UP, LEFT, RIGHT, and SPACE:
// if(GameInput.isDown('a')) { ... }
}
I understand why it does what it does but I have not been able to modify it to only move 20px regardless how much time a key is pressed.
Thank you

How about using the keyup event to allow the operation to repeat only when a new key is pressed. Something like:
var allowRepeat = true;
document.addEventListener('keydown', function(e) {
if (allowRepeat) {
setKey(e, true);
}
allowRepeat = false;
});
document.addEventListener('keyup', function(e) {
allowRepeat = true;
setKey(e, false);
});

I think your logic is a little reverted, what you want is to disallow update 'before key up is fired', from your code, as long as the keyUp event is not fired, isDown('XXX') is still true..
So this is what you need: (you should do some refactoring, but this should work)
var GameInput = (function() {
....
var _allowUpdate = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
// This checks whether it's the first time the key being pressed.
allowUpdate[key] = !pressedKeys[key] && status;
pressedKeys[key] = status;
}
function allowUpdate(key) {
_allowUpdate[key] ;
}
return {
allowUpdate: allowUpdate
};
}
function update() {
if(GameInput.allowUpdate('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
.....
}

Javascript: Assigning keys to Two Different Objects on One Canvas

I want to put two different colored rectangles on one canvas and assign different keyboard keys to use each separately . Unfortunately it only works for one of them. Here is my code. I added different variables for each object, but still the other one doesn't appear. Should I apply something to the function or with the window.onload?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var GAME_SPEED = 1000/60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;
var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;
var aKey = false;
var sKey = false;
var wKey = false;
var dKey = false;
var enterKey = false;
var bX = 100;
var bY = 100;
var sideLengthZ = 10;
window.onload = function()
{
c = document.getElementById("myCanvas");
c.width = window.innerWidth*0.9;
c.height = window.innerHeight*0.9;
window.setInterval("draw()" , GAME_SPEED);
}
document.onkeyup = function(event)
{
switch(event.keyCode)
{
case 37: leftKey =false;
break;
case 39: rightKey = false;
break;
case 38: upKey = false;
break;
case 40: downKey = false;
break;
case 32: spaceKey = false;
break;
case 65: aKey =false;
break;
case 83: sKey = false;
break;
case 68: dKey = false;
break;
case 87: wKey = false;
break;
case 13: enterKey = false;
break;
}
}
document.onkeydown = function(event)
{
switch(event.keyCode)
{
case 37: leftKey =true;
break;
case 39: rightKey = true;
break;
case 38: upKey = true;
break;
case 40: downKey = true;
break;
case 32: spaceKey = true;
break;
case 65: aKey =true;
break;
case 83: sKey = true;
break;
case 68: dKey = true;
break;
case 87: wKey = true;
break;
case 13: enterKey = true;
break;
}
}
function draw()
{
if(leftKey == true)
{
x--;
}
if(rightKey == true)
{
x++;
}
if(upKey == true)
{
y--;
}
if(downKey == true)
{
y++;
}
if(spaceKey == true)
{
sideLength++;
}
var c = document.getElementById("myCanvas");
var cntxt = c.getContext("2d");
cntxt.fillStyle= "#FF0000";
cntxt.fillRect(x, y, sideLength, sideLength);
}
function draw2()
{
if(aKey == true)
{
bX--;
}
if(dKey == true)
{
bX++;
}
if(wKey == true)
{
bY--;
}
if(sKey == true)
{
bY++;
}
if(enterKey == true)
{
sideLengthZ++;
}
var b = document.getElementById("myCanvas");
var cntxt2 = b.getContewxt("2d");
cntxt2.fillStyle= "#F00000";
cntxt2.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}
</script>
</head>
<body>
<!--Marlon Jacques -->
<canvas id="myCanvas" style="border: 5px solid
#000000;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

You have a number of problems in your code. The first is that you were never calling the draw2 function. The second is that you were trying to use two different contexts. It is best to use only one global context.
The fixed code is below.
var GAME_SPEED = 1000 / 60; //game rate
var x = 100;
var y = 100;
var sideLength = 10;
var leftKey = false;
var rightKey = false;
var upKey = false;
var downKey = false;
var spaceKey = false;
var aKey = false;
var sKey = false;
var wKey = false;
var dKey = false;
var enterKey = false;
var bX = 100;
var bY = 100;
var sideLengthZ = 10;
var ctx;
window.onload = function() {
c = document.getElementById("myCanvas");
c.width = window.innerWidth * 0.9;
c.height = window.innerHeight * 0.9;
ctx = c.getContext('2d');
window.setInterval(function() {
draw();
draw2();
}, GAME_SPEED);
}
document.onkeyup = function(event) {
event.preventDefault();
switch (event.keyCode) {
case 37:
leftKey = false;
break;
case 39:
rightKey = false;
break;
case 38:
upKey = false;
break;
case 40:
downKey = false;
break;
case 32:
spaceKey = false;
break;
case 65:
aKey = false;
break;
case 83:
sKey = false;
break;
case 68:
dKey = false;
break;
case 87:
wKey = false;
break;
case 13:
enterKey = false;
break;
}
}
document.onkeydown = function(event) {
event.preventDefault();
switch (event.keyCode) {
case 37:
leftKey = true;
break;
case 39:
rightKey = true;
break;
case 38:
upKey = true;
break;
case 40:
downKey = true;
break;
case 32:
spaceKey = true;
break;
case 65:
aKey = true;
break;
case 83:
sKey = true;
break;
case 68:
dKey = true;
break;
case 87:
wKey = true;
break;
case 13:
enterKey = true;
break;
}
}
function draw() {
if (leftKey == true) {
x--;
}
if (rightKey == true) {
x++;
}
if (upKey == true) {
y--;
}
if (downKey == true) {
y++;
}
if (spaceKey == true) {
sideLength++;
}
ctx.fillStyle = "#FF0000";
ctx.fillRect(x, y, sideLength, sideLength);
}
function draw2() {
if (aKey == true) {
bX--;
}
if (dKey == true) {
bX++;
}
if (wKey == true) {
bY--;
}
if (sKey == true) {
bY++;
}
if (enterKey == true) {
sideLengthZ++;
}
var b = document.getElementById("myCanvas");
var cntxt2 = ctx;
ctx.fillStyle = "#F00000";
ctx.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Marlon Jacques -->
<canvas id="myCanvas" style="border: 5px solid
#000000;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>

Here's to solve your problem and some tips:
Move the drawing of your 2nd player into draw()
You don't have to declare new canvas-variables for your 2nd player, just use the ones you had
If you want to keep some of your old code, fix the typo where you declare the context a second time var cntxt2 = b.getContewxt("2d");
function draw() {
if(leftKey == true) {
x--;
}
if(rightKey == true) {
x++;
}
if(upKey == true) {
y--;
}
if(downKey == true) {
y++;
}
if(spaceKey == true) {
sideLength++;
}
var c = document.getElementById("myCanvas");
var cntxt = c.getContext("2d");
cntxt.fillStyle= "#FF0000";
cntxt.fillRect(x, y, sideLength, sideLength);
if(aKey == true) {
bX--;
}
if(dKey == true) {
bX++;
}
if(wKey == true) {
bY--;
}
if(sKey == true) {
bY++;
}
if(enterKey == true) {
sideLengthZ++;
}
cntxt.fillStyle= "#F00000";
cntxt.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}

How to make a moving div restricted in an outside div?

So I have a div you move with your arrow keys, but how do I make it so it can't go outside the "border div"?
$(document).ready(function(){
$(document).keydown(function(e) {
switch (e.which) {
case 37: // Left
$("#cube").css("left", $("#cube").offset().left - 101);
break;
case 38: // Up
$("#cube").css("top", $("#cube").offset().top - 11);
break;
case 39: // Right
$("#cube").css("left", $("#cube").offset().left - 97);
break;
case 40: // Down
$("#cube").css("top", $("#cube").offset().top - 7);
break;
}
});
});
http://jsfiddle.net/SfKHN/

Here you go:- I tested in FF and Chrome and seems to be fine....
Demo
Probably this is not completely perfect but you can build on it. Key here is to get the margins of the parent right and make sure the cube's left/right/top/bottom doesn't go beyond it. Border width also should be considered. Another thing is your Step should be a multiple of its width/height(as it is a square)
$(document).ready(function(){
$(document).keydown(function(e) {
var cube = $("#cube");
var leftMargin = 0;
var rightMargin = $('#outside').position().left + $('#outside').width() - cube.width();
var topMargin =0;
var bottomMargin = $('#outside').position().top + $('#outside').height() - cube.height();
switch (e.which) {
case 37: // Left
var newLeft = parseInt(cube.position().left - 50);
if(leftMargin <= newLeft)
{
cube.css("left", newLeft);
}
break;
case 38: // Up
var newTop = parseInt(cube.position().top - 50);
if(topMargin <= newTop)
{
cube.css("top",newTop);
}
break;
case 39: // Right
var newRight = (cube.position().left + 50);
if(rightMargin > newRight)
{
cube.css("left", newRight);
}
break;
case 40: // Down
var newBottom = parseInt(cube.position().top + 50);
if(bottomMargin > newBottom)
{
cube.css("top", newBottom);
}
break;
}
});
});

You add simple if statements to make sure you haven't passed the border. Here's an example:
$(document).ready(function(){
$(document).keydown(function(e) {
switch (e.which) {
case 38: // Up
if( ( $("#cube").offset().top - 11 ) >= 0 )
$("#cube").css("top", $("#cube").offset().top - 11);
break;
case 40: // Down
if( ( $( "#cube" ).offset( ).top - 7 ) < ( 400 - 50 ) )
$("#cube").css("top", $("#cube").offset().top - 7 );
break;
}
});
});
You'd make similar changes to the left and right arrows

$(document).ready(function () {
var $out = $('#outside'),
w = $out.width(),
$cube = $('#cube'),
cw = $cube.outerWidth();
$(document).up(function (e) {
switch (e.which) {
case 37:
$cube.css('left', function (_, left) {
left = parseInt(left, 10);
if (left !== 0) return left - cw;
});
break;
case 38:
$cube.css('top', function (_, top) {
top = parseInt(top, 10);
if (top !== -1) return top - cw;
});
break;
case 39:
$cube.css('left', function (_, left) {
left = parseInt(left, 10);
if (left + cw < w) return left + cw;
});
break;
case 40:
$cube.css('top', function (_, top) {
top = parseInt(top, 10);
if (top !== 349) return top + cw;
});
break;
}
});
});
http://jsfiddle.net/QmBNC/