magicworld

testing/magicworld/web/js/game.js

@@ -0,0 +1,448 @@
+var userName = getParam("username") ? getParam("username") : getUserRamdom(),
+  channel = getParam("map") ? getParam("map") : "forest",
+  score = 0,
+  wx = window.innerWidth,
+  wy = window.innerHeight,
+  wx2 = window.innerWidth / 2,
+  wy2 = window.innerHeight / 2,
+  stateScale = wx < 1000 ? 0.5 : 1,
+  zoom = wx < 1000 ? 2 : 1,
+  scaleDivisor = wx < 1000 ? 1 : 2,
+  map,
+  scale = 0,
+  lives = 0,
+  direction = "down",
+  state = "stop",
+  position = {
+    x: 0,
+    y: 0
+  },
+  vx = 0,
+  vy = 0,
+  key = 0;
+
+window.scrollTo(0, 1);
+
+function run(session) {
+  $(document).ready(function () {
+
+    $("#chatInput").keypress(
+      e => {
+        if (e.which === 13) {
+          (async function () {
+            const message = $(e.currentTarget).val();
+            $(e.currentTarget).val("");
+            session.send(userName + " chat " + message);
+          }());
+          return false;
+        }
+      });
+
+    $(document).keydown(
+      e => {
+        if (e.which === 87) {
+          vy = 100;
+          key + 1;
+        }
+        if (e.which === 83) {
+          vy = -100;
+          key + 1;
+        }
+        if (e.which === 68) {
+          vx = -150;
+          key + 1;
+        }
+        if (e.which === 65) {
+          vx = 150;
+          key + 1;
+        };
+      });
+
+    $(document).keyup(
+      e => {
+        if (e.which === 87) {
+          vy = 0;
+          key -= 1;
+        }
+        if (e.which === 83) {
+          vy = 0;
+          key -= 1;
+        }
+        if (e.which === 68) {
+          vx = 0;
+          key -= 1;
+        }
+        if (e.which === 65) {
+          vx = 0;
+          key -= 1;
+        }
+        key = key > 0 ? key : 0; 
+      });
+
+    // Cargamos variables
+    var Container = PIXI.Container,
+      autoDetectRenderer = PIXI.autoDetectRenderer,
+      loader = PIXI.loader,
+      resources = PIXI.loader.resources,
+      Sprite = PIXI.Sprite,
+      responsiveScale = 1,
+      maxFrame = 7,
+      af = 0,
+      df = 5, // Imagenes por segundo            
+      stop = true,
+      msg = {},
+      touch;
+
+    scale = map.player.scale;
+
+    // Creamos el render (Esto lo cambiare)
+    var renderer = autoDetectRenderer(wx, wy);
+
+    // Lo añadimos
+    document.body.appendChild(renderer.view);
+
+    // Creamos la stage y le añadimos los eventos del raton
+    var stage = new Container();
+
+    stage.scale.set(wx < 1000 ? 0.5 : 1);
+
+    stage.interactive = true;
+    stage.on('mousedown', clickdown)
+      .on('mouseup', clickup)
+      .on('mouseupoutside', clickup)
+      .on('touchstart', clickdown)
+      .on('touchend', clickup)
+      .on('touchendoutside', clickup);
+
+    // Eventos del raton    
+    function clickdown(e) {
+      af = 0;
+      state = "attack";
+      if (is_touch_device()) {
+        touch = e.data.global;
+      }
+    }
+
+    function clickup(e) {
+      af = 0;
+      state = "run";
+    }
+
+    // Caragmos, cetramos y añadimos el fondo.
+    var landscapeTexture = PIXI.Texture.fromImage(map.background.url),
+      texture = new PIXI.Texture(landscapeTexture),
+      background = new PIXI.Sprite(texture);
+
+    bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
+    by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
+    background.position.x = bx;
+    background.position.y = by;
+    stage.addChild(background);
+
+    // Caragmos, cetramos y añadimos el frente.
+    if (map.front) {
+      var landscapeTexture2 = PIXI.Texture.fromImage(map.front.url),
+        texture2 = new PIXI.Texture(landscapeTexture2),
+        front = new PIXI.Sprite(texture2);
+
+      front.position.x = bx;
+      front.position.y = by;
+    }
+
+
+    //Ptexture = new PIXI.Texture(PlandscapeTexture);
+
+    // Caragmos y cetramos los objetos.
+    map.objects.map(function (element) {
+      element.landscapeTexture = PIXI.Texture.fromImage(element.url);
+      element.texture = new PIXI.Texture(element.landscapeTexture);
+      element.item = new PIXI.Sprite(element.texture);
+      element.item.position.x = bx;
+      element.item.position.y = by;
+    });
+
+    // Renderizamos la stage
+    renderer.render(stage);
+    renderer.view.style.position = "absolute";
+    renderer.view.style.display = "block";
+    renderer.autoResize = true;
+    renderer.resize(window.innerWidth, window.innerHeight);
+    loader.add("player", map.player.url).load(setup);
+
+    // Creamos marcador. Primero el estilo del texto depues el objeto, lo pocicionamos y lo agregamos.
+    var scoreStyle = new PIXI.TextStyle({
+      fontFamily: 'komtit',
+      fontSize: 36,
+      fill: ['#FFF1E1', '#FFF1E1'], // gradient
+      stroke: '#35130B',
+      strokeThickness: 10,
+      dropShadow: true,
+      dropShadowColor: '#724833',
+      dropShadowBlur: 4,
+      dropShadowAngle: Math.PI / 2,
+      dropShadowDistance: 3,
+      wordWrap: false,
+      wordWrapWidth: 440,
+      padding: 20
+    });
+
+    var scoreText = new PIXI.Text('Score: ', scoreStyle);
+    scoreText.x = 30;
+    scoreText.y = 20;
+
+    stage.addChild(scoreText);
+
+    var heartTexture = PIXI.Texture.fromImage('/img/gui/heart.png');
+
+    var heartTilingSprite = new PIXI.extras.TilingSprite(
+      heartTexture,
+      44 * lives,
+      37
+    );
+    heartTilingSprite.x = 35;
+    heartTilingSprite.y = 80;
+    heartTilingSprite.scale.set(0.75);
+    stage.addChild(heartTilingSprite);
+
+    // Cargamos el juegador
+    var player,
+      playerTexture,
+      playersName,
+      playersNameStyle;
+
+    function setup() {
+      playersNameStyle = new PIXI.TextStyle({
+        fontFamily: 'komtit',
+        fontSize: 24,
+        fill: ['#FFF1E1', '#FFF1E1'], // gradient
+        stroke: '#35130B',
+        strokeThickness: 5,
+        dropShadow: true,
+        dropShadowColor: '#724833',
+        dropShadowBlur: 4,
+        dropShadowAngle: Math.PI / 2,
+        dropShadowDistance: 1,
+        wordWrap: false,
+        wordWrapWidth: 440,
+        padding: 20
+      });
+      playersName = new PIXI.Text(userName, playersNameStyle);
+
+      playerTexture = loader.resources["player"].texture;
+      playerTexture.frame = map.player.sprite[state][direction][0];
+      player = new Sprite(playerTexture);
+      player.scale.set(scale);
+      player.x = window.innerWidth / scaleDivisor;
+      player.y = window.innerHeight / scaleDivisor;
+
+      playersName.scale.set(scale / map.player.scale);
+      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
+      playersName.y = player.y - (player.height / 6);
+
+
+      stage.addChild(player);
+      stage.addChild(playersName);
+      renderer.render(stage);
+      // Comienza el loop
+      gameLoop();
+      refreshScore();
+    }
+
+    function gameLoop() {
+      // Empieza el loop y carga las varibles
+      var mouse;
+      if (is_touch_device()) {
+        mouse = touch ? touch : {
+          x: 0,
+          y: 0
+        };
+      } else {
+        mouse = renderer.plugins.interaction.mouse.global;
+      }
+
+      // Cargamos la direcion del sprite y aplicamos los ajustes
+      direction = getDirection(mouse, wx, wy);
+
+      if (direction == "up" || direction == "down") {
+        maxFrame = 8;
+        df = 5;
+      }
+      if (direction == "left" || direction == "right") {
+        maxFrame = 6;
+        df = 8;
+      }
+
+      // Vemos que el personaje no tenga el raton encima (Parado)
+      if (player) {
+        if (mouse.y > wy2 - (player.height / 2) && mouse.y < wy2 + (player.height / 2) &&
+          mouse.x > wx2 - (player.width / 2) && mouse.x < wx2 + (player.width / 2)) {
+          if (state != "attack") {
+            state = "stop";
+          }
+          stop = true;
+        } else {
+          if (state != "attack") {
+            state = "run";
+          }
+          stop = false;
+        }
+      }
+
+      if (key == 0) {
+        if (stop == false) {
+          var px = percent(mouse.x, wx) - 50,
+            py = percent(mouse.y, wy) - 50;
+
+          vx = (px < 0 ? (px < -25 ? -115 : px * 3) : (px > 25 ? 115 : px * 3)) * -1,
+          vy = (py < 0 ? (py < -25 ? -115 : py * 3) : (py > 25 ? 115 : py * 3)) * -1;
+        } else {          
+          vx = 0,
+          vy = 0;
+        }
+      }
+
+      background.position.x = (bx) - position.x;
+      background.position.y = (by) - position.y;
+
+      
+      if (map.front) {
+        front.position.x = bx - position.x;
+        front.position.y = by - position.y;
+      }
+
+      map.objects.map(function (element) {
+        element.item.position.x = bx - position.x + element.x;
+        element.item.position.y = by - position.y + element.y;
+      });
+      
+
+      //Mandamos pocisicon al server;
+      msg = userName + ` {"vx":${ vx ? vx : 0 },"vy":${ vy ? vy : 0} ,"state": "${state}", "direction":"${direction}", "width":"${player.width}", "height":"${player.height}" } `;
+      session.send(msg);
+
+      // Ajusta el fotograma
+      if (af >= maxFrame) {
+        af = 0;
+      } else {
+        af += 1 / df;
+      }
+
+      // Aplica el foto grama
+      if (playerTexture) {
+        playerTexture.frame = map.player.sprite[state][direction][Math.floor(af)] ? map.player.sprite[state][direction][Math.floor(af)] : map.player.sprite[state][direction][0];
+      }
+
+      // Borramos todos los obejetos de la pantalla
+      stage.removeChild(player);
+      stage.removeChild(playersName);
+      
+      map.objects.map(function (element) {
+        stage.removeChild(element.item);
+      });
+      
+      jQuery.each(map.players, function (i, element) {
+        if (element.item) {
+          stage.removeChild(element.item);
+          stage.removeChild(element.name);
+        }
+      });
+      
+      if (map.front) {
+        stage.removeChild(front);
+      }
+
+      stage.removeChild(heartTilingSprite);
+      stage.removeChild(scoreText);
+
+      // Calculamos la posicion del jugador      
+      player.scale.set(scale);
+      player.x = (wx / scaleDivisor) - ((player.width / scaleDivisor) / zoom);
+      player.y = (wy / scaleDivisor) - ((player.height / scaleDivisor) / zoom);
+
+      playersName.scale.set(scale / map.player.scale);
+      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
+      playersName.y = player.y - (player.height / 6);
+
+      // Dibujamos los objetos
+      map.objects.map(function (element, key) {
+        if (position.y > element.yv && position.x > element.xv) {
+          stage.addChild(element.item);
+        }
+      });
+      
+      var paintedPlayer = false;
+      if (map.players) {
+        Object.values(map.players).sort(comparePlayer).map(function (element) {
+          if (element.position.y > position.y && !paintedPlayer) {
+            stage.addChild(player);
+            stage.addChild(playersName);
+            paintedPlayer = true;
+          }
+          if (!element.deleted) {
+            try {
+              element.item.scale.set(element.scale);
+              element.texture.frame = map.player.sprite[element.state][element.direction][Math.floor(af)] ? map.player.sprite[element.state][element.direction][Math.floor(af)] : map.player.sprite[element.state][element.direction][0];
+              element.item.position.x = (wx / scaleDivisor) - position.x + (element.position.x - (element.item.width / 2));
+              element.item.position.y = (wy / scaleDivisor) - position.y + (element.position.y - (element.item.height / 2));
+              element.name.scale.set(element.scale / map.player.scale);
+              element.name.x = element.item.position.x + (element.item.width / 2) - (element.name.width / 2);
+              element.name.y = element.item.position.y - (element.item.height / 6);
+              stage.addChild(element.item);
+              stage.addChild(element.name);
+            }
+            catch(error) {
+              console.error(error);              
+            }
+            
+          } else {
+            delete element.item;
+            delete element.name;
+          }
+        });
+      }
+
+      if (!paintedPlayer) {
+        stage.addChild(player);
+        stage.addChild(playersName);
+      }
+
+      if (map.front) {
+        stage.addChild(front);
+      }
+
+      //Actualizamos el marcador.
+      scoreText.text = 'Score: ' + score + '\n';
+      heartTilingSprite.width = 44 * lives;
+      stage.addChild(heartTilingSprite);
+      stage.addChild(scoreText);
+
+      // Lo renderizamos y mandamos la proxima llamada del bucle.
+      stage.scale.set(stateScale);
+      renderer.render(stage);
+      requestAnimationFrame(gameLoop);
+    }
+
+    window.onresize = function (event) {
+      setTimeout(function () {
+        wx = window.innerWidth;
+        wy = window.innerHeight;
+        wx2 = window.innerWidth / 2;
+        wy2 = window.innerHeight / 2;
+        bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
+        by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
+
+        stateScale = wx < 1000 ? 0.5 : 1;
+        zoom = wx < 1000 ? 2 : 1;
+        scaleDivisor = wx < 1000 ? 1 : 2;
+
+        renderer.resize(wx, wy);
+        window.onresize();
+      });
+    }
+
+    $("#chatInput").css({
+      "font-family": 'oswald'
+    });
+
+  });
+}