Sign in to follow this  
Steph

How to make a local function within Game.js into a global function so that it can be read by an external Index.html file?

Recommended Posts

Hello everyone. I have built a game using Phaser. On game over, the players high score is recorded in a variable (this.inputScore). To submit their high score to the server, the player clicks a button that takes them to an Index.html page where there is a form they fill in. To avoid cheating, I want the high score variable to be passed from the game's JavaScript file (Game.js) to an input value on the form as a read only value. I have created a function (assignValue) inside the Game.js file to execute this task, but because of it's scope I cannot get the function to be read by the Index.html file. When I place the function at the top of the Game.js script (globally) the Index.html reads the function and executes it accordingly (but with a hard-coded value for testing purposes.) How can I get the Index.html file to read my assignValue() function and pass this.inputScore to the input value in Index.html? Any help would be greatly appreciated - still learning. Thanks.

Game.js file:

  //INDEX.HTML READS THE assignValue function BELOW (WITH A HARD CODED VALUE FOR TESTING) AND 
  //APPLIES IT BECAUSE IT IS IN GLOBAL SCOPE. BUT I NEED THE VALUE TO BE A VARIABLE TAKEN FROM THE 
  //assignValue FUNCTION INSIDE THE GAME CODE. SEE GAME CODE BELOW:

  function assignValue() {

    document.getElementById("inputScore").value = 127;

};



//GAME CODE

var CrystalRunner = CrystalRunner || {};

CrystalRunner.GameState = {

init: function() {
  //...code here
  }, 


create: function() {
 //...code here
  },  


 update: function() {  
//..code here
//check if the player needs to die
      if(this.player.top >= this.game.world.height && this.counter === 0 || this.player.left <= 0 && this.counter === 0) {
         this.gameOver();
      }
  },  


 gameOver: function(){
    this.game.time.events.stop();
    this.player.body.enable = false;
    //..code here

    this.updateHighscore();

    //..code here

   },


  updateHighscore: function(){
    this.highScore = +localStorage.getItem('highScore');


    if(this.highScore < this.myScore){
            this.highScore = this.myScore;
            this.inputScore = this.highScore;


            this.congrats = this.game.add.sprite(this.game.world.centerX-193, this.game.world.centerY-20, 'congrats');
            this.congrats.inputEnabled = true;
            this.congrats.fixedToCamera = true;

            this.submitScoreButton = this.game.add.sprite(this.game.world.centerX-135, this.game.world.centerY+100, 'submitScoreButton');
            this.submitScoreButton.inputEnabled = true;
            this.submitScoreButton.fixedToCamera = true;

            this.submitScoreButton.events.onInputUp.add(function() {

                    window.location.href = "index1.php";

              }, this);

      }


      localStorage.setItem('highScore', this.highScore);
  },

//THE FUNCTION BELOW IS NOT BEING READ BECAUSE OF SCOPE. HOW TO I MAKE INDEX.HTML READ IT?
  assignValue: function() {

                document.getElementById("inputScore").value = this.inputScore;

  },


};

 

Index.html file:

<?php
require_once 'dbconnect.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Crystal Candy Game Login</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link href="css/style.css" rel="stylesheet">

<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>

<script>
        $(window).on('load', function() { 
        $('#status').fadeOut();      
        $('#preloader').delay(350).fadeOut('slow'); 
        $('body').delay(350).css({'overflow':'visible'});
        })
</script>

</head>

<body onload="assignValue()" class="bg">


<div id="preloader">
    <div id="status">&nbsp;</div>
</div>


<div class="wrapper">


    <div class="texte">
        <header>
        <h1>SUBMIT YOUR SCORE</h1>
        <img id="logo" src="assets/images/logo.png">
        </header>

        <p>Submit your highscore and you could stand a chance to win a 
        prize!</p>
    </div>


    <div id="main">


      <form id="form-style" method="post" action="crystalhandle.php" 
        autocomplete="off">

        <div class="form-group"> 
          <label class="header-text"><span>First Name</span></label>
          <input class="form-control" type="text" id="name" name="username" 
            placeholder="Name" title="Please enter your Firstname" 
          required="">
        </div>

        <div class="form-group"> 
         <label class="header-text"><span>Surname</span></label>
         <input class="form-control" type="text" id="name" name="surname" 
         placeholder="Surname" title="Please enter your Lastname" 
         required="">
        </div>  

        <div class="form-group">    
         <label class="header-text"><span>Email</span></label>
         <input class="form-control" type="email" id="email" name="email" 
         placeholder="Mail@example.com" title="Please enter a Valid Email 
         Address" required="">
        </div>

        <div class="form-group"> 
         <label class="header-text"><span>Phone</span></label>
         <input class="form-control" type="tel" id="name" name="phone" 
         placeholder="Phone" title="Please enter your Phone No" required="">
        </div>

        <div class="form-group"> 
        <label class="header-text"><span>Score</span></label>
        <input class="form-control" type="tel" id="inputScore" name="score" 
        value="" readonly>
        </div>
        <!-- I need the above input value to have the variable from 
        assignValue inserted into it-->

        <div class="w3ls-btn form-group">   
        <div class="wthreesubmitaits">
        <input type="submit" name="signup" id="reg" class="button" 
        id="next1" value="Send" style="font-family: sans-serif; font-size: 
        17px; font-weight: bold;"
        </div>  
        </div> 


    </form>
  </div>
 </div>

 <script type="text/javascript" src="js/phaser.min.js"></script>

  <!--the below js file is where assignValue() is defined:-->
 <script type="text/javascript" src="js/states/Game.js"/></script>

</body>


</html>

 

Share this post


Link to post
Share on other sites

If you can't read the variable from your HTML in another javascript (I'm sure you can but I haven't tried):

You could write the score as a local file in localStorage using the set method (http://www.thebotanistgame.com/blog/2015/08/12/saving-loading-game-state-phaserjs.html)  

Then you could read it from your html using a short script to get the localstorage info by name.  https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem  

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.