자바 onkeydown 함수가 작동하지 않습니다.

캔버스 원을 움직일 수없는 이유는 무엇입니까? 청취자에게 잘못된 점을 알려주세요. 나는 나쁜 실수를 저질렀지만 이해하지 못한다는 것을 이해한다. 나는 물체의 위치를 바꾸고 뒤에 principe를 이해할 수 없다.자바 onkeydown 함수가 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>epicGame</title> 
</head> 
<body> 
<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid black"></canvas> 
<script type="text/javascript"> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext('2d'); 
function drawCircle(){ 
ctx.beginPath(); 
ctx.fillStyle="red"; 
ctx.fill(); 
} 
var velX=50; 
var Player1={ 
    x:150, 
    y:70, 
    velX:20, 
    velY:5, 
    hp:20, 
    startAngle:40, 
}; 
function drawPlayer1(){ 
    ctx.beginPath(); 
    ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
    ctx.fillStyle="red"; 
    ctx.fill(); 
} 
function move(key){ 
    if(key.keyCode=="32"){ 
     updatePosition(); 
    } 
} 
function updatePosition(){ 
    Player1.x+=Player1.velX; 
     ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
} 
drawPlayer1(); 

window.addEventListener("keydown",move,false); 
</script> 
</body> 
</html>

출처

2017-09-17 Giorgi Macharashvili

어떤 디버깅을 수행 했습니까? 핸들러가 실행 중인지 확인해 봤습니까? 실행중인 경우 핸들러의 조건이 true인지 확인하십시오. 그렇다면 업데이트 기능이 작동하는지 확인하십시오. – Carcigenicate

또한 플레이어를 한 번만 뽑을 때마다 나타납니다. 값이 업데이트되고 있는지 확인해 봤지만 플레이어가 다시 그려지지 않았습니까? – Carcigenicate

당신은 키

var c = document.getElementById('myCanvas'); 
var ctx = c.getContext('2d'); 

// since the circle are always red, set ctx.fillStyle to red 
ctx.fillStyle = 'red'; 

var Player1={ 
    x: 150, 
    y: 70, 
    velX: 20, 
    velY: 5, 
    hp: 20, 
    startAngle: 40, 
}; 

function drawPlayer1(){ 

    ctx.beginPath(); 
    ctx.arc(Player1.x, Player1.y, Player1.startAngle, 0, 2 * Math.PI); 
    ctx.fill(); 
} 

function move(event){ 

    // the event.keyCode is Deprecated, use event.code or event.key 
    if(event.code === 'Space' || event.key === ' '){ 
     updatePosition(); 
    } 
} 

function updatePosition(){ 

    // update Player1's property 
    Player1.x += Player1.velX; 

    // erase the canvas 
    ctx.clearRect(0, 0, c.width, c.height); 

    // redraw Player1 
    drawPlayer1(); 
} 

// bind event 
window.addEventListener('keydown', move, false); 

// initialize 
drawPlayer1();

의 경우를 누를 때 캔버스를 다시 그리기 깜빡

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid black;"></canvas>

캔버스의 너비와 높이 (단위) "픽셀"을 추가 할 필요가 없습니다 KeyboardEvent에 대한 자세한 정보는 MDN KeyboardEvent

출처

2017-09-18 01:20:45

절대 래스터 화되지 않은 경로에 다른 호를 추가하면 플레이어를 다시 그리지 않습니다.

변경이 코드 블록 :

function updatePosition(){ 
    Player1.x+=Player1.velX; 
    drawPlayer1();   // call the render method instead 
}

면책 조항 :

function updatePosition(){ 
    Player1.x+=Player1.velX; 
    ctx.arc(Player1.x,Player1.y,Player1.startAngle,0,2*Math.PI); 
}

대신 drawPlayer1() 메서드를 호출하는 코드의 다른 부분에서 보이지 않았다.

출처

2017-09-17 23:37:02 K3N

자바 onkeydown 함수가 작동하지 않습니다.

답변

관련 문제