Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Gerald Torres
Gerald Torres
13,442 Points

How to set a delay after each shot in HTML 5 JS Canvas football penalty game

Hi,

I am trying to make a simple football penalty game using HTML5/JS Canvas. The aim is to make a game where you control the goal keeper and you have three attempts to save the ball.

I have most of the functionality done, I have a score system and collision detection.

My problem is that after the ball is shot, the feedback text only appears for a split second and it resets my canvas ready for the next penalty shot attempt.

Any advice? I tried using setTimeout() to delay it but it still doesn't work.

Here is a codepen of my work so far:

http://codepen.io/geraldjtorres/pen/MejOaW

Look very closely but the feedback text appears for like a split second then it quickly resets itself to the next penalty shot attempt.

1 Answer

Steven Parker
Steven Parker
243,227 Points
Steven Parker
Steven Parker
243,227 Points

You could add a loop that waits for a particular time to occur, but that's rather processor-intensive.

How about showing a "strike a key to continue" message and wait for the keypress?