【发布时间】：2013-03-10 07:14:47
【问题描述】：
我无法让我的 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>
【问题讨论】：