0
我无法让我的keydown事件侦听器检测到键输入。无法检测到canvas上的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>
真棒 - 感谢!我认为这可能是这样的。 – FlyingLizard 2013-03-10 16:41:49