1

Necesito ayuda al escribir un archivo de texto. Ya busqué tutoriales y demás pero no sé como implementarlos con lo que me está pasando.

Resulta que estoy creando un editor de mapas (usando ElectronJS) para mi librería de desarrollo de juegos en canvas. Pero al momento de exportar el mapa a un archivo .txt o .json (he probado con fs de node), no sé como implementarlo, debido a que el texto que quiero escribir está en otro archivo .js.

Mi idea es: (resumida algo mas clara)

  • Tengo un botón en un index.html.
  • Y quiero que en el el evento onclick de ese botón llame a una función que escriba un archivo de texto.

Pero no sé dónde poner esa función: ¿en el index.js que inicializa npm o en el game.js que acompaña al index.html en una carpeta llamada www?.

Para que quede un poco mas claro (soy medio malo redactando preguntas se ve), voy a dejar un pequeño esquema con los archivos y el código del index.js (que inicializa el npm) y el index.html (no se puede ejecutar ya que faltan algunos archivos como mi librería y el game.js).

Pequeño esquema acerca de los archivos

index.js

const {app, BrowserWindow} = require("electron")
const url = require("url")
const path = require("path")
const fs = require("fs")

app.on('ready', () => {
  var mainWindow = new BrowserWindow ({ 
    width: 1000,
    height: 700
  });
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "www/index.html"),
    protocol: "file",
    slashes: true
  }));
  mainWindow.setTop
});

index.html

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MDesigner 0.1 for Next-canvas</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body bgcolor="#19232d">
    <div style="float: right;">
      <br>
      <h3>Tilebox (max 64 tiles)</h3>
      <canvas style="background-color:black;" id="canvas" width=256 height=256>
      </canvas>
      <br>
      <br>
      <select multiple id="layers">
        <option value="layer1">Layer1</option>
        <option value="layer2">Layer2</option>
        <option value="layer3">Layer3</option>
      </select> 
      <br>
      <br>
      Name: &nbsp;
      <input type="text"> &nbsp;
      <input type="button" value="EXPORT">
    </div>
    <h1>Edit your own map!</h1>
    <canvas id ="viewport" style="float: left;background-color: black; border:2px solid black"></canvas>
    <script src="source.js"></script>
    <script src="next-canvas/next_canvas-audio.js"></script>
    <script src="next-canvas/next_canvas-random.js"></script>
    <script src="next-canvas/next_canvas-draw.js"></script>
    <script src="next-canvas/next_canvas-physics.js"></script>
    <script src="next-canvas/next_canvas.js"></script>
    <script src="game.js"></script>
    <script src="next-canvas/next_canvas-loop.js"></script>
  </body>
</html>

Perdón si no quedó claro, no he usado mucho StackOverflow y la verdad es que estoy medio confundido.

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.