Assim como detectamos a movimentação e o clique do mouse, podemos identificar eventos no teclado. O código abaixo exibe a mensagem “YOLO” sempre que a tecla W é pressionada.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
function moveCharacter() {
if (key === "w") {
console.log("YOLO");
}
}
function keyPressed() {
moveCharacter()
}
A variável key é fornecida pelo próprio p5.js, similar ao mouseX e mouseY. Além dela, também é possível usar a variável keyCode, a qual possui o valor do código da tecla pressionada. Para verificar qual a tecla, usamos a variável key, enquanto para o código usamos a keyCode. Podemos adicionar uma mensagem a nossa função moveCharater para exibir a tecla pressionada seguida do seu código.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
function moveCharacter() {
if (key === "w") {
console.log("YOLO");
} else {
console.log(key + " " + keyCode)
}
}
function keyPressed() {
moveCharacter()
}
A função keyPressed funciona similar ao mouseClicked, e executa apenas uma vez ao pressionar e soltar uma tecla. Para usar teclas que não são ASCII (não são letras ou números, basicamente) veja os códigos fornecidos pelo p5.js clicando aqui.
Agora, vamos adicionar nosso personagem, um belo quadrilátero regular com todos os lados de mesmo tamanho. Isso mesmo, um belo quadrado. Adicione também uma linha, simulando o chão do seu jogo. Seu canvas deve ficar da seguinte forma:
Agora, ao invés de usar os valores diretamente no quadrado, criaremos variáveis isoladas para os valores das coordenadas dele. Em seguida, substitua as coordenadas usadas no retângulo, por suas respectivas variáveis.
var charX = 20;
var charY = 270;
// Resto do seu código
Com isso, podemos fazer nosso personagem se movimentar! Altere a função moveCharacter para que o personagem se mova ara direita ao pressionar a tecla D. Você pode remove o else com a exibição do código da tecla se desejar. Seu canvas deve estar parecido com a animação abaixo:
Note que o keyPressed não funcionará, pois ele só executa após soltar a tecla. Veja como funciona a função keyIsDown clicando aqui e ajuste seu código para ter o comportamento desejado.
Quando conseguir esse comportamento, segure a tecla de movimento por 5 segundos. Note que o personagem sai da tela. Corrija esse comportamento ao limitar o valor da variável charX de forma que o lado direito do personagem fica encostando no final do canvas.
Faça o mesmo para o lado esquerdo, tanto o movimento quanto a limitação na tela. Seu canvas (sketch, projeto, etc.) deve estar funcionando parecido com o logo abaixo:
ANTES DE ADICIONAR IMAGENS!!!! Organizaremos melhor nosso código para não ficarmos confusos com novas adições.
A movimentação do personagem, suas variáveis, e o desenho dele estão todos espalhados. Vamos juntar tudo num mesmo arquivo, separado do draw e do setup. Assim, sempre que precisarmos alterar algo do personagem, saberemos exatamente onde procurar.