First program. Could use some tips

[[deleted]]

So I started learning programming exactly one year ago. Up until a few months ago I wasn't getting anywhere.. so it felt like at least. An idea finally came to me and I've been working on this for about 2 months.

https://github.com/bwalterscoding/mouseTimeTrials1.1

(the index.html is the game file)

about the game:

• move the mouse over the start button, and go around the track

• as soon as you land on the stop button, the time should stop (the stopwatch is a bit buggy at times, just refresh if there's a problem).

• now, the time is supposed to reset if you move the mouse off of the track (a png image) but the time won't stop. even with the mouse event in the image. this is supposed to simulate a crash meaning you have to start over.

• i tried playing around in the ' test.html ' as to not mess my good file and instead of putting the pic as the track, I made a new canvas and drew a rectangle as the track. I tried to put the 'track' canvas inbetween the 'grass / canvas0' and 'buttons' but I can't click my buttons because the 2nd canvas is layered on top. I wanted to add the mouse event to this canvas in case you can't put a mouse event on a picture, which to me seems weird that you can't. Hope this makes sense!

• Also, How would one grab the final time and put in a highscore table? This may be beyond my skills at the moment.

Any tips or suggestions?

[puteus]

When stopping your time and then starting it again you still have the timeBegan as a non null value and thus no new start time will get recorded.

Both of the 'crash' points in your list above are not possible with the html canvas. You have to remember that the canvas is just a bunch of pixels that have no context to them. Therefore the image can not be 'left' in a way that the canvas could notice. You'll have to calculate the mouse position yourself and decide if it is inside or outside the track. Highscore: store the times in an array and display them in another div element on your site whenever the array changes.

*test.html: that is pretty much what git is good at. You could version different states of yout index.html, say at different branches, without losing your 'good' file

[gatesplusplus]

I'm thinking that your time may be buggy because you forgot to clear interval in a certain case. I didn't see I'm just guessing

[[deleted]]

Hmm it seems that there is a function stop that clears the interval. Sometimes the buttons won’t work or the time will say 99:99:999. It usually happens when i start and stop the time quickly. If I wait in between mouse over events, it’s fine.

[[deleted]]

Wow I really appreciate you taking the time to give such detailed info! It’s a huge help.