My student is trying to make an app that uses keydown inputs. The keydown event triggers on “screen1” when the user press “WASD” or “up”, “down”, “left” and “right”. However, whenever the user clicks a button that gets deleted, the onEvent doesn’t get triggered when the user keypresses. It forces the user to click again on the screen.
Project:
I looked at this quickly, but I’m not sure what you mean by a button getting deleted. I see the Battle button disappears after click, but is there a need to click it again?
If you can explain a little more, I can take another look at it.
Mike
My student wanted it designed to where as soon as the “battle” button was clicked, it would deleteElement the button and the user can use the WASD keys to move the sprite around. But for some reason, the app is not taking any inputs, until after you click on screen1 again.
Has it worked before adding the battle button? I don’t think the battle button is the issue. I can’t see how the velocity is supposed to increase. Starting at line 53, they have some conditional statements that allow the velocity to change, but part of that conditional requires the values of the keys array to be true and by declaration (line 12 of your code), they are false.
I don’t see where those conditionals are ever true, so the character won’t move.
I’m also recategorizing this as a CS Principles thread rather than CS Discoveries as this is beyond the CSD scope and curriculum.
Good luck and please check back if you try some updates and still aren’t successful. We can get some more eyeballs on it.
Mike
This problem you’re facing is something to do with how elements are “focused” on a website. When you delete the battleButton element using deleteElement(), it thinks that the user isn’t interacting with the screen anymore - making your events temporarily stop working. Normally you would be able to use the .focus() method in classic JS to refocus on the element, but Applab unfortunately doesn’t have this feature.
What I did to make it work was instead of deleting the element, you can move the x position of the element off screen to something like 1000 so the user doesn’t see it but it would still won’t be deleted. It’s not a great solution but it gets the job done!
This pretty much makes the element disappear and become unclickable which is precisely what my student is aiming to achieve. Although it had to be in a roundabout way, it does work just fine, thank you for your reply.
The code works just fine, the problem is the focusing of the element, just as letti42 explained.