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
).
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:
<input type="text">
<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.