Activitats

Si se cerca a Google sobre els arguments de Node.js per a la línia d’ordres es troba fàcilment que la propietat process.argv (www.goo.gl/wsbXZN) és la que dona accés als arguments.

Es tracta d’un array en el qual el primer element és la ruta d’execució de node, el segon la ruta d’execució del programa i els següents (des de l’índex 2 en endavant) corresponen als arguments.

Per poder desar dades cal utilitzar el mòdul fs (file system) i el codi generat serà el següent (el nom del fitxer amb el codi és activitat1.js):

let fs = require ('fs');
 
let primerArgument = process.argv[2];
 
fs.appendFile('activitat1.txt', primerArgument, function(error) {
	let missatge;
 
    if (error) {
    	throw error; // No continuarà l'execució
    }
 
    console.log('Dades afegides al fitxer correctament: ' + primerArgument);
});

Per comprovar-ne el funcionament s’ha de posar a la línia d’ordres: node activitat1.js “Hola món” i s’afegirà Hola món al fitxer activitat1.txt.

Un dels mòduls que permeten convertir objectes a format XML és data2xml. El podeu trobar a l’enllaç següent: www.npmjs.com/package/data2xml.

Per instal·lar-lo s’ha de posar a la línia d’ordres npm install data2xml (és possible que es mostrin missatges d’avís per no haver generat un fitxer package.json per a l’aplicació).

El codi de l’aplicació serà el següent:

let data2xml = require('data2xml');
let convert = data2xml();
 
let alumne = {
  nom: "Maria",
  cognom: "Campmany",
  assignatures: ["m01", "m03b", "m02"]
}
 
console.log (convert('alumne', alumne));

I el resultat en executar l’aplicació és el que trobeu a continuació (s’ha afegit el sagnat):

<?xml version="1.0" encoding="utf-8"?>
<alumne>
  <nom>Maria</nom>
  <cognom>Campmany</cognom>
  <assignatures>m01</assignatures>
  <assignatures>m03b</assignatures>
  <assignatures>m02</assignatures>
</alumne>

1. Entreu a la pàgina següent: www.barcelonadadescultura.bcn.cat/dades-obertes.
2. Feu clic sobre l’enllaç al document XML que conté la informació del catàleg: www.dades.eicub.net/doc.
3. Cerqueu museus al document i comproveu els diversos conjunts de dades. Només n’hi ha un que inclou la latitud i la longitud: museusexposicions-inventari, que es pot consultar a l’URL següent: www.dades.eicub.net/api/1/museusexposicions-inventari.
4. Per filtrar el resultat per districte cal que afegiu el paràmetre Districte amb el valor que volem filtrar.
5. Per conèixer el valor correcte pel districte de l’Eixample només cal que visiteu el llistat complet i feu una cerca per Eixample. El codi que trobareu és 02. Eixample.

Així doncs, l’URL per realitzar la consulta és el següent: www.dades.eicub.net/api/1/museusexposicions-inventari?Districte=02.%20Eixample (fixeu-vos que s’ha codificat l’URL i s’ha reemplaçat l’espai per %20).

Un dels pocs motor de jocs per generar continguts WebXR és PlayCanvas (www.playcanvas.com). Entre els motors que utilitzen WebGL el més popular és Construct (www.construct.net).

• Gràfics: tots dos funcionen amb WebGL i permeten crear tant contingut en 2D com 3D.
• Documentació: al lloc web de PlayCanvas és pot trobar molta informació, però hi ha pocs recursos externs; en canvi, per a Construct es poden trobar centenars de tutorials al seu lloc web.
• Comunitat: la comunitat de PlayCanvas és petita i no es troba pràcticament cap contingut fora del seu lloc web; en canvi, per a Construct es poden trobar centenars de vídeos tutorials a YouTube.
• Opcions multijugador: la documentació sobre aquest aspecte a PlayCanvas és molt poca i només indica que s’ha de fer servir un servidor implementat amb Node.js. Construct ofereix les opcions multijugador només als usuaris amb llicència de pagament però inclou tutorials i exemples de jocs, a més d’una biblioteca de xarxa més avançada.
• Altres: Construct permet desenvolupar jocs amb uns coneixements de programació més reduïts. PlayCanvas ofereix un editor en línia, de manera que no cal descarregar cap programari; es treballa directament sobre la web, els jocs generats tenen un pes molt més reduït i afirmen estar molt optimitzats, de manera que s’aconsegueix una més fluïdesa.

En conclusió, es pot determinar que amb Construct és molt més fàcil desenvolupar jocs i trobar tot tipus d’informació. Per altra banda, PlayCanvas requereix uns coneixements més avançats però permet utilitzar una tecnologia que no està a l’abast de molts dels altres (WebXR) i produir jocs més optimitzats.

Per afegir un nivell nou s’ha d’afegir l’estructura de dades al final del fitxer level-data.json. Fixeu-vos que ha de quedar dins de l’array levels.

El codi per generar el nivell indicat (que s’ha d’afegir al fitxer) és el següent:

{
  "name": "Nivell 4",
  "description": "Aquest és el quart nivell del joc.",
  "music": "star-commander",
  "background": {
    "layers": [
      {
        "id": "bg_layer_1_green",
        "speed": {
          "x": -120,
          "y": 0
        }
      },
      {
        "id": "bg_layer_2",
        "speed": {
          "x": -240,
          "y": 0
        }
      },
      {
        "id": "bg_layer_3_green",
        "speed": {
          "x": -480,
          "y": 0
        }
      },
      {
        "id": "bg_layer_4",
        "speed": {
          "x": -960,
          "y": 0
        }
      }
    ]
  },
  "waves": [
    {
      "distance": 200,
      "spawns": [
        {
          "type": "alien_a",
          "formation": {
            "type": "row",
            "amount": 5,
            "spacer": 50
          },
          "position": {
            "x": 1024,
            "y": 100
          },
          "speed": {
            "x": -120,
            "y": 0
          }
        }
      ]
    },
    {
      "distance": 400,
      "spawns": [
        {
          "type": "alien_b",
          "formation": {
            "type": "column",
            "amount": 5,
            "column_height": 1000,
            "spacer": 50
          },
          "position": {
            "x": 800,
            "y": -200
          },
          "speed": {
            "x": 0,
            "y": 120
          }
        }
      ]
    }
  ],
  "end": 600
}

Al fitxer ioc-invader, dintre de l’objecte gameEngineContructor es troba la funció spawnFormation(). Dintre del switch s’ha d’afegir el codi següent (abans de default:):

case "random":
  originPosition = {x: wave.position.x, y: wave.position.y};
  spacer = wave.formation.spacer;
 
  for (i = 0; i < wave.formation.amount; i++) {
    this.enemyPool.instantiate(wave.type, {
      x: originPosition.x + Math.random() * (spacer * 2) - spacer,
      y: originPosition.y + Math.random() * (spacer * 2) - spacer
    }, wave.speed);
  }
  break;

Per comprovar el funcionament de la nova formació podeu modificar el primer enemic que s’instancia en el lloc (en el fitxer level-data.json) per un codi similar al següent:

{
  "type": "alien_a",
  "formation": {
    "type": "random",
    "amount": 10,
    "spacer": 100
}

Per una banda s’ha de modificiar el mòdul InputManager per afegir-hi la nova tecla (Enter correspon al codi 13):

const KEY_CODES = {
    32: 'Space',
    37: 'ArrowLeft',
    38: 'ArrowUp',
    39: 'ArrowRight',
    40: 'ArrowDown',
    13: 'Enter'
};

El pas següent és implementar la funció specialAttack() dins de la classe Player al mòdul gameObjects. Però com que no hi ha cap manera d’obtenir una llista d’enemics actius, primer caldrà augmentar funcionalitat de la classe GameEngine afegint el mètode getActiveEnemies():

getActiveEnemies = function() {
  let enemies = this.enemyPool.pool.slice(0, this.enemyPool.actives);
  return enemies;
};

A continuació es pot afegir la funció specialAttack():

specialAttack(enemies) {
  for (let i=0; i<enemies.length; i++) {
    enemies[i].isDestroyed = true;
  }
}

Finalment cal afegir la importació del mòdul inputController i la detecció dins del mètode update() de la classe GameEngine per comprovar si s’ha pres Enter.

import {KEY_STATUS} from "./inputController.js";

update(gameTime) {
  window.requestAnimationFrame(this.update.bind(this));
 
    // Comprovem si ha passat suficient temps entre actualitzacions per limitar el nombre de
    // quadres per segon
    if (!this.isUpdateRequired(gameTime)) {
      return;
    }
 
    // Diferencia de temps entre quadres en ms
    let deltaTime = (gameTime - this.previousGameTime)/1000;
    this.previousGameTime = gameTime;
 
    // Detectem si s'ha pres la tecla enter i activem l'acció especial
    if (KEY_STATUS.Enter) {
      this.player.specialAttack(this.getActiveEnemies());
    }
 
  this.updateWaves();
  // resta del codi original ...
}

Podeu trobar el codi del joc IOC Invaders modificat amb la solució de les activitats a l’enllaç següent (branca SolucioActivitats): www.goo.gl/9p6Glt. També podeu descarregar-lo directament d’aquest material:

Cal tenir en compte que aquesta no és la millor solució, ja que la gestió de l’entrada de tecles s’hauria de gestionar a la classe Player, però en aquesta implementació no comptem amb cap mecanisme per accedir a la classe GameEngine directament des de Player, així que per simplificar hem optat per implementar-lo dins del mètode update() de la classe GameEngine.