Hi @Laura! First of all, let me just say that you were so close on this — this is a pretty hard assessment challenge, and you were definitely on the right track. There were just a few small things keeping this from working. I’ll note what they are, and then give you a modified version of your code that works, below those all. Maybe read my bulleted list, try again, and then turn to my sample code if you are still stuck?
So, on to the points:
switch (keyBoardKey) should nearly always be switch (true) for it to work. I am not really sure how to explain why right now. This is a really fiddly, awkward facet of how switch statements work. You’d probably be better off doing similar things with an if/if...else structure instead, in future.
Each case is supposed to be a test. What you want to do is say that “if the pressed key is equal to <whatever>, then do the associated action”. So for example case 'W': should actually be case keyBoardKey === 'W':.
JS is case-sensitive, and by default when you press your keyboard keys they produce lower-case characters. So the keys you are testing for should be lower case, not upper case.
You don’t need to redefine size as equal to 30 in each case. This is already done in the provided code.
Since you want to move the circle up, down, left, or right, depending on which key is pressed, you don’t want to set specific values of x and y in each case. Instead you want to add to or substract from the existing values of x or y, depending on which direction you want to move the circle in. For example, to move the circle to the right, you could do x += 5.
You probably don’t want to attach the event listener to the canvas object, as then the keyboard controls won’t work unless you are specific focussed on the canvas. It would be better to attach it to the global document object, so the keyboard controls will work regardless.
Finally, my sample code:
function pressKey(event){
let keyBoardKey = event.key;
switch (true){
case keyBoardKey === 'w':
y -= 5;
drawCircle(x, y, size);
break;
case keyBoardKey === 'a':
x-=5;
drawCircle(x, y, size);
break;
case keyBoardKey === 's':
y+=5;
drawCircle(x, y, size);
break;
case keyBoardKey === 'd':
x+=5;
drawCircle(x, y, size);
break;
default:
return;
}
};
document.onkeydown = pressKey
@chrisdavidmills, first of all thank you so much for these detailed explanations. They are really helpful.
I have some questions here:
For first and second bullets, I understand your point, at same time I am confused by the screenshots as below from the tutorial. On the second screenshot, switch doesn’t use boolean value to do the comparison, but seems it works. Not sure why it works in this case.
@Laura Ah, I see what you were trying to do here now. I was getting confused myself here.
So the switch(true) thing is kind of a hack. You have to include a value to test in the parens, but true will always be true, so then you just put the complete test statements in the case lines.
Using it “properly” tends to work in simple cases like the one in your screenshots, but in more complex cases involving switch statement I usually end up reverting to the hack.
But this raises the question — will it work in this case? Looking back at the official answer I wrote for this, way back when, the answer is yes
So if you use switch (keyBoardKey), and put the case lines back to how they were, but with lower case letters, It should work.