4

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;
}
Improve this question
2
  • 3
    Use webpack, that's exactly the sort of thing it's designed for. See medium.com/the-node-js-collection/… Commented May 14, 2018 at 0:57
  • ^ I second this. The Webpack Dev Server will work just fine. Commented May 16, 2018 at 1:33

1 Answer 1

Reset to default
2

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]

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Still get the following error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I actually took your example, downloaded it, ran it --no error--but it didn't work either... Uploaded to server and executed and got the following error: "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."
@Lindsey try using the Webpack Dev Server from Webpack: github.com/webpack/webpack-dev-server. There was actually someone who commented on my original answer with that little part about using ES6 directly in the browser. While you can use Babel to compile ES6 into Common JS, the Webpack Dev Server is a task runner that watches for changes in files and compiles them into the output file (usually called bundle.js). You will need to configure Webpack to work with the Webpack Dev Server if you chose to go that route. Otherwise, Babel CLI works great if you don't need automation.
The example probably works on a NodeJS server but it's not my code and that's probably beyond the scope of what we're trying to do here. :) You don't need Node since the game you are writing uses the canvas element. Should you desire to use a UI framework like React, for example, to make a website that "embodies" the game, then you could use a NodeJS server but it's not completely necessary. NodeJS is build for REST-like routing and allowing the user to "paint the DOM" as I call it. But if you're just trying to get a game to work in your browser, you don't need it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.