By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
454,245 Members | 1,242 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 454,245 IT Pros & Developers. It's quick & easy.

Linking from 1 page to another via a Start Button

P: 5
Hi everyone.. I've created a game using JS/CSS/HTML5 just something simple, however, I have used a start button.. with the following code ... $('#StartBtn').click(LaunchGame); -- which when pressed launches the game from the home screen.. however when the player loses on the game, the game panel disappears and the words "busted, Try Again" appear, which is fine, however, I'm trying to get the Start Button to appear after 2/3secs linking back through to the home page to restart the game.. However, I just can't figure out how to do it.

Below is the code that appears when the game ends..

function EndGame(HasTiledOut) {



var GameOutcomeText = (HasTiledOut) ? 'Busted!!' : 'Try Again!';



Look forward to any help given.. Many thanks in advance!!

Nov 5 '14 #1
Share this Question
Share on Google+
6 Replies

P: 320
Native Javascript has a settimeout function. Here's an example that will set your button to visible after 3000 milliseconds. You could call it at the end of your EndGame function. Or set the visibility to the game panel itself.

Expand|Select|Wrap|Line Numbers
  1. setTimeout(function() {
  2.       $('#myStartButtonID').css('visibility', 'visible');
  3. }, 3000);
Nov 5 '14 #2

P: 5
Hi, have sent you a message privately with a JSFiddle link..
Nov 5 '14 #3

P: 320
when I say $('#myStartButtonID') I don't mean that literally. replace the text "myStartButtonID" with the ID of your actual button. Also keep in mind if the game panel object that that button is inside of is hidden then it will not work. Instead you will need to set the panel to visible
Nov 5 '14 #4

P: 5
I only want the button to appear, not the game panel, I can make that appear no problem, I just need the Start button to appear on its own.

I presume this is right?

Expand|Select|Wrap|Line Numbers
  1. function EndGame(HasTiledOut) {
  4. $('#EntireScreen').html('');
  6. var GameOutcomeText = (HasTiledOut) ? 'Busted!!' : 'Try Again!';
  8. $('#GameOutcome').text(GameOutcomeText).fadeIn();
  10. setTimeout(function() {
  11. $('#StartBtn').css('visibility', 'visible');
  12. }, 3000);
  14. }
Nov 5 '14 #5

P: 5
If i enter

Expand|Select|Wrap|Line Numbers
  1. ShowHomeScreen();
within that code, the main home panel, with start button etc appears, but its causes a few issues when playing the game.. I'm just wanting the Start Button to appear on its own linking through to the game panel.
Nov 5 '14 #6

P: 5
OK.. If if i enter:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(function() {
  2. $('#StartBtn').css('visibility', 'visible');
  3. }, 3000);
, as well as removing
Expand|Select|Wrap|Line Numbers
  1. <div id="StartBtn">Start Game</div>
from the
Expand|Select|Wrap|Line Numbers
  1. <div id="HomePanel" class="GamePanel">
section and have it on its own, the code works.. however.. the Start Button appears on the bottom of the game panel and when the game finishes under the wording "Busted, Try Again" which is right, but then the game starts acting strange, it almost starts looping...
Nov 5 '14 #7

Post your reply

Sign in to post your reply or Sign up for a free account.