Reputation: 3731

Trouble detecting keydown on canvas

I can't get my keydown event listener to detect key input.

I've tried:

Adding a tab index to the canvas
A mouseover listener to add focus while the mouse moves over the canvas
adding canvas.focus() to the keydown routine
various other stuff that probably has nothing to do with it

As far as I can see my code looks like the examples I found in various places online, so I don't know the problem, maybe something simple.

Also the console is saying "evt is not defined" if that's relevant.

I'll paste the whole code here because I don't know what's relevant and what isn't, but the event listeners are right at the bottom. The rest creates my little triangle dude and faces him to the mouse pointer, so there is some event listening going on, just not the key down.

Thanks for any help you can offer!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>


<style>
body{
margin:0;
}

canvas {
border: solid 1px black;
position:relative;
}

#holder {
display:block;
margin: 100px auto 0 auto;
width:800px;
height:600px;
}
</style>

</head>

<body>
<div id = "holder">
<canvas id="canvas" width="800" height="600" tabindex='1'></canvas>
</div>

<script>
(function(window) {

// define variables
var canvas, c;
var WIDTH;
var HEIGHT;
var INTERVAL = 20; 
var mouseX, mouseY;
var mousePos;

// set up canvas
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

// initial canvas background 
 c.beginPath();
 c.fillStyle = "rgb(45,133,222)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // Player coords and initial location
 function Player () {
 this.x = 400;
 this.y = 300;
 this.w = 20;
 this.h = 20;
 this.xcenter = 400;
 this.ycenter = 300;
 this.angle = 0.9;
 this.fill = '#000000';
 } 
 var Player1 = new Player();

 // game loop interval
 setInterval(mainDraw, INTERVAL);

 // clear canvas function
  function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}

 // drawing function / game loop
  function mainDraw(canvas, message) {

// get the angle between the player coords and the mouse coords  
deltaX = mouseX - Player1.x;
deltaY = mouseY - Player1.y;
var newAngle = Math.atan(deltaY / deltaX);

 // clear the canvas and draw the background again
 clear(c);
 c.beginPath();
 c.fillStyle = "rgb(45,133,22)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // draw the player with the new angle so that it faces the mouse
 c.beginPath();
 c.save();
 c.translate(Player1.x,Player1.y);
 if (deltaX < 0) {
 c.rotate(newAngle);
 }
 else {
 c.rotate(newAngle);
 c.scale(-1,1);
 }
 c.translate(-Player1.x,-Player1.y);
 c.fillStyle = "#000000";
 c.moveTo(Player1.x - 15, Player1.y);
 c.lineTo(Player1.x + 15, Player1.y + 10);
 c.lineTo(Player1.x + 15, Player1.y - 10);
 c.lineTo(Player1.x - 15, Player1.y);
 c.fill();
 c.restore();
 c.closePath();


 }


// focus on the canvas on mouseover to detect key input
var handlefocus=function(e){ 
 if(e.type=='mouseover') 
 { 
 canvas.focus(); return false;
 } 
 else if (e.type=='mouseout')
 { 
 canvas.blur(); return false; 
 } 
 return true; 
}; 
canvas.addEventListener('mouseover',handlefocus,true);  


 // Detect mouse movement and assign to mouseX, mouseY
function mouseMove(e)
{
    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}
canvas.addEventListener('mousemove', mouseMove, true);

// Detect key press for movement
function playerMove(evt)
canvas.focus()
alert('keycode: ' + evt.keyCode);
{
 if ( evt.keyCode == 87 ) {
   Player1.y = Player1.y + 1;
 }

 if ( evt.keyCode == 83 ) {
    Player1.y -= 1;
 }

 if ( evt.keyCode == 65 ) {
    Player1.x -= 1;
 }

 if ( evt.keyCode == 68 ) {
    Player1.x += 1;
 }
 return false;
}
canvas.addEventListener('keydown', playerMove, true);

 })(window);

</script>



</body>

</html>

Upvotes: 0

Answers (1)

markE

Reputation: 105015

You were pretty close!

You accidentally put canvas.addEventListener('keydown', playerMove, true); inside the playerMove function so the event listener was never being set up.

Also, you had a few missing braces and you need to trigger the onload event to run your functions (I put an init() trigger in your body tag).

Here is your code—slightly reworked:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<style>
body{
margin:0;
}

canvas {
border: solid 1px black;
position:relative;
}

#holder {
display:block;
margin: 100px auto 0 auto;
width:800px;
height:600px;
}
</style>

<script>
function init() {
console.log("start");

// define variables
var canvas, c;
var WIDTH;
var HEIGHT;
var INTERVAL = 20; 
var mouseX, mouseY;
var mousePos;

// set up canvas
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

// initial canvas background 
 c.beginPath();
 c.fillStyle = "rgb(45,133,222)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // Player coords and initial location
 function Player () {
 this.x = 400;
 this.y = 300;
 this.w = 20;
 this.h = 20;
 this.xcenter = 400;
 this.ycenter = 300;
 this.angle = 0.9;
 this.fill = '#000000';
 } 
 var Player1 = new Player();

 // game loop interval
 setInterval(mainDraw, INTERVAL);

 // clear canvas function
  function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}

 // drawing function / game loop
  function mainDraw(canvas, message) {

// get the angle between the player coords and the mouse coords  
deltaX = mouseX - Player1.x;
deltaY = mouseY - Player1.y;
var newAngle = Math.atan(deltaY / deltaX);

 // clear the canvas and draw the background again
 clear(c);
 c.beginPath();
 c.fillStyle = "rgb(45,133,22)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // draw the player with the new angle so that it faces the mouse
 c.beginPath();
 c.save();
 c.translate(Player1.x,Player1.y);
 if (deltaX < 0) {
 c.rotate(newAngle);
 }
 else {
 c.rotate(newAngle);
 c.scale(-1,1);
 }
 c.translate(-Player1.x,-Player1.y);
 c.fillStyle = "#000000";
 c.moveTo(Player1.x - 15, Player1.y);
 c.lineTo(Player1.x + 15, Player1.y + 10);
 c.lineTo(Player1.x + 15, Player1.y - 10);
 c.lineTo(Player1.x - 15, Player1.y);
 c.fill();
 c.restore();
 c.closePath();


 }


// focus on the canvas on mouseover to detect key input
var handlefocus=function(e){ 
 if(e.type=='mouseover') 
 { 
 canvas.focus(); return false;
 } 
 else if (e.type=='mouseout')
 { 
 canvas.blur(); return false; 
 } 
 return true; 
}; 
canvas.addEventListener('mouseover',handlefocus,true);  


 // Detect mouse movement and assign to mouseX, mouseY
function mouseMove(e)
{
    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}
canvas.addEventListener('mousemove', mouseMove, true);

// Detect key press for movement
function playerMove(evt){
canvas.focus()
alert('keycode: ' + evt.keyCode);
{
 if ( evt.keyCode == 87 ) {
   Player1.y = Player1.y + 1;
 }

 if ( evt.keyCode == 83 ) {
    Player1.y -= 1;
 }

 if ( evt.keyCode == 65 ) {
    Player1.x -= 1;
 }

 if ( evt.keyCode == 68 ) {
    Player1.x += 1;
 }
 return false;
}


}
canvas.addEventListener('keydown', playerMove, true);

}
</script>

</head>

<body onload="init()">
<div id = "holder">
<canvas id="canvas" width="800" height="600" tabindex='1'></canvas>
</div>
</body>

</html>

Upvotes: 1

Trouble detecting keydown on canvas

Answers (1)

Related Questions