1

Estoy trabajando en un proyecto de hacer una ruleta de la suerte. La ruleta está compuesta por varias secciones. Según la sección que caigas se genera un texto en pantalla que te dice lo que has ganado o perdido.

La idea es que mientras caiga en las secciones de puntos vaya sumando los puntos con un contador. Y si cae en la sección de "perder" pierda todo y se reinicie el juego.

No como hacer que sume los puntos o que pierda todo y se tenga que iniciar de nuevo. Éste es el código que tengo por el momento.

Muchas gracias!

var game;
var wheel; 
var canSpin;
var slices = 8;
//Aquí genero la cadena de textos con la puntuación de las diferentes secciones
var slicePrizes = [{title:"10 PUNTOS", value:10}, {title:"50 PUNTOS", value:50}, {title:"500 PUNTOS", value:500}, {title:"PERDER", value:"reset"}, {title:"200 PUNTOS", value:200}, {title:"100 PUNTOS", value:100}, {title:"150 PUNTOS", value:150}, {title:"PERDER", value:"reset"}];

var prize;
// Variable del texto del premio
var prizeText;

var puntos = 0; // suma de puntos iniciada a 0

var puntosText; // muestra la suma de los puntos

window.onload = function() {    
     // creo el juego
    game = new Phaser.Game(500, 600, Phaser.AUTO, "");
    game.state.add("PlayGame",playGame);
    game.state.start("PlayGame");
}

// PLAYGAME STATE

var playGame = function(game){};

playGame.prototype = {
     preload: function(){
          // cargamos los gráficos
        game.load.image("wheel", "wheel.png");
        game.load.image("pin", "pin.png");     
     },

    create: function(){
          // Color de fondo
        game.stage.backgroundColor = "#880044";
          // Coloco la rueda en el medio del canvas
        wheel = game.add.sprite(game.width / 2, game.width / 2, "wheel");
          wheel.anchor.set(0.5);
          var pin = game.add.sprite(game.width / 2, game.width / 2, "pin");
          pin.anchor.set(0.5);
          prizeText = game.add.text(game.world.centerX, 480, "");
          prizeText.anchor.set(0.5);
          prizeText.align = "center";
          canSpin = true;
          game.input.onDown.add(this.spin, this);   

          puntos = game.add.text(game.world.centerX, 510, "");
          puntos.anchor.set(0.5);
          puntos.align = "center";
      // adding the text field
      puntosText = game.add.text(game.world.centerX, 540, "");         
      puntosText.anchor.set(0.5);
      puntosText.align = 'center';

      //    Font style
      prizeText.fontSize = 22;
      puntosText.fontSize = 20;

      //    Stroke color and thickness
      puntosText.fill = '#7C4698';

    },
     // función del spin
     spin(){
          // puedo girar la rueda?
          if(canSpin){  
               // reseteando el texto 
               prizeText.text = "";

               var rounds = game.rnd.between(2, 4);
               var degrees = game.rnd.between(0, 360);
               prize = slices - 1 - Math.floor(degrees / (360 / slices));
               canSpin = false;
               var spinTween = game.add.tween(wheel).to({
                    angle: 360 * rounds + degrees
               }, 3000, Phaser.Easing.Quadratic.Out, true);
               spinTween.onComplete.add(this.winPrize, this);
          }
     },
     // Asignamos los premios
     winPrize(){
          canSpin = true;
          prizeText.text = slicePrizes[prize].title;
          puntos.text = slicePrizes[prize].value;
                if (slicePrizes[prize].value === 'reset'){
                    puntos = 0;
                } else {
                    puntos += slicePrizes[prize].value;
                }
          puntosText.text = puntos;

     }
}

Ya he podido mostrar el puntaje, pero únicamente aparece la primera tirada. No me suma después de seguir tirando.

1 respuesta 1

1

Podrías intentar guardar los puntajes como objetos:

var slicePrizes = [{title:"10 PUNTOS", value:10}, {title:"50 PUNTOS", value:50}, ..., {title:"PIERDES", value:"reset"}, ...];

Luego creas una varialble global que guarde la suma:

var sum; // suma de puntos

Y cuando llames a winPrize(), vas sumando o reinicias el puntaje dependiendo del caso:

winPrize(){
    canSpin = true;
    prizeText.text = slicePrizes[prize].title;
    if (slicePrizes[prize].value === 'reset'){
        sum = 0;
    } else {
        sum += slicePrizes[prize].value;
    }
}
10
  • Muchas gracias. La cuestión es cómo puedo hacer que constantemente se vea la suma de puntos en pantalla?
    – Jok
    el 16 oct. 2018 a las 22:00
  • Aquí en la documentación de Phaser dice que para mostrar texto en pantalla debes usar new Text(game, x, y, text, style) donde game es la instancia del juego, x e y la posición, text el texto que quieres mostrar y style el estilo del texto. Ve el enlace para más información.
    – JCAguilera
    el 17 oct. 2018 a las 11:45
  • No consigo hacerlo funcionar...
    – Jok
    el 17 oct. 2018 a las 13:22
  • Bueno, así como muestras prizeText en tu código puedes mostrar los puntajes.
    – JCAguilera
    el 17 oct. 2018 a las 13:44
  • 1
    Muchísimas gracias @JCAguilera. Al fin ha funcionado. Era eso. La cosa es que para que funcione hay que colocarlo después de la sentencia if Me está gustando este lenguaje :) Voy a marcar la pregunta como resuelta.
    – Jok
    el 17 oct. 2018 a las 17:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.