Привет!Как я могу решить мой код, который, по-видимому, неправильно берет свойство .key из KeyboardEvent из браузера? - PullRequest
Новая
       26

Привет!Как я могу решить мой код, который, по-видимому, неправильно берет свойство .key из KeyboardEvent из браузера?

0 голосов
/ 20 декабря 2018

KeyboardEvent имеет свое «предопределенное» значение = .key в зависимости от того, какую клавишу вы нажимаете на клавиатуре, но даже когда моя консоль говорит, что я нажал определенную клавишу, я не могу «определить» значение клавиши ....

iпробовал поиск в Google и определение значения ключа сам по себе, но в этот момент ничего не получалось. Немного невежественно 

  let canvas= document.querySelector('canvas');
    canvas.width=800;canvas.height=600;const ctx=canvas.getContext('2d');
//bg
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
//player
ctx.fillStyle='white';
let player_x=30;
let player_y=60;
ctx.fillRect(player_x,player_y,40,400);
//controls
function Input(event){ 
    let ifPressed=event.key;
    console.log(ifPressed);
          if(ifPressed==="w"){
             player_y-=5;
    } else if(ifPressed==="s"){
          player_y+=5;
   }

  }

document.addEventListener('keydown',Input);
Input();

Я пробовал это так, но консоль всегда говорит, что ".key" не определен, хотя долженполучить ключевое свойство из KeyboardEvent в браузере

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Вам нужно перерисовывать игрока с каждым нажатием клавиши.Я поместил весь рисунок в функцию draw()

let canvas = document.querySelector("canvas");
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext("2d");
let player_x = 30;
let player_y = 60;
draw();
function Input(event) {
  let ifPressed = event.key;
  console.log(ifPressed);
  if (ifPressed === "w") {
    player_y -= 5;
    draw();
  } else if (ifPressed === "s") {
    player_y += 5;
    draw();
  }
  
}

document.addEventListener("keydown", Input);

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.fillRect(player_x, player_y, 40, 400);
}
<canvas></canvas>
0 голосов
/ 20 декабря 2018

Удалите Input(); в последней строке и создайте элемент <canvas></canvas> в своем теле html.Я добавляю эти два исправления в ваш код, и это работает (запустите сниппет, прокрутите вниз, нажмите на холст и начните ввод): 

let canvas= document.querySelector('canvas');
    canvas.width=800;canvas.height=600;const ctx=canvas.getContext('2d');
//bg
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
//player
ctx.fillStyle='white';
let player_x=30;
let player_y=60;
ctx.fillRect(player_x,player_y,40,400);
//controls
function Input(event){ 
    let ifPressed=event.key;
    console.log(ifPressed);
          if(ifPressed==="w"){
             player_y-=5;
    } else if(ifPressed==="s"){
          player_y+=5;
   }

  }


document.addEventListener('keydown',Input);
<canvas></canvas>
...