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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.