I just a piece here and there, cannot seem to put it together. i really want to know what is going on with the second event test on the link above. Having searched some examples online I managed to do this but could go no further:
window.addEventListener(“keydown”, onKeyDown, false);
window.addEventListener(“keyup”, onKeyUp, false);
function onKeyDown(event) {
var keyCode = event.keyCode;
switch(keyCode) {
case 1:
keyD = true;
break;
case 2:
keyS = true;
break;
case 3:
keyA = true;
case 4:
keyW = true;
break;
}
}
function onKeyUp(event) {
var keyCode = event.keyCode;
switch(keyCode) {
case 1:
keyD = false;
break;
case 2:
keyS = false;
break;
case 3:
keyA = false;
break;
case 4:
keyW = false;
break;
}
}
var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;
if (keyD == true) {
x += 1;
}
if (keyS == true) {
y += 1;
}
if (keyA == true) {
x–;
}
if (keyW == true) {
y–;
}
}
Still waiting guys, I tried this again.
let canvas = document.querySelector(‘canvas’);
let ctx = canvas.getContext(‘2d’);
function drawCircle(x, y, size) {
ctx.fillStyle = ‘white’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = ‘black’;
ctx.arc(x, y, size, 0, 2 * Math.PI);
ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x, y, size);
// Add your code here
window.addEventListener (“onkeypress”, onKeyPress, false);
function onKeyPress(event) {
var keyCode = event.keyCode
switch (keyCode) {
case 1:
keyD = true;
break;
case 2:
keyS = true;
break;
case 3:
keyA = true;
case 4:
keyW = true;
break;
}
var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;
if (keyD == true) {
x += 1;
}
if (keyS == true) {
y += 1;
}
if (keyA == true) {
x–;
}
if (keyW == true) {
y–;
}
}
window.onkeypress = onKeyPress;
I don’t think I know what am doing but I understand the concept in bits, can’t put them together.
Hi @Anthony_Izekor! You are definitely going in the right direction here, but the switch statement needs some work. Have a look at our solution, and then try implementing it again: https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/tasks/events/marking.md#task-2