キー入力を検出するキーダウン イベント リスナーを取得できません。
私はもう試した：
- キャンバスにタブ インデックスを追加する
- マウスがキャンバス上を移動している間にフォーカスを追加するマウスオーバー リスナー
- キーダウン ルーチンに canvas.focus() を追加する
- おそらくそれとは関係のない他のさまざまなもの
私のコードを見る限り、オンラインのさまざまな場所で見つけた例のように見えるので、問題はわかりません。おそらく単純なものです。
また、関連する場合、コンソールは「evt is not defined」と言っています。
何が関連して何が関連しないのかわからないので、コード全体をここに貼り付けますが、イベント リスナーは一番下にあります。残りは私の小さな三角形の男を作成し、彼をマウス ポインターに向けます。そのため、キーが押されていないだけでイベントがリッスンされます。
ご協力いただきありがとうございます。
<!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>