Call Another JavaScript File Directly?

Question

NOTE: The other answers don't seem to work because I am not looking to just import or use a function from another file.

I need to know if there's any way I can put in something anywhere that tells another JS file to run. And the whole file.

I'm new to JavaScript and I'm trying to avoid things like NodeJS and jQuery so that I have a better understanding of JS, so I've tried making some simple programs.

I made a little game, but I want to put in another level. I tried making it so that once the collision is detected in a certain area, it will set a boolean that determines if the level is still running to false. Then I made a while loop that says that if it's on true, it updates the game. The problem is that this can't work as I've learned from other questions on this site. It crashes the whole thing. So I thought that if I can go back to my old game loop but put the other level in the file, I could call that file and have it basically be a separate game.

TL;DR: I need to know how to stop running one file and move onto another in JS, or at least redirect the user to a separate URL so that I can put the level in a separate site.

Possible duplicate of [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — NielsNet, Aug 03 '18 at 16:26
I think your understanding of javascript is insufficient. You don't run a file, as is, you call a function from another file, maybe. It would help if you would take more time describing the problem, and creating a [minimal, complete and verifiable](https://stackoverflow.com/help/mcve) example. Welcome to StackOverflow — vanntile, Aug 03 '18 at 16:37
@VannTileIanito been on the site for a while just don't ask questions or post answers often. Of course my understanding is insufficient I just started learning and was only asking for help. What I meant for the most part is what NielsNet got out of it. — Knot Snappy, Aug 03 '18 at 16:44

score 0 · Answer 1 · answered Aug 04 '18 at 04:22

I am going to read into your question a little bit to give you what I believe to be a better answer. Essentially, you want to change the level a player is on by loading in a new .js file and stopping the use of another.

Multiple files become 'one big file' to the interpreter meaning that putting your levels into separate files is for organizational purposes only - unless you have multiple pages that each use a different 'level.js' file.

You haven't posted any code, so I can't really give you an example tailored to you, but I'll give a general one instead.

The easiest (but worst) practice would be to redirect the player to 'level2.html.' I did this when I first started programming games, so it should be fine for your learning purposes.

if (gameOn == false) {
  location.href = "level2.html";
}

Then in level2.html you have a different <script> that runs level 2 along with all of your other game code.

The best (but more difficult) way to do this would be to replace whatever data structure you have that dictates the level with a new one.

Ex: If you have an array that stores a bunch of gameObjects, you could replace that with a 'level2' array.

Feel free to ask any questions.

Nolo · Answer 2 · 2018-10-21T16:00:37.840

You may be interested in import and export.

This is a big subject, but to sum it up you need three basic things:

a script tag that references the entry point of your program, typically index.js, which should specifically have a type="module" property like <script type="module" src="./index.js"></script>
the main entry point script/module itself, like index.js, which should have one or more import statement(s)
one or more files to import into your main module like level1.js, level2.js, etc.

All together it may look something like this:

// html
<script type="module" src="./index.js"></script>

(see note 1)

// index.js
// do all game stuff here
import level1 from './level1.js';
import level2 from './level2.js';
// etc.

...

// do something with level1, level2, etc.

// level1.js
export default {
    someList: [], // ?
    someProperties: {}, // ?
}

// OR ( but be sure there's only one export statement )
export default function () {
    // do it, run the level!
}

Notes

I used the relative path ./ to refer to the current folder where everything is. I have seen examples that only contain a forward slash, no dot, but I know that this does not work in Chrome, and I doubt that the dot hurts in other browsers. This also means you can have a folder structure, for example:
```
game
  -> images
  -> js
    -> source
      index.js
    -> levels
      level1.js
  -> css
```
and refer to a level from index.jslike ../levels/level1.js

Call Another JavaScript File Directly?

2 Answers2

Notes