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
body
:
script
and
p
. Nothing is rendered. The element
p
is empty and
code
does nothing.
Strictly speaking, HTML content of
body
is not always necessary. You can add all the HTML DOM elements in JavaScript; and you even try to do so. But then you need some working JavaScript code which actually does it. Your code just creates several function objects. None of those functions are called. So, the code does what is should do according to what you write: nothing.
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,
setTimeout
call, but the calling function is never called. But really correct approach is using
window.requestAnimationFrame
. The idea of the the cycle is: you pass a function to this function, and that function performs the game cycle and then calls
window.requestAnimationFrame
. 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
window.setTimeout
. 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.
—SA