Lindsey
Reputation: 41
How to import external JS files into another JS file?
I am currently trying to design my first 2D game, and am trying to clean up my syntax as much as possible. Below is the entire script that currently works.
Here is my problem!
I need to break this file up into manageable chunks and import them into a single main file that will be included in the head tag of the html. I did some research on ES6 and it seems this isn't entirely supported yet.
Is there anyway for me to break this script up into manageable pieces, include them in one main file that gets called by the webpage while keeping the current functionality?
Also, I am aware I could call multiple js files on the webpage but then I would just be calling multiple files to in the order the current script I have runs--doesn't seem like a solution to me.
Any and all help welcome! If you have a suggestion to make something here run better--please do! I just ask you include an example for me when you do -- it's easier for me that way.
window.addEventListener("keydown", moveSomething, false);
//globals
var terrainLayer;
var playerLayer;
var terrainContext;
var playerContext;
var player = new Image();
player.src = "player.jpg";
var viewportWidth;
var viewportHeight;
var canvasWidth;
var canvasHeight;
var collisionID = [];
var interactID = [];
var tileSize = 32; // The size of a tile (32×32)
var playerRendered = false;
window.onload = window.onresize = function() {
////////////////////////////////////////////////////////
//window.onload = window.onresize = function() {
//canvas sizing resizing
////////////////////////////////////////////////////////
terrainLayer = document.getElementById('terrainLayer');
playerLayer = document.getElementById('playerLayer');
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
////////////////////////////////////////////////////////
//canvasWidth = (viewportWidth * .85);
//canvasHeight = (viewportHeight * .85);
//canvasWidth = (canvasWidth / (tileSize)) | 0; /////
//canvasWidth *= tileSize;
//canvasHeight = (canvasHeight / tileSize) | 0; /////
//canvasHeight *= tileSize;
//scales canvas based on current browser window size
////////////////////////////////////////////////////////
canvasWidth = 960;
canvasHeight = canvasWidth / 2;
terrainLayer.style.position = "absolute";
terrainLayer.setAttribute("width", canvasWidth);
terrainLayer.setAttribute("height", canvasHeight);
terrainLayer.style.top = (viewportHeight - canvasHeight) / 2 + "px";
terrainLayer.style.left = (viewportWidth - canvasWidth) / 2 + "px";
terrainContext = terrainLayer.getContext("2d");
playerLayer.style.position = "absolute";
playerLayer.setAttribute("width", canvasWidth);
playerLayer.setAttribute("height", canvasHeight);
playerLayer.style.top = (viewportHeight - canvasHeight) / 2 + "px";
playerLayer.style.left = (viewportWidth - canvasWidth) / 2 + "px";
playerContext = playerLayer.getContext("2d");
renderTerrain();
if (playerRendered !== true){
renderPlayer(0, 0);
playerRendered = true;
}else{
renderPlayer(player.xPos, player.yPos);
}
};
function renderPlayer(x, y) {
//player rendering
player.xPos = x;
player.yPos = y;
playerContext.clearRect(0, 0, canvasWidth, canvasHeight);
player.onload = playerContext.drawImage
(player,
0,
0,
246,
246,
player.xPos,
player.yPos,
tileSize,
tileSize);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//dynamic resizing of player icon
//player.onload = playerContext.drawImage(player, player.xPos, player.yPos, (canvasWidth * 0.05), (canvasHeight * 0.1));
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
};
function renderTerrain () {
var layer_One = [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79];
var layer_Two = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 138, 139, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var layer_Three = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 229, 230, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 245, 246, 247, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var layer_Collision = [0, 0, 0, 0, 0, 0, 0, 81, 82, 0, 84, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 97, 98, 0, 100, 101, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 252, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 252, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 252, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 252, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 239, 240, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 256, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var layer_Interactive = [0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 168, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 168, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 168, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 239, 240, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 256, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var tilesPerRow = 30; // how many tiles per row to be rendered on canvas
function listToMatrix(list, elementsPerSubArray) {
var matrix = [], i, k;
for (i = 0, k = -1; i < list.length; i++) {
if (i % elementsPerSubArray === 0) {
k++;
matrix[k] = [];
}
if (list[i] >= 1)
{
list[i] = list[i] - 1;
}
matrix[k].push(list[i]);
}
return matrix;
}
var layerOne = listToMatrix(layer_One, tilesPerRow);
var layerTwo = listToMatrix(layer_Two, tilesPerRow);
var layerThree = listToMatrix(layer_Three, tilesPerRow);
var collisionLayer = listToMatrix(layer_Collision, tilesPerRow);
var interactiveLayer = listToMatrix(layer_Interactive, tilesPerRow);
//render layers as terrain
var tilesetImage = new Image();
tilesetImage.src = 'tileset.png';
tilesetImage.onload = drawTile;
var rowTileCount = 15; // The number of tiles in a row of our background
var colTileCount = 30; // The number of tiles in a column of our background
var imageNumTiles = 16; // The number of tiles per row in the tileset image
function drawTile() {
for (var r = 0; r < rowTileCount; r++) {
for (var c = 0; c < colTileCount; c++) {
var tileA = layerOne[ r ][ c ];
var tileRow = (tileA / imageNumTiles) | 0; // Bitwise OR operation
var tileCol = (tileA % imageNumTiles) | 0;
terrainContext.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
tileB = layerTwo[ r ][ c ];
tileRow = (tileB / imageNumTiles) | 0;
tileCol = (tileB % imageNumTiles) | 0;
terrainContext.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
tileC = layerThree[ r ][ c ];
tileRow = (tileC / imageNumTiles) | 0;
tileCol = (tileC % imageNumTiles) | 0;
terrainContext.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
cTile = collisionLayer[ r ][ c ]; // collision layer
tileRow = (cTile / imageNumTiles) | 0;
tileCol = (cTile % imageNumTiles) | 0;
if (cTile > 0) // detecting objects on collision layer
{
var xD = (c * tileSize);
var yD = (r * tileSize);
xD = xD.toString();
yD = yD.toString();
aID = xD.concat(yD);
bID = parseInt(aID);
collisionID.push(bID);
}
terrainContext.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
iTile = interactiveLayer[ r ][ c ]; // interactive layer
tileRow = (iTile / imageNumTiles) | 0;
tileCol = (iTile % imageNumTiles) | 0;
if (iTile > 0) // detecting objects on interactive layer
{
var xD = (c * tileSize);
var yD = (r * tileSize);
xD = xD.toString();
yD = yD.toString();
aID = xD.concat(yD);
bID = parseInt(aID);
interactID.push(bID);
}
terrainContext.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
}
}
}
}
function moveSomething(e) {
var x;
var y;
switch(e.keyCode) {
case 37: //left
x = player.xPos - 32;
y = player.yPos;
if (trumpsWall(x, y) === false) {
if (collisionTile(x, y) === false){
renderPlayer(x, y);
}
}
if(interactiveTile(x, y) === true){
alert("INTERACTION!");
}
break;
case 38: //up
x = player.xPos;
y = player.yPos - 32;
if (trumpsWall(x, y) === false) {
if (collisionTile(x, y) === false){
renderPlayer(x, y);
}
}
if(interactiveTile(x, y) === true){
alert("INTERACTION!");
}
break;
case 39: //right
x = player.xPos + 32;
y = player.yPos;
if (trumpsWall(x, y) === false) {
if (collisionTile(x, y) === false){
renderPlayer(x, y);
}
}
if(interactiveTile(x, y) === true){
alert("INTERACTION!");
}
break;
case 40: // down
x = player.xPos;
y = player.yPos + 32;
if (trumpsWall(x, y) === false) {
if (collisionTile(x, y) === false){
renderPlayer(x, y);
}
}
if(interactiveTile(x, y) === true){
alert("INTERACTION!");
}
break;
}
}
function trumpsWall(x, y) {
var border = false;
if ((x < 0) || (y < 0)){
border = true;
}
if ((x > (terrainLayer.width - 32)) || (y > (terrainLayer.height - 32))) {
border = true;
}
return border;
}
function interactiveTile(xPos, yPos, interacts = false) {
xx = xPos.toString();
yy = yPos.toString();
intID = xx.concat(yy);
playerCoordinatesID = parseInt(intID);
for (var i = 0; i < (interactID.length); i++) {
if (playerCoordinatesID === interactID[i]) {
interacts = true;
break;
}
}
return interacts;
}
function collisionTile(xPos, yPos, collides = false) {
xx = xPos.toString();
yy = yPos.toString();
intID = xx.concat(yy);
playerCoordinatesID = parseInt(intID);
for (var i = 0; i < (collisionID.length); i++) {
if (playerCoordinatesID === collisionID[i]) {
collides = true;
break;
}
}
return collides;
}
Upvotes: 4
Views: 4223
Answers (1)
imgnx
Reputation: 789
ES6 import
Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
You have 3 real options for getting ES6 import to work in a browser. While there are older task runners like Grunt or Gulp that would work for this, most of them are being phased out as people are using module bundlers like Webpack (Option #1) more and more.
Here are those options:
1. Webpack
I suggest using a module bundler like Webpack to compile ES6 into Common JS.
Link to Webpack website: https://webpack.js.org/
You can use a task runner like the Webpack Dev Server to have Webpack watch your files for changes and compile them as necessary. You can even have it listen on a certain port within your browser (like http://localhost:3000/ for example) on your local machine.
Webpack Dev Server: https://github.com/webpack/webpack-dev-server
2. ES6 Modules
This is somewhat new technology and I only put this in here because someone else said they got it to work. I've never actually used it myself. Evidently, you can use ES6 directly in your browser with <script type="module" src="main.js"></script>. Once that is complete, you can use ES6 import directly in main.js.
Can I Use (ES6 Modules)?: https://caniuse.com/#feat=es6-module
Here's an example: http://plnkr.co/edit/Jqbu07cd9bFFTMtVrz5c?p=preview
3. Babel
Alternatively, you could use Babel to compile your ES6 into Common JS. Babel will compile ES6 into Common JS but it requires a task runner in order to automate that process.
While there are third party packages like babel-watch, I've never used them before and so I cannot say whether or not they work. Webpack Dev Server simplifies this by running a NodeJs-like server on whatever port you specify in the Webpack configuration file (Webpack.config.js). Once the ES6 is compiled into Common JS, you can run it on any plain server (like XAMP for example) but I suggest using the Webpack-dev-server package from Webpack.
Babel website: https://babeljs.io/
You can do it right from the command line with npm install --g babel-cli
Use babel [insertFilenameHere.ext]
Upvotes: 2
Related Questions
- Import JavaScript file by embedding with another js file
- HTML: using external .js file with import statements
- Import functions from another js file. Javascript
- How to import javascript file in other javascript file?
- Importing constans from one JavaScript file to another one
- How to import a js file inside another js file just like how we import css file inside another css file
- JScript: import js files
- Importing external js file in html
- Import a Javascript file into another Javascript file
- Including external js files in a js file