Lysis Posted June 13, 2015 Share Posted June 13, 2015 Hi everyone, first I have to appologize, I'm not english then my spelling may be wrong.I'm working on a game, runner style but I have some issues : - First, when the game is over I put a "Play again" button", but the more you wait to click, the more the button goes away and the navigator crash :/ - My other problem is that I don't know how to stop some function, for instance, my character can jump but can't jump again while he's jumping. Then he can also can "super jump" but while he's super jumping I can click over and over on the button "super jump" (and I don't want it) . Then there is my question, what's the code to stop a function ? I will send you my code, please help me if you can ;pThanks<!DOCTYPE HTML><html> <head> <title>"Attrape-les notes" avec Phaser.js</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="phaser.min.js"></script> <script type="text/javascript" src="main.js"/></script> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="attrapeLesNotes"> </div> </body></html>body { padding: 0; margin: 0;}#attrapeLesNotes { margin: auto; display: table;}'use strict';// on déclare un objet Phaser qui va contenir notre jeu en 640*960pxvar game = new Phaser.Game(1640, 960, Phaser.AUTO/*CANVAS*/, 'attrapeLesNotes');game.transparent = true;var gameState = {};// On crée un objet "load" à notre objet gameStategameState.load = function () {}; //-----------------------------------------------------------------// Cet objet load va contenir des méthodes par défaut de Phaser// Il va nous permettre de charger nos ressources avant de lancer le jeugameState.load.prototype = { // Méthode qui sera appelée pour charger les ressources preload: function () { // Contiendra les ressources à charger (images, sons et JSON) // Bout de code qui va permettre au jeu de se redimensionner selon la taille de l'écran this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; this.game.stage.scale.setShowAll(); window.addEventListener('resize', function () { this.game.stage.scale.refresh(); }); this.game.stage.scale.refresh(); /***** Sprites Load *****/ // Sol this.game.load.image('ground', 'img/ground.png'); // Obstacle this.game.load.image('pipe', 'img/pipes.png'); // bout des tuyaux this.game.load.image('pipeEndTop', 'img/pipe-end-top.png'); this.game.load.image('pipeEndBottom', 'img/pipe-end-bottom.png'); // Background this.game.load.image('background', 'img/background.png'); //Sprite Perso this.game.load.spritesheet('spritePerso', 'img/bird0.png', 441, 467); //Image d'accueil this.game.load.image('imgAcc', 'img/pageV2.png'); //GameOver this.game.load.image('gameOver', 'img/GameOverNoir.png'); //Rejouer this.game.load.image('buttonPlay', 'img/Rejouer.png'); //Chiffres score this.game.load.atlasJSONHash('numbers', 'img/numbers.png', 'data/numbers.json'); //Image score this.game.load.image('scoreImg', 'img/score.png'); //Image Super Saut this.game.load.image('processBar', 'img/BoutonSS00.png'); this.game.load.spritesheet('processBar', 'img/ProcessBar.png', 400, 100); }, create: function () { // Est appelée après la méthode "preload" afin d'appeler l'état "main" de notre jeu game.state.start('main'); }};// va contenir le coeur du jeugameState.main = function () {}; //-------------------------------------------------------------------gameState.main.prototype = { // Méthode qui sera appelée pour initialiser le jeu et y intégrer les différentes ressources create: function () { //Création de l'arrière-plan en tant que sprite this.background = this.game.add.sprite(0, 0, 'background'); this.background.width = this.game.width; this.background.height = this.game.height; //Création du sol this.ground = this.game.add.sprite(0, 0, 'ground'); this.ground.width = this.game.width * 2; this.ground.height = this.game.height / 5; this.ground.y = this.game.height - this.ground.height; this.ground.body.immovable = true; //this.ground.body.velocity.x = -250; this.ground.body.rebound = false; //Création du personnage this.spritePerso = this.game.add.sprite(250, 651, 'spritePerso'); this.spritePerso.anchor.setTo(0.5, 0.5); this.spritePerso.animations.add('standing', [0, 1, 2, 1], 8, true) this.spritePerso.play('standing'); this.spritePerso.width = this.spritePerso.width / 2; this.spritePerso.height = this.spritePerso.height / 2; // Obstacles this.pipes = game.add.group(); this.pipes.createMultiple(40, 'pipe'); this.arrayPipes = new Array(); //Page d'accueil this.imgAcc = game.add.sprite(425, 70, 'imgAcc'); this.tweenAcc = this.game.add.tween(this.imgAcc); this.tweenAcc.to({ x: this.imgAcc.x + 20 }, 800, Phaser.Easing.Quadratic.InOut, true, 0, 10000000000, true); // Image "gameOver" this.gameOver = this.game.add.sprite(this.game.width / 2, 300, 'gameOver'); this.gameOver.x -= this.gameOver.width / 2; this.gameOver.y -= this.gameOver.height / 2; this.gameOver.alpha = 0; // Image Score this.scoreImg = this.game.add.sprite(this.game.width / 60, this.game.height / 1.15, 'scoreImg'); this.scoreImg.alpha = 0; //Bouton Rejouer this.buttonPlay = this.game.add.sprite(this.game.width / 2,this.game.height / 1.5, 'buttonPlay'); this.buttonPlay.alpha = 0; this.buttonPlay.inputEnabled = true this.buttonPlay.anchor.setTo(0.5, 0.5); //ProcessBar - Super Saut this.processBar = this.game.add.sprite(this.game.width/2,this.game.height/1.08, 'processBar'); this.processBar.alpha = 0; this.processBar.inputEnabled = true this.processBar.anchor.setTo(0.5, 0.5); //On empêche le corps physique de rebondir lors d'une collision this.spritePerso.body.rebound = false; //Nous permettra de savoir si le personnage est dans un saut ou non this.birdInJump = false; //Click -> fonction"start()" this.game.input.onTap.add(this.start, this); // Obstacle à vérifier pour savoir si le personnage l'a dépassé (permet d'augmenter le score) // On vérifiera toujours le premier élément seulement this.pipesToCheckForScore = new Array(); // Obstacle à vérifier pour savoir quand ajouter un obstacle // On vérifiera toujours le premier élément seulement this.pipesToCheckForAdd = new Array(); }, start: function () { //Timer de l'ajout de l'obstacle this.timer = this.game.time.events.loop(1500, this.addGroupPipes, this); //Apparition de la barre de Super Saut this.game.add.tween(this.processBar).to({ alpha: 1 }, 300, Phaser.Easing.Linear.None, true, 0, 0, true); //Apparition du score this.game.add.tween(this.scoreImg).to({ alpha: 1 }, 300, Phaser.Easing.Linear.None, true, 0, 0, true); //Suppression de la page d'accueil this.game.add.tween(this.imgAcc).to({ alpha: 0 }, 500, Phaser.Easing.Linear.None, true, 0, 0, true); // Gravité du personnage this.ground.body.velocity.x = -400; this.spritePerso.body.gravity.y = 1500; // Premier saut this.spritePerso.body.velocity.y = -500; // Insérer le personnage dans l'action Jump this.birdInJump = true; //On supprime l'événement qui se déclenchait au click sur le jeu this.game.input.onTap.removeAll(); // Score this.score = 0; this.spritesScore = new Array(); var spriteScore = this.game.add.sprite(this.game.width / 3.9, 850, 'numbers'); this.spritesScore.push(spriteScore); this.spritesScore[0].animations.add('number'); this.spritesScore[0].animations.frame = 0; this.spritesScore[0].x -= this.spritesScore[0].width / 2; //Afin d'ajouter le Jump à l'événement down sur le jeu this.game.input.onDown.add(this.jump, this); //Interactivité avec le bouton pour Super Saut var self = this; self.processBar.events.onInputDown.add(function () { self.processBar.y += 2; }); self.processBar.events.onInputUp.add(function () { self.processBar.y -= 2; self.superSaut();}); }, superSaut: function () { //Quand le perso est encore visible (ne dépasse pas le haut de l'écran) if (this.spritePerso.y + this.spritePerso.height >= 0) { //On inscrit le personnage dans l'action jump this.birdInJump = true; //On change la zone de collision du personnage this.spritePerso.destroy(true); this.spritePerso = this.game.add.sprite(250, 650, 'spritePerso'); this.spritePerso.body.setPolygon( /* x = */ 300, /* y = */ 150, 330, 50, 350, 50, 350, 50, 405, 105, 410, 145, 440, 150, 410, 190, 430, 315, 410, 410, 350, 450, 250, 400, 220, 340); this.spritePerso.x = this.game.height / 4.4; this.spritePerso.anchor.setTo(0.5, 0.5); this.spritePerso.animations.add('saut', [6, 7, 8], 8, true) this.spritePerso.play('saut'); this.spritePerso.width = this.spritePerso.width / 2.4; this.spritePerso.height = this.spritePerso.height / 2.4; //Saut this.spritePerso.body.velocity.y = -1000; this.spritePerso.body.gravity.y = 1200; this.processBar.animations.add('utilisation', [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,0], 8, false); this.processBar.play('utilisation'); this.removeAllEventListeners; //this.game.input.[processBar].removeAll(); } }, jump: function () { //Quand le perso est encore visible (ne dépasse pas le haut de l'écran) if (this.spritePerso.y + this.spritePerso.height >= 0) { //On inscrit le personnage dans l'action jump this.birdInJump = true; //On change la zone de collision du personnage this.spritePerso.destroy(true); this.spritePerso = this.game.add.sprite(250, 650, 'spritePerso'); this.spritePerso.body.setPolygon( /* x = */ 300, /* y = */ 150, 330, 50, 350, 50, 350, 50, 405, 105, 410, 145, 440, 150, 410, 190, 430, 315, 410, 410, 350, 450, 250, 400, 220, 340); this.spritePerso.x = this.game.height / 4.4; this.spritePerso.anchor.setTo(0.5, 0.5); this.spritePerso.animations.add('saut', [6, 7, 8], 8, true) this.spritePerso.play('saut'); this.spritePerso.width = this.spritePerso.width / 2.4; this.spritePerso.height = this.spritePerso.height / 2.4; //Saut this.spritePerso.body.velocity.y = -800; this.spritePerso.body.gravity.y = 1500; this.game.input.onDown.removeAll(); } }, update: function () { // Boucle principale du jeu (détection de collisions, déplacement du personnage...) // -------------- Score -------------- if (this.pipesToCheckForScore.length != 0 && this.pipesToCheckForScore[0].x + this.pipesToCheckForScore[0].width / 2 < this.spritePerso.center.x) { this.pipesToCheckForScore.splice(0, 1); this.score++; // on découpe le nombre en des chiffres individuels var digits = this.score.toString().split(''); var widthNumbers = 0; for (var j = 0; j < this.spritesScore.length; j++) this.spritesScore[j].kill(); this.spritesScore = new Array(); // on met en forme le score avec les sprites for (var i = 0; i < digits.length; i++) { var spriteScore = this.game.add.sprite(widthNumbers, 425, 'numbers'); spriteScore.animations.add('number'); spriteScore.animations.frame = +digits[i]; this.spritesScore.push(spriteScore); widthNumbers += spriteScore.width; //window.alert(this.score); // SCORE } // on place le score for (var i = 0; i < this.spritesScore.length; i++) { this.spritesScore[i].x += this.game.width / 3.9 - widthNumbers / 2; this.spritesScore[i].y = 845; } } // Si le centre du sol sort à gauche de l'écran if (this.ground.x + this.ground.width / 2 <= 0) { this.ground.x = 0; } //************** Si collision ************** this.game.physics.overlap(this.spritePerso, this.ground, this.marche, null, this); this.game.physics.overlap(this.spritePerso, this.pipes, this.collision, null, this); // Quand le premier tuyau se trouve au milieu du terrain if (this.pipesToCheckForAdd.length != 0 && this.pipesToCheckForAdd[0].x + this.pipesToCheckForAdd[0].width / 2 < this.game.world.width/2) { /*-----------VALEUR A CHANGER POUR LA DISTANCE ENTRE LES POTS-------------*/ this.pipesToCheckForAdd.splice(0, 1); // On ajoute un nouveau tuyau this.addGroupPipes(); } for (var i = 0; i < this.arrayPipes.length; i++) { // si les bouts de tuyau du tuyau i se trouvent en dehors de la fenêtre (à gauche) if (this.arrayPipes[i][0].x + this.arrayPipes[i][0].width < 0) { // on les supprime for (var j = 0; j < this.arrayPipes[i].length; j++) { this.arrayPipes[i][j].kill(); } } } }, // On ajoute obstacle addGroupPipes: function () { // On supprime le timer qui ne nous sert plus à rien this.game.time.events.remove(this.timer); var nbPiecesOfPipes = 12; var hole = Math.round(Math.random() * (nbPiecesOfPipes - 7)) + 3; for (var i = 0; i <= nbPiecesOfPipes; i++) if (i > hole + 1 || i < hole - 1) this.addPieceOfPipe(this.game.world.width, this.game.world.height - this.ground.height - i * this.game.world.height / nbPiecesOfPipes, i, hole); }, // Permet d'ajouter un morceau de tuyau addPieceOfPipe: function (x, y, i,hole, nbPipe) { // On prend le premier élément "mort" du groupe pipes var pipe = this.pipes.getFirstDead(); // On change la position du bout de tuyau pipe.reset(x, y); // On change la vitesse pour qu'il se déplace en même temps que le sol pipe.y=this.game.height/1.41; //var alea = Math.round((Math.random()*100)+this.game.width); pipe.x= 2000; //CHANGER POUR LA DISTANCE ENTRE LES GROUPES DE POTS (pour 1 point) //console.log(alea); pipe.body.velocity.x = -400; pipe.body.immovable = true; // on enregistre les tuyaux présents sur le terrain dans un tableau // this.arrayPipes[index] = tuyau index en entier // this.arrayPipes[index][2] = bout n°2 du tuyau index if (i == 0) { this.pipesToCheckForScore.push(pipe); this.pipesToCheckForAdd.push(pipe); this.arrayPipes.push(new Array()); this.arrayPipes[this.arrayPipes.length - 1].push(pipe); } else { this.arrayPipes[this.arrayPipes.length - 1].push(pipe); } }, //Perdu quand il se prend un obstacle collision: function () { //Animation tombe this.spritePerso.animations.add('tombe', [10, 11], 16, false) this.spritePerso.play('tombe'); //On retire le Jump this.game.input.onDown.remove(this.jump, this); //Disparition de la barre de Super Saut this.game.add.tween(this.processBar).to({ alpha: 0 }, 500, Phaser.Easing.Linear.None, true, 0, 0, true); //Apparition GameOver this.game.add.tween(this.gameOver).to({ alpha: 1 }, 300, Phaser.Easing.Linear.None, true, 0, 0, true); //Apparition bouton Rejouer this.game.add.tween(this.buttonPlay).to({ alpha: 1 }, 300, Phaser.Easing.Linear.None, true, 0, 0, true); //Interactivité avec le bouton pour rejouer var self = this; this.buttonPlay.events.onInputDown.add(function () { self.buttonPlay.y = self.buttonPlay.y+0.5; }); this.buttonPlay.events.onInputUp.add(function () { self.buttonPlay.y = self.buttonPlay.y-0.5; self.game.state.start('main'); //self.restart(); }); this.gameFinish(); }, /*restart: function () { this.game.state.start('main'); },*/ gameFinish: function () { //Le perso disparait this.game.add.tween(this.spritePerso).to({ alpha: 0 }, 500, Phaser.Easing.Linear.None, true, 0, 0, true); //On arrête le sol this.ground.body.velocity.x = 0; //On arrête les obstacles for (var i = 0; i < this.arrayPipes.length; i++) for (var j = 0; j < this.arrayPipes[i].length; j++) this.arrayPipes[i][j].body.velocity.x = 0; this.game.input.onDown.removeAll(); // On supprime le timer this.game.time.events.remove(this.timer); }, //Quand il retombe sur le sol marche: function () { this.game.input.onDown.add(this.jump, this); //On change la zone de collision du personnage this.spritePerso.destroy(true); this.spritePerso = this.game.add.sprite(190, 650, 'spritePerso'); this.spritePerso.body.setPolygon( /* x = */ 300, /* y = */ 150, 330, 50, 350, 50, 350, 50, 405, 105, 410, 145, 445, 150, 410, 190, 430, 315, 410, 410, 350, 450, 250, 400, 220, 340); this.spritePerso.y = this.game.height / 0.88; this.spritePerso.anchor.setTo(0.5, 0.5); this.spritePerso.animations.add('marche', [3, 4, 5], 8, true) this.spritePerso.play('marche'); this.spritePerso.width = this.spritePerso.width / 2.4; this.spritePerso.height = this.spritePerso.height / 2.4; }, render: function () { // Affichage de la zone de collision du personnage //this.game.debug.renderPhysicsBody(this.spritePerso.body); // Affichage de la zone de collision des obstacles //this.game.debug.renderPhysicsBody(this.pipes.body); }};// On ajoute les 2 objet "gameState.load" et "gameState.main" à notre objet Phasergame.state.add('load', gameState.load);game.state.add('main', gameState.main);// Il ne reste plus qu'à lancer l'état "load"game.state.start('load'); Link to comment Share on other sites More sharing options...
Shavais Posted June 13, 2015 Share Posted June 13, 2015 I'm very new to phaser myself, and I'm not sure why your play button is going away (if I understand correctly that that is what is happening), but maybe I can inspire better replies by replying badly? ( Heh. I think you should be able to prevent jumping while jump is already active by making and using a gameState.isJumping variable.. - set it to false when the game starts - set it to true when you start playing the jump animation - in the jump function, return immediately (without launching a jump) if isJumping is true - add a listener for the "onComplete" event of the jump animation (maybe call the handler function "onJumpComplete" or something) and in that function, set isJumping to false Sorry I don't have details or code, but my toddler is calling, so I have to go. I hope that helps! Link to comment Share on other sites More sharing options...
Recommended Posts