0

我无法让我的 keydown 事件侦听器检测键输入。

我试过了：

  • 向画布添加选项卡索引
  • 鼠标悬停在画布上移动时添加焦点的鼠标悬停侦听器
  • 将 canvas.focus() 添加到 keydown 例程
  • 其他各种可能与它无关的东西

据我所见，我的代码看起来像我在网上各个地方找到的示例，所以我不知道问题所在，也许很简单。

如果相关的话，控制台也会说“未定义 evt”。

我将把整个代码粘贴在这里，因为我不知道什么是相关的，什么不是，但事件监听器就在底部。其余的创建了我的小三角哥，并让他面对鼠标指针，所以有一些事件正在监听，只是没有按下键。

谢谢你的尽心帮助！

<!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>
4

1 回答 1

1

你非常接近！

你不小心把canvas.addEventListener('keydown', playerMove, true); 在 playerMove 函数内部，因此永远不会设置事件侦听器。

此外，您缺少一些大括号，您需要触发 onload 事件来运行您的函数（我在您的 body 标记中放置了一个 init() 触发器）。

这是您的代码——稍作修改：

<!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>
于 2013-03-09T23:06:19.940 回答