How can I use my game object and its functions/variables in another Javascript File
<p>I am trying to change the _this.velocity value in the second javascript file depending on the value  of game.timesGuessed in the first javascript file.</p>

<p>Do I have to make the game object global or is there a way I can pass the object or specific variable into the other file's functions?</p>

<p>Thank you in advance!</p>

<p>My app.js file with the game object.</p>

<pre><code>    (function(){

  // Players
  // Goals
  // Obstacles
    // Timer
    // Number of
  // Scoring System
    // Points
  // UI for game
  // Game flow scroing -&gt; points -&gt; etc
  // Hot or cold depending on closness to computerNumbers
  // Sound!

  game = {
    init: function() {
      console.log('init');

      // Set Constants
      this.timesGuessed = 0;
      this.guessLimit = 6;
      this.userAnswers = [];
      this.computerNumbers = [];
      this.userScore = 0;

      // Set Point System
      this.firstPlace = 100;
      this.secondPlace = 75;
      this.thirdPlace = 50;
      this.fourthPlace = 25;
      this.fifthPlace = 10;
      this.sixthPlace = 5;
      this.lastPlace = 0;

      // Calls
      this.cacheDom();
      this.setName();
      this.screenTransition();
      this.bindEvents();
    },

    cacheDom: function() {

      // Background
      this.gameBackground = $('.large-header');

      //Inputs
      this.enterNameInput = $('#name');

      // Number Placeholder
      this.chosenNumber = $('.number-chosen');
      this.totalPoints = $('.total-points');

      // Screens
      this.gameScreen = $('.game');
      this.winScreen = $('.win-screen');
      this.loseScreen = $('.lose-screen');
      this.enterName = $('.enter-name');
      this.leaderboardScreen = $('.leaderboard-screen');

      // Number Pad
      this.numbers = $('.numbers-to-guess');

      // Points Awarded
      this.pointsAwarded = $('.points-awarded');

      // Buttons
      this.playAgainBtn = $('.play-again');
      this.newPlayerBtn = $('.new-player');
      this.leaderboardBtn = $('.leaderboards');
      this.goBackBtn = $('.go-back');

      console.log(this.pointsAwarded);
      // console.log(this.numbers);
    },

    setName: function() {

      // get name from input
      this.userName = $('#name').val();

      // Set name to the UI
      this.setNameOnGame(this.userName);

      // Set object for to send to API
      var user = {
        name: this.userName,
        score: 0,
      };

      // Send Object to API
      $.ajax({
        type: 'POST',
        url: 'http://rest.learncode.academy/api/guessinggame/scores',
        data: user,
        success: function(data) {
          console.log("User added!", data); //the new item is returned with an ID
          game.userId = data.id;
          return game.userId;
        }
      });

    },

    bindEvents: function() {
      // console.log(this.numbers.find('li'));

      this.numbers.find('li').on('click', this.setVariables);
      this.playAgainBtn.on('click', this.restartGame);
      this.newPlayerBtn.on('click', this.newPlayer);
      this.leaderboardBtn.on('click', this.showLeaderboardScores);
      this.goBackBtn.on('click', this.restartGame);
    },

    screenTransition: function() {

      this.enterName.addClass('hidden');
      this.gameScreen.removeClass('hidden');

    },

    setVariables: function() {
      // console.log('set');
      // console.log($(this));

      console.log($(this).val());

      // Sets the user answer
      game.userAnswer = $(this).val();

      // adds answer to answers array
      game.userAnswers.push(game.userAnswer);

      // Generates a random number between 1 and 10
      game.randNumber = Math.floor(Math.random() * 10 ) + 1;
      game.computerNumbers.push(game.randNumber);

      // Checks the users number vs the random number
      game.checkAnswer(game.userAnswer, game.randNumber);

      // Animate Guessed Number Behind
      game.animateChosenNumber(game.userAnswer);
    },

    setNameOnGame: function(userName) {
      // document.getElementById('user-name').innerHTML = 'Player Name: ' + userName;
      // document.getElementById('user').innerHTML = userName + ' Answers';
      document.getElementById('display-name').innerHTML = 'Hi ' + userName + '!';
      document.getElementById('number-guess-name').innerHTML =  userName;
    },

    checkAnswer: function(userAnswer, randNumber) {

      this.getDifference(userAnswer, randNumber);

      // this.changeBackgroundColor(userAnswer, randNumber);

      this.timesGuessed++;
      this.render(userAnswer, randNumber, this.timesGuessed);

      if (userAnswer &gt; randNumber &amp;&amp; this.timesGuessed &lt;= this.guessLimit) {
        // alert('You Guessed To High, Guess Again...');
        document.getElementById('message').innerHTML = "You guessed to high";
        // this.setVariables();

      } else if (userAnswer &lt; randNumber &amp;&amp; this.timesGuessed &lt;= this.guessLimit) {
        // alert('You Guessed To Low, Guess Again...')
        document.getElementById('message').innerHTML = "You guessed too low";
        // this.setVariables();

      } else if(userAnswer == randNumber &amp;&amp; this.timesGuessed &lt;= this.guessLimit) {
        document.getElementById('message').innerHTML = "You Guessed Right!";
        this.showWinScreen(this.timesGuessed);

      } else if (this.timesGuessed &gt; this.guessLimit) {
        this.showLoseScreen(this.timesGuessed);
      }

      // this.score(this.timesGuessed);
      //this.showAnswers();
      // this.restartGame();

    },

    animateChosenNumber: function(userAnswer) {
      console.log('animate');
      this.chosenNumber.html(userAnswer);
      this.chosenNumber.addClass('animate');
      setTimeout(function(){
        console.log('dis');
        game.chosenNumber.removeClass('animate');
      }, 800);
    },

    getDifference: function(userAnswer, randNumber) {
      this.difference = Math.abs(userAnswer - randNumber);
      console.log(this.difference);
      this.changeBackgroundColor(this.difference);
    },

    changeBackgroundColor: function(difference) {
      console.log('change');
      if( difference &lt;= 3 ) {

        this.gameBackground.removeClass('normal');
        this.gameBackground.removeClass('you-won');
        this.gameBackground.removeClass('luke-warm');
        this.gameBackground.removeClass('you-lost');
        this.gameBackground.removeClass('ice-cold');

        this.gameBackground.addClass('red-hot');

        // Circle.velocity = Math.random()*20;

      } else if( difference &gt;= 4 &amp;&amp; difference &lt;= 6) {

        this.gameBackground.removeClass('normal');
        this.gameBackground.removeClass('you-won');
        this.gameBackground.removeClass('you-lost');
        this.gameBackground.removeClass('red-hot');
        this.gameBackground.removeClass('ice-cold');

        this.gameBackground.addClass('luke-warm');
        // Circle.velocity = Math.random()*6;

      } else if( difference &gt;= 7) {

        this.gameBackground.removeClass('normal');
        this.gameBackground.removeClass('you-won');
        this.gameBackground.removeClass('you-lost');
        this.gameBackground.removeClass('red-hot');
        this.gameBackground.removeClass('luke-warm');

        this.gameBackground.addClass('ice-cold');

        // Circle.velocity = Math.random()*1;

      }
    },

    render: function(userAnswer, randNumber, timesGuessed) {
      document.getElementById('guessed').innerHTML = timesGuessed;
      document.getElementById('user-answer').innerHTML = userAnswer;
      document.getElementById('computer-number').innerHTML = randNumber;

    },

    showAnswers: function() {
    // Show all answers
      for (var f = 0; f &lt; this.computerNumbers.length; f++) {
        this.listItem = document.createElement('TD');
        this.listItemText = document.createTextNode(this.computerNumbers[f]);
        this.listItem.appendChild(listItemText);
        document.getElementById('computer-answers').appendChild(listItem);
      }

     // Show all guesses
      for (var i = 0; i &lt; this.userAnswers.length; i++) {
        this.listItem = document.createElement('TD');
        this.listItemText = document.createTextNode(this.userAnswers[i]);
        this.listItem.appendChild(this.listItemText);
        document.getElementById('user-answers').appendChild(this.listItem);
      }
    },

    showWinScreen: function(timesGuessed) {
      this.calculatePoints(timesGuessed);
      this.gameScreen.addClass('hidden');
      this.winScreen.removeClass('hidden');

      this.gameBackground.removeClass('luke-warm');
      this.gameBackground.removeClass('ice-cold');
      this.gameBackground.removeClass('red-hot');
      this.gameBackground.addClass('you-won');

      this.totalPoints.html('Total Points &lt;br/&gt;' + game.userScore);
    },

    showLoseScreen: function(timesGuessed) {
      this.calculatePoints(timesGuessed);
      this.gameScreen.addClass('hidden');
      this.loseScreen.removeClass('hidden');

      this.gameBackground.removeClass('luke-warm');
      this.gameBackground.removeClass('ice-cold');
      this.gameBackground.removeClass('red-hot');
      this.gameBackground.addClass('you-lost');

      this.totalPoints.html('Total Points &lt;br/&gt;' + game.userScore);

    },

    calculatePoints: function(timesGuessed) {
      console.log('calculate', timesGuessed);
      if(timesGuessed == 1) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.firstPlace + 'pts');
        this.userScore = this.userScore + this.firstPlace;
      } else if (timesGuessed == 2) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.secondPlace + 'pts');
        this.userScore = this.userScore + this.secondPlace;
      } else if (timesGuessed == 3) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.thirdPlace + 'pts');
        this.userScore = this.userScore + this.thirdPlace;
      } else if (timesGuessed == 4) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.fourthPlace + 'pts');
        this.userScore = this.userScore + this.fourthPlace;
      } else if (timesGuessed == 5) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.fifthPlace + 'pts');
        this.userScore = this.userScore + this.fifthPlace;
      } else if (timesGuessed == 6) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.sixthPlace + 'pts');
        this.userScore = this.userScore + this.sixthPlace;
      } else if (timesGuessed &gt; 6) {
        this.pointsAwarded.html('You have earned&lt;br/&gt; + ' + this.lastPlace + 'pts');
        this.userScore = this.userScore + this.lastPlace;
      }
      console.log('User Score: ', this.userScore);
      this.updateData(this.userScore, this.userName, game.userId);
    },

    updateData: function(userScore, userName, userId) {
      console.log('ID', userId);
      console.log('Name', userName);
      var user = {
        name: userName,
        score: userScore,
      };

      $.ajax({
        type: 'PUT',
        url: 'http://rest.learncode.academy/api/guessinggame/scores/' + userId,
        data: user,
        success: function(data) {
          console.log("Score updated!", data); //the new item is returned with an ID
        }
      });

    },

    newPlayer: function() {

      // Reset screens
      game.enterName.removeClass('hidden');
      game.loseScreen.addClass('hidden');
      game.winScreen.addClass('hidden');
      game.leaderboardScreen.addClass('hidden');

      game.enterNameInput.val('');

      // Reset Times Guessed
      game.timesGuessed = 0;

      console.log('new player!');

      // Empty leaderboards list
      $('.score-list').empty();

      // Reset amount of times guessed on game to 0
      document.getElementById('guessed').innerHTML = '';

    },

    showLeaderboardScores: function() {

      // Set Screen
      game.winScreen.addClass('hidden');
      game.loseScreen.addClass('hidden');
      game.leaderboardScreen.removeClass('hidden');

      $.ajax({
        type: 'GET',
        url: 'http://rest.learncode.academy/api/guessinggame/scores',
        success: function(data) {
          // console.log("Scores!", data); //the new item is returned with an ID

          // Sort Array to for highest score first
          data.sort(function(a, b) {
            return b.score - a.score;
          });
          console.log('Scores', data);

          // Display the top 5 scores
          var counter = 1;
          $.each(data, function(i, score) {
            $('.score-list').append('&lt;li&gt; Name: ' + score.name + '&lt;br/&gt;' + 'Score: ' + score.score);
            if(counter == 5 ) {
              return false;
            } else {
              counter++;
            }
          });
        }
      });

    },

    restartGame: function() {

      // Reset screens
      game.gameScreen.removeClass('hidden');
      game.loseScreen.addClass('hidden');
      game.winScreen.addClass('hidden');
      game.leaderboardScreen.addClass('hidden');

      // Reset LeaderBoards
      $('.score-list').empty();

      // Reset Times Guessed to 0
      game.timesGuessed = 0;

      document.getElementById('guessed').innerHTML = '';

    }
  };

})();
</code></pre>

<p>My File that runs an animation backgound</p>

<pre><code>    (function() {

    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

    // Main
    initHeader();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: 0, y: height};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create particles
        circles = [];
        for(var x = 0; x &lt; width*0.5; x++) {
            var c = new Circle();
            circles.push(c);
        }
        animate();
    }

    // Event handling
    function addListeners() {
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function scrollCheck() {
        if(document.body.scrollTop &gt; height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in circles) {
                circles[i].draw();
            }
        }
        requestAnimationFrame(animate);
    }

    // Canvas manipulation
    function Circle() {
        var _this = this;

        // constructor
        (function() {
            _this.pos = {};
            init();
            // console.log(_this);
        })();

        function init() {
            _this.pos.x = Math.random()*width;
            _this.pos.y = height+Math.random()*100;
            _this.alpha = 0.1+Math.random()*0.1;
            _this.scale = 0.1+Math.random()*2;
            _this.velocity = Math.random()*6;
        }

        this.draw = function() {
            if(_this.alpha &lt;= 0) {
                init();
            }
            _this.pos.y -= _this.velocity;
            _this.alpha -= 0.0005;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
            ctx.fill();
        };
    }

})();
</code></pre>

<p>My index.html</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en" class="no-js"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;title&gt;Animated Background Headers | Demo 2&lt;/title&gt;
        &lt;meta name="description" content="Examples for creative website header animations using Canvas and JavaScript" /&gt;
        &lt;meta name="keywords" content="header, canvas, animated, creative, inspiration, javascript" /&gt;
        &lt;meta name="author" content="Codrops" /&gt;
        &lt;link rel="shortcut icon" href="../favicon.ico"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/normalize.css" /&gt;
                &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/demo.css" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/component.css" /&gt;
                &lt;link rel="stylesheet" type="text/css" href="dist/css/app.css"&gt;
        &lt;link href='http://fonts.googleapis.com/css?family=Raleway:200,400,800|Clicker+Script' rel='stylesheet' type='text/css'&gt;
        &lt;!--[if IE]&gt;
            &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
        &lt;![endif]--&gt;
                &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div class="container demo-2"&gt;
            &lt;div class="content"&gt;
                &lt;div id="large-header" class="large-header normal"&gt;
                    &lt;canvas id="demo-canvas"&gt;&lt;/canvas&gt;
                                        &lt;div class="row enter-name"&gt;
                                        &lt;div class="large-12 columns"&gt;
                                          &lt;h1&gt;Hot or Cold&lt;/h1&gt;
                                          &lt;p&gt;This is a simple guessing game.&lt;/p&gt;
                                          &lt;h5&gt;Please enter your name below&lt;/h5&gt;
                                          &lt;input type="text" id="name" value="" placeholder="Budd Hole"&gt;
                                          &lt;input onclick="game.init()" type="submit" id="submit-name"&gt;
                                        &lt;/div&gt;
                                        &lt;/div&gt;
                                            &lt;div class="row game hidden"&gt;
                                                &lt;div class="large-6 small-12 small-centered columns"&gt;

                                                    &lt;div class="number-chosen"&gt;&lt;/div&gt;


                                                    &lt;h1 id="display-name" data-id="" class="text-center"&gt;&lt;/h1&gt;

                                                    &lt;h4 class="text-center"&gt;Try to guess the number in less than 6 tries!&lt;/h4&gt;

                                                    &lt;hr&gt;

                                                    &lt;div class="user-answer small-6 large-6 columns text-center"&gt;
                                                        &lt;h3 id="number-guess-name"&gt;&lt;/h3&gt;
                                                        &lt;span id="user-answer"&gt;0&lt;/span&gt;
                                                    &lt;/div&gt;

                                                    &lt;div class="computer-number small-6 large-6 columns text-center"&gt;
                                                        &lt;h3 id="computer-rand-number"&gt;Computer&lt;/h3&gt;
                                                        &lt;span id="computer-number"&gt;0&lt;/span&gt;
                                                    &lt;/div&gt;

                                                    &lt;ul class="numbers-to-guess"&gt;
                                                        &lt;li value="1"&gt;1&lt;/li&gt;
                                                        &lt;li value="2"&gt;2&lt;/li&gt;
                                                        &lt;li value="3"&gt;3&lt;/li&gt;
                                                        &lt;li value="4"&gt;4&lt;/li&gt;
                                                        &lt;li value="5"&gt;5&lt;/li&gt;
                                                        &lt;li value="6"&gt;6&lt;/li&gt;
                                                        &lt;li value="7"&gt;7&lt;/li&gt;
                                                        &lt;li value="8"&gt;8&lt;/li&gt;
                                                        &lt;li value="9"&gt;9&lt;/li&gt;
                                                        &lt;li value="10"&gt;10&lt;/li&gt;
                                                    &lt;/ul&gt;

                                                    &lt;hr /&gt;

                                                        &lt;h2&gt;Times Guessed: &lt;span id="guessed"&gt;&lt;/span&gt;&lt;/h2&gt;

                                                    &lt;hr /&gt;

                                                        &lt;h1 id='message'&gt;&lt;/h1&gt;

                                                &lt;/div&gt;

                                                &lt;!-- &lt;div class="large-5 columns answers"&gt;

                                                    &lt;table class="large-5 text-center columns"&gt;
                                                        &lt;tr&gt;
                                                            &lt;th&gt;Computer's Answers&lt;/th&gt;
                                                        &lt;/tr&gt;
                                                        &lt;tr id="computer-answers"&gt;
                                                        &lt;/tr&gt;
                                                    &lt;/table&gt;

                                                    &lt;table class="large-5 text-center columns"&gt;
                                                        &lt;tr&gt;
                                                            &lt;th id="user"&gt;User's Answers&lt;/th&gt;
                                                        &lt;/tr&gt;
                                                        &lt;tr id="user-answers"&gt;
                                                        &lt;/tr&gt;
                                                    &lt;/table&gt;


                                                &lt;/div&gt; --&gt;



                                            &lt;/div&gt;&lt;!--- End Game ---&gt;

                                            &lt;div class="win-screen hidden text-center"&gt;
                                                &lt;h1&gt;You Won!&lt;/h1&gt;
                                                &lt;h1 class="total-points"&gt;&lt;/h1&gt;
                                                &lt;span class="points-awarded"&gt;&lt;/span&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="play-again"&gt;Play Again?&lt;/button&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="new-player"&gt;New Player&lt;/button&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="leaderboards"&gt;Scores&lt;/button&gt;
                                            &lt;/div&gt;

                                            &lt;div class="lose-screen hidden text-center"&gt;
                                                &lt;h1&gt;Sorry you lost!&lt;/h1&gt;
                                                &lt;h1 class="total-points"&gt;&lt;/h1&gt;
                                                &lt;span class="points-awarded"&gt;&lt;/span&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="play-again"&gt;Play Again?&lt;/button&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="new-player"&gt;New Player&lt;/button&gt;
                                                &lt;br/&gt;
                                                &lt;br/&gt;
                                                &lt;button class="leaderboards"&gt;Leaderboards&lt;/button&gt;
                                            &lt;/div&gt;

                                            &lt;div class="leaderboard-screen hidden"&gt;
                                                &lt;h1&gt;Top 5 Scores&lt;/h1&gt;
                                                    &lt;ol class="score-list"&gt;

                                                    &lt;/ol&gt;

                                                    &lt;br/&gt;
                                                    &lt;br/&gt;
                                                    &lt;button class="play-again"&gt;Play Again?&lt;/button&gt;
                                                    &lt;br/&gt;
                                                    &lt;br/&gt;
                                                    &lt;button class="new-player"&gt;New Player&lt;/button&gt;
                                            &lt;/div&gt;

                                      &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;&lt;!-- /container --&gt;


        &lt;script src="js/rAF.js"&gt;&lt;/script&gt;
        &lt;script src="js/demo-2.js"&gt;&lt;/script&gt;
                &lt;script src="js/app.js"&gt;&lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>