Oh… the problems of this code are so bad that I don't know what to talk about. First problem is HTML. There are only two elements, children of
. Nothing is rendered. The element
is empty and
Strictly speaking, HTML content of
So I answered your question in full; you did not ask to write working code for your, and this is fair. Not only this would not be the goal of Quick
Questions & Answers forum, but it would not be even possible, because you did not even explain what the game should do. This is also fair, because you only wanted to know why some movement does not happen. I answered.
But I would like to be not so formal and give you some non-formal advise: what should be the basis of any game? This should be the main event cycle. You already made one step,
call, but the calling function is never called. But really correct approach is using
. The idea of the the cycle is: you pass a function to this function, and that function performs the game cycle and then calls
. Please see:
window.requestAnimationFrame() — Web APIs
Moreover, this function, if it is not implemented in some relict browsers, can be added as a fallback, and implemented as the call to
. I'm not quite sure that is should always be done in practice, just to support something very obsolete. You can look at a sample of a fully functional game shown in my article (derived work) Tetris on Canvas
So, what can you do? Well, sit down and actually write the code of the game. :-)
The problems "why some function is not called" or "does not work" are solved using the debugger.