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?

Steph · December 12, 2018

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="[email protected]" 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>

casey · December 14, 2018

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

Sign In

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

Steph

Link to comment

Share on other sites

casey

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity