Answer 1

As Kirk said, you had a problem with local and global scopes with you variables. To make them all global I declared all in the 2nd line of your code. They get initialized (get values assigned) in your init function. Then you need to make your move function global as well, therefore it has to be outside of the init function.

Hope this helps, here the code 😇

https://code.sololearn.com/WtRKTbXhj949/?ref=app

Answer 2

Your move() function is inside your init() function, so it can't be found in the global scope.

Note, indentation normally should make this a little easier to find, but I just used SoloLearn's brace highlighting to see where the other end was, when putting my cursor at the "{"

Answer 3

As specified by @Kirk, the move() function actually is unreachable from the "onclick" attribute of the <button>...
You need to define it in the global scope or to dynamically set the "onclick" attribute from within the actual scope where the move() function is declared, but also, as the function use the variable "ctx" which is initialized in init() function (require document was loaded to be initialized), you must keep its definition in a shared scope from both functions ^^

Simplest way to fix your code, would be to just change a little your move() function definition, without moving it outside the main scope (function assigned to the onload event), but defining it as property of the "window" object (which is the global scope):

window.move = function move(){ // second name is no more necessary
/* ... */
}