Игра Phaser медленная

Question

Fist time Я использую phaser.io, я повторяю фон, а также загружаю другую вещь в функцию обновления, но через несколько секунд моя игра замедляет время. это похоже на то, что фон больше не движется. Пожалуйста, посмотрите мой код и помогите мне разобраться с этой проблемой. Или, пожалуйста, дайте идею неоднократно менять фон, не изменяя другую вещь. У меня есть проблема с отступом кода, извините за это, но, пожалуйста, попробуйте справиться и помочь мне.

Game.js

var scoreTxt, score, speed, scoreTextValue, ques_label, ques_label_pizza, scoreTextKey, timerTextValue, timerTextKey, textStyle_Key, textStyle_Value, anscloud, astroid1, astroid2, astroid3, astroid4; 
 
/*var gameType;*/ //Pizza or Noun 
 

 
var bullets, quesTextValue, ansTextValue, sprite; 
 

 
var fireRate = 100; 
 
var nextFire = 0; 
 

 
var xAxis = []; 
 
var yAxis = []; 
 

 
var tempQues = []; 
 
var tempAns = []; 
 
var result = []; 
 
var answear = []; 
 
var ques = []; 
 
var astroidContains = []; 
 
var astroidContainsText = []; //['right', 'wrong', 'wrong', 'wrong'] 
 
var astroid, spaceShip, quesbar, diamond, randomAnsPosition; 
 
var s1Copy; 
 

 
var cloudContains = []; //['noun', 'pronoun', 'pronoun'] 
 
var QbarContainsQue = []; 
 

 
var ans,rightans; 
 
var isAnswerCorrect = false; 
 
var allowClick  = false; 
 

 
var spaceShipXAxis = 40, loader1Width = 85, loader2Width = 70; 
 

 
var bar, loader1, loader2, timer, timerSprite, timerSpriteCount = 0; 
 
var timerCounter = 45; //timer counter will be of 45 seconds. 
 
//var timerCounter_ = 100; //timer counter will be of 45 seconds. 
 
var questCounter = 0; //question counter no. of question played. 
 
var maxQuest  = 10;//max questions will be displayed is 10. 
 

 
var diamondTextColor = "#8D4FA8"; 
 
var defTextColor = "#5BEFFE"; 
 
var ansTextColor = "#9E13DA"; 
 
var errTextColor = '#FF0000'; 
 
var corrTextColor = '#228B22'; 
 

 
var corr_ans_fst; 
 
var corr_ans_sec; 
 
var fun_bckg, randQues; 
 
var wrong_ans; 
 

 
var barre1_x = 150; 
 
var barre1_y = 115; 
 
var healthValue = 100; 
 
var x_loader = 180; 
 
var check =0; 
 

 
var setAns = []; 
 

 
var setOne  = [['12+16=','28'], ['15+11=','26'], ['16+22=','38'], ['13+14=','27'], ['15+24=','39'], ['14+12=','26'], ['10+17=','27'], ['11+11=','22'], 
 
        ['13+15=','28'], ['12+21=','33'], ['24+13=','37'], ['33+21=','54'], ['40+18=','58'], ['34+31=','65'], ['25+42=','67'], ['22+15=','37'], 
 
        ['24+12=','36'], ['20+15=','35'], ['25+14=','39'], ['21+21=','42'], ['41+25=','66'], ['53+24=','77'], ['35+31=','66'], ['62+37=','99'], 
 
        ['54+35=','89']]; 
 

 
var setTwo  = [['15+18=','33'], ['17+17=','34'], ['13+19=','32'], ['18+14=','32'], ['15+27=','42'], ['18+17=','35'], ['27+29=','56'], ['23+28=','51'], 
 
        ['36+37=','73'], ['45+25=','70'], ['46+45=','91'], ['38+57=','95'], ['49+43=','92'], ['37+53=','90'], ['48+33=','81']]; 
 

 

 

 
var Game = { 
 
    preload : function() { 
 
     // Load the needed image for this(play) game screen. 
 
     //load the menu screen 
 
     this.load.image('menu', './assets/images/menu.png'); 
 

 
     // Here we load all the needed resources for the level. 
 
     // background image screen 
 
     this.load.image('playgame', './assets/images/back.png'); 
 

 
     // globe image screen 
 
     this.load.image('playgame', './assets/images/back.png'); 
 
     
 
     // win image screen 
 
     //this.load.image('win', './assets/images/win.png'); 
 
     // spaceship image screen 
 
     this.load.image('spaceship', './assets/images/spaceship.png'); 
 
     // Question bar image screen 
 
     this.load.image('quesbar', './assets/images/quesbar.png'); 
 
     // Diamond image screen 
 
     this.load.image('diamond', './assets/images/diamond.png'); 
 
     // Astroid image screen 
 
     this.load.image('astroid1', 'assets/images/asteroid1.png'); 
 
     this.load.image('astroid2', 'assets/images/asteroid2.png'); 
 
     this.load.image('astroid3', 'assets/images/asteroid3.png'); 
 
     this.load.image('astroid4', 'assets/images/asteroid4.png'); 
 

 
     // Loader image screen  
 
     this.load.image('loaderbck', 'assets/images/loaderbck.png'); 
 
     this.load.image('loader1', 'assets/images/loader1.png'); 
 
     this.load.image('loader2', 'assets/images/loader2.png'); 
 

 
     //Load the bullet 
 
     this.load.image('bullet', 'assets/images/bullet.png'); 
 
     
 
    }, 
 
    create : function() { 
 

 
     // By setting up global variables in the create function, we initialise them on game start. 
 
     // We need them to be globally available so that the update function can alter them. 
 

 
     textStyle_Value  = { font: "bold 20px Segoe UI", fill: defTextColor, align: "center" }; 
 
     textStyleAns = { font: "bold 22px 'Comic Sans MS', 'Comic Sans'", fill: ansTextColor, wordWrap: true, wordWrapWidth: 10, align: "center"}; 
 
     textStyleQues = { font: "bold 20px 'Comic Sans MS', 'Comic Sans'", fill: defTextColor, wordWrap: true, wordWrapWidth: 10, align: "center"}; 
 
      sprite = game.add.sprite(310, 485, 'spaceship'); 
 
      sprite.anchor.set(0.5); 
 
      
 
     // Loading backround image 
 
     this.playBackground(); 
 
     this.playBackground1(); 
 

 
     // Additional Sprites, like cloud 
 
     this.addSprites(); 
 
     
 
     // Loading spaceship image 
 
     //this.spaceship(); 
 
     // Loading questionbar image 
 
     this.questionbar(); 
 
     // Call fun. for ques 
 
     this.comeQus(); 
 
     // csll fun. for place astroid 
 
     // this.astroid(); 
 
     // call fun. for Ans 
 
     this.generateQues(); 
 
     this.generateAns(); 
 

 
     // Loading Diamond image 
 
     this.diamond(); 
 
     // Start timer 
 
     this.startTimer(); 
 
     // Set timer. 
 
     this.setTimer(); 
 

 
     this.initLoader(); 
 

 
     
 
      
 
    }, 
 

 
    update: function() { 
 

 

 
     // The update function is called constantly at a high rate (somewhere around 60fps), 
 
     // updating the game field every time - also destroying previous objects and creating new. 
 

 
     // Our bullet group 
 
     
 
     //bullets.destroy(); 
 
     sprite.destroy(); 
 

 
     bullets = game.add.group(); 
 
     bullets.enableBody = true; 
 
     bullets.physicsBodyType = Phaser.Physics.ARCADE; 
 
     bullets.createMultiple(200, 'bullet', 100, false); 
 
     bullets.setAll('anchor.x',0); 
 
     bullets.setAll('anchor.y', 0.9); 
 
     bullets.setAll('outOfBoundsKill', true); 
 
     bullets.setAll('checkWorldBounds', true); 
 

 
     
 
      //Repeating background.. 
 
     if(playgame != null && playgame.body.y > 600) { 
 
      playgame.destroy(); 
 
      this.playBackground(); 
 
      
 
     } 
 
     if(playgame1.body.y > 0) { 
 
      playgame1.destroy(); 
 
      this.playBackground1(); 
 
      this.initLoader(); 
 
      
 
     }  
 
     
 
     if(astroid1 != undefined) astroid1.destroy(); 
 
     if(astroid2 != undefined) astroid2.destroy(); 
 
     if(astroid3 != undefined) astroid3.destroy(); 
 
     if(astroid4 != undefined) astroid4.destroy(); 
 

 
     this.addSprites(); 
 
     //timerTextValue.text = "00:" + timerCounter; 
 
     this.initLoader(); 
 
     //destroing old diamond obj and creating new while change background 
 
     //diamond.destroy(); 
 
     this.diamond(); 
 
     
 
     //destroing old questionbar obj and creating new while change background 
 
     quesbar.destroy(); 
 
     this.questionbar(); 
 
     
 
     //Call comeQus, comeAns for show ques and ans at every background change 
 
     // quesTextValue.destroy(); 
 
     if(quesTextValue != undefined) quesTextValue.destroy(); 
 
     this.comeQus(); 
 
     //ansTextValue.destroy(); 
 
     
 
     if(ansTextValue != undefined) ansTextValue.destroy(); 
 
     this.comeAns(); 
 

 
     if (game.input.activePointer.isDown) { 
 
      this.fire(); 
 
     } 
 

 
       allowClick = true; 
 
      
 
     
 
    }, 
 
playBackground: function() { 
 

 
     // console.log("playBackground called"); 
 
     playgame = this.add.sprite(0, 0, 'playgame', 5); 
 
     playgame.scale.set(1); 
 
     playgame.smoothed = false; 
 
     anim_playgame = playgame.animations.add('walk'); 
 

 
     anim_playgame.play(10, true); 
 
     
 
     this.physics.enable(playgame, Phaser.Physics.ARCADE); 
 
     playgame.body.velocity.y = 50; 
 

 
     
 
    }, 
 
    
 

 
    playBackground1: function() { 
 

 
     //console.log("playBackground1 called"); 
 
     //Second background.. 
 
     playgame1 = this.add.sprite(0, -600, 'playgame', 5); 
 
     playgame1.scale.set(1); 
 
     playgame1.smoothed = false; 
 
     anim_playgame1 = playgame1.animations.add('walk'); 
 

 
     anim_playgame1.play(10, true); 
 
     
 
     this.physics.enable(playgame1, Phaser.Physics.ARCADE); 
 
     playgame1.body.velocity.y = 50; 
 
    }, 
 

 

 
    questionbar: function() { 
 
     quesbar = game.add.image(10, 530, 'quesbar'); 
 
     
 
    }, 
 
    diamond: function() { 
 
     diamond = game.add.image(680, 20, 'diamond'); 
 
     
 
    }, 
 
    
 
    addSprites: function() { 
 
     
 
      // loading answer cloud 
 
      astroid1 = this.add.button(30, 90, 'astroid1', this.astroidClicked, this); 
 
      astroid2 = this.add.button(220, 30, 'astroid2', this.astroidClicked, this); 
 
      astroid3 = this.add.button(400, 40, 'astroid3', this.astroidClicked, this); 
 
      astroid4 = this.add.button(600, 90, 'astroid4', this.astroidClicked, this); 
 
     
 
    }, 
 

 
    inCorrectAnswerHit: function(index) { 
 
     allowClick = false; 
 
     isAnswerCorrect = false; 
 
     
 
     //this.playFx('wrong_ans'); 
 
     
 
     for(i=0; i<=3; i++) { 
 
      if(cloudContains[i] == "right") { 
 
       //cloudContainsText[i].fill = corrTextColor; 
 
       console.log("right ans hit"); 
 
       break; 
 
      } 
 
     } 
 
    }, 
 
    checkAnswer: function(index) { 
 
     // If clicked Ans is right so astroid will destroy. 
 
     if(astroidContainsText[index] == "wrong") { 
 
      //Here collization function will call 
 
      
 
      isAnswerCorrect = true; 
 
     } 
 
     // If clicked word is noun (correct answer) and obstacle is redbird or blackbird - the dude will slide. 
 
     else { 
 
      this.inCorrectAnswerHit(index); 
 
     } 
 
    }, 
 

 
    
 
    generateQues: function(){ 
 
     var que; 
 
     // Generating random questions from given list of ques - setOne. 
 

 
     s1Copy = setOne.slice(); 
 
       //var result = []; 
 
       for (var i = 0; i < 3; i++) {result.push(s1Copy.splice(~~(Math.random()*s1Copy.length),1)[0]);} 
 
       s1Copy.push(...setTwo); 
 
       for (var i = 0; i < 7; i++) {result.push(s1Copy.splice(~~(Math.random()*s1Copy.length),1)[0]);} 
 
       
 
       result.toString(); 
 
       for(var i = 0; i < result.length ; i++) { 
 

 
        que = result[i]; 
 
        ques.push(que[0]); 
 
        ques.toString(); 
 
        //console.log(ques); 
 
        answear.push(que[1]); 
 
        } 
 
    }, 
 
    comeQus: function() { 
 
       quesTextValue = this.add.text(50,541, ques[0],textStyleQues); 
 
       this.generateQues(); 
 
     //tempNoun = []; 
 
     
 
    }, 
 

 
    generateAns: function() { 
 

 
     //Generate two digitd rendom no. and create an array of ans setAns[] 
 
     // Add digitd in array 
 
     for(var i = 0; i < 3 ; i++) { 
 
      var digit = Math.floor(Math.random() * 90 + 10); 
 
      //console.log(digit); 
 
      setAns.push(digit); 
 
      astroidContains[i] = "wrong"; 
 
      
 
     } 
 
     console.log(astroidContains); 
 
     //console.log(answear); 
 
     setAns.push(answear[0]); 
 
     astroidContains[i] = "right"; 
 
     console.log(astroidContains); 
 

 
     shuffle(setAns); 
 

 
     randomAnsPosition = [0, 1, 2, 3]; 
 
     shuffle(randomAnsPosition); 
 
    }, 
 
    
 
    comeAns: function() { 
 
     
 
     // x and y axis param for placing Answers text. 
 
     xAxis = [ 85, 255, 453, 675]; 
 
     yAxis = [130, 48, 60, 120]; 
 

 
     
 
     // console.log(setAns); 
 
     // Set Answers from above array of Ans - setAns. 
 
     for (var i = 0; i < setAns.length; i++) { 
 
      var ans = setAns[i]; 
 
      //console.log(ans); 
 
        
 
      ansTextValue = this.add.text(xAxis[randomAnsPosition[i]], yAxis[randomAnsPosition[i]], ans, textStyleAns); 
 
      astroidContainsText[i] = ansTextValue; 
 
       
 
      //console.log(ansTextValue.text); 
 
     } 
 
     
 
    }, 
 

 
    // Observing which cloud is clicked and checking answer accordingly. 
 
    astroidClicked: function() { 
 
     // alert("HEllo called"); 
 
     if(!allowClick) { 
 
      return; 
 
     } 
 
     if(astroid1.game.input._x > 85 && astroid1.game.input._x < 130) { 
 
      console.log("cloud_1_Clicked, Clicked:" + astroidContains[0]); 
 
      this.checkAnswer(0); 
 
     } 
 
     else if(astroid2.game.input._x > 255 && astroid2.game.input._x < 48) { 
 
      //console.log("cloud_2_Clicked, Clicked:" + astroidContains[1]); 
 
      this.checkAnswer(1); 
 
     } 
 
     else if(astroid3.game.input._x > 453 && astroid3.game.input._x < 60) { 
 
      //console.log("cloud_3_Clicked, Clicked:" + astroidContains[2]); 
 
      this.checkAnswer(2); 
 
     } 
 
     else if(astroid4.game.input._x > 675 && astroid4.game.input._x < 120) { 
 
      //console.log("cloud_3_Clicked, Clicked:" + astroidContains[2]); 
 
      this.checkAnswer(3); 
 
     } 
 
     allowClick = false; 
 
    }, 
 
    
 
    startTimer: function() { 
 
     // Create our Timer 
 
     timer = game.time.create(false); 
 

 
     // Set a TimerEvent to occur after 1 seconds 
 
     timer.loop(1000, this.updateCounter, this); 
 
     
 
     // Set a TimerEvent to occur after 1 seconds 
 
     // timer.loop(100, this.timerStripeChange, this); 
 
     
 
     // Start the timer running - this is important! 
 
     // It won't start automatically, allowing you to hook it to button events and the like. 
 
     timer.start(); 
 
    }, 
 
    gameOver: function() { 
 
     
 
     //Gameover screen 
 
     this.state.start('Game_Over', true, false); 
 
    }, 
 

 
    initLoader: function() { 
 

 
     
 
     //*******Loader 
 
     check +=1; 
 
     var bmd = this.game.add.bitmapData(185, 30); 
 
     bmd.ctx.beginPath(); 
 
     bmd.ctx.rect(0, 0, 185, 36); 
 
     bmd.ctx.fillStyle = '#00685e'; 
 
     bmd.ctx.fill(); 
 
    
 
     var bglife = this.game.add.sprite(100, 38, bmd); 
 
     bglife.anchor.set(0.5); 
 
     
 
     if(check != 0) 
 
     bmd = this.game.add.bitmapData(x_loader-4, 26); 
 
     else 
 
      bmd = this.game.add.bitmapData(x_loader, 26); 
 
      bmd.ctx.beginPath(); 
 
      bmd.ctx.rect(0, 0, 180, 26); 
 
     
 
     if(x_loader <= 120 && x_loader > 60) { 
 
      bmd.ctx.fillStyle = "#FFFF00"; 
 
     } else if(x_loader <= 60) { 
 
      bmd.ctx.fillStyle = "#EA0B1E"; 
 
     } else { 
 
      bmd.ctx.fillStyle = '#00f910'; 
 
     } 
 
     bmd.ctx.fill(); 
 
     
 
     this.widthLife = new Phaser.Rectangle(0, 0, bmd.width, bmd.height); 
 
     this.totalLife = bmd.width; 
 
     //x_loader = ; 
 
     /*console.log(this.totalLife); 
 
     console.log(this.widthLife);*/ 
 
     
 
     this.life = this.game.add.sprite(93 - bglife.width/2 + 10, 38, bmd); 
 
     this.life.anchor.y = 0.5; 
 
     this.life.cropEnabled = true; 
 
     this.life.crop(this.widthLife); 
 
     
 
     // this.game.time.events.loop(1450, this.cropLife, this); 
 
    }, 
 
    updateCounter: function() { 
 
     if(timerCounter <= 0) { 
 
      this.gameOver(); 
 
      return; 
 
     } 
 
     timerCounter--; 
 
     
 
     if(this.widthLife.width <= 0){ 
 
      this.widthLife.width = this.totalLife; 
 
      } 
 
      else{ 
 
      //this.game.add.tween(this.widthLife).to({ width: (x_loader - 4) }, 200, Phaser.Easing.Linear.None, true); 
 
      //console.log(this.widthLife.width); 
 
      this.widthLife.width = x_loader - 4; 
 
      x_loader = this.widthLife.width; 
 
      } 
 
    }, 
 

 
    fire: function() { 
 

 
    if (game.time.now > nextFire && bullets.countDead() > 0) 
 
    { 
 
     nextFire = game.time.now + fireRate; 
 

 
     var bullet = bullets.getFirstDead(); 
 

 
     bullet.reset(sprite.x - 80, sprite.y - 80); 
 

 
     game.physics.arcade.moveToPointer(bullet, 300); 
 
    } 
 

 
} 
 

 

 
} 
 

 

 
/** 
 
* Shuffles array in place. 
 
* @param {Array} a items The array containing the items. 
 
*/ 
 
function shuffle(a) { 
 
    var j, x, i; 
 
    for (i = a.length; i; i -= 1) { 
 
     j = Math.floor(Math.random() * i); 
 
     x = a[i - 1]; 
 
     a[i - 1] = a[j]; 
 
     a[j] = x; 
 
    } 
 
}

Answer 1

Как уже было отмечено много кода. Пока что я вижу, это утечка памяти в функции обновления():

bullets = game.add.group(); 
bullets.enableBody = true; 
bullets.physicsBodyType = Phaser.Physics.ARCADE; 
bullets.createMultiple(200, 'bullet', 100, false); 
bullets.setAll('anchor.x',0); 
bullets.setAll('anchor.y', 0.9); 
bullets.setAll('outOfBoundsKill', true); 
bullets.setAll('checkWorldBounds', true); 

С, что вы постоянно создают новые пули. Поместите это в функцию create() и повторите попытку.