javascript - 如何将外部 JS 文件导入另一个 JS 文件？

Question

我目前正在尝试设计我的第一个 2D 游戏，并且正在尝试尽可能地清理我的语法。以下是当前有效的整个脚本。

这是我的问题!

我需要将这个文件分解成可管理的 block ，并将它们导入到一个主文件中，该主文件将包含在 html 的 head 标记中。我对 ES6 做了一些研究，似乎还没有完全支持它。

我是否可以将这个脚本分解成可管理的部分，将它们包含在一个由网页调用的主文件中，同时保持当前功能？

此外，我知道我可以在网页上调用多个 js 文件，但我只会按照当前脚本运行的顺序调用多个文件——这对我来说似乎不是解决方案。

p>

欢迎任何帮助!如果您有建议让这里的某些东西运行得更好——请采纳!我只要求您在这样做时为我提供一个示例 - 这样对我来说更容易。

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;
}

Answer 1

ES6 import

文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

您有 3 个真正的选项来获取 ES6 import在浏览器中工作。虽然有像 Grunt 或 Gulp 这样的老式任务运行器可以解决这个问题，但随着人们越来越多地使用像 Webpack(选项 #1)这样的模块打包器，它们中的大多数正在被淘汰。

以下是这些选项:

1。网页包

我建议使用像 Webpack 这样的模块打包器将 ES6 编译成 Common JS。

Webpack 网站链接:https://webpack.js.org/

您可以使用像 Webpack Dev Server 这样的任务运行器让 Webpack 监视您的文件是否有更改并在必要时编译它们。您甚至可以让它在本地计算机上的浏览器中的某个端口(例如 http://localhost:3000/)上监听。

Webpack 开发服务器:https://github.com/webpack/webpack-dev-server

2。 ES6 模块

这有点新技术，我把它放在这里只是因为其他人说他们可以使用它。我自己从来没有真正使用过它。显然，您可以通过 <script type="module" src="main.js"></script> 在浏览器中直接使用 ES6 .完成后，您可以使用 ES6 import直接在main.js .

我可以使用(ES6 模块)吗？:https://caniuse.com/#feat=es6-module

这是一个例子:http://plnkr.co/edit/Jqbu07cd9bFFTMtVrz5c?p=preview

3。通天塔

或者，您可以使用 Babel 将 ES6 编译成 Common JS。 Babel 会将 ES6 编译成 Common JS，但它需要一个任务运行器来自动化该过程。

虽然有像babel-watch这样的第三方包，我以前从未使用过它们，所以我不能说它们是否有效。 Webpack Dev Server 通过在您在 Webpack 配置文件 (Webpack.config.js) 中指定的任何端口上运行类似 NodeJs 的服务器来简化此操作。将 ES6 编译成 Common JS 后，您可以在任何普通服务器(例如 XAMP)上运行它，但我建议使用 Webpack 中的 Webpack-dev-server 包。

Babel 网站:https://babeljs.io/

您可以直接从命令行使用 npm install --g babel-cli 执行此操作

使用 babel [insertFilenameHere.ext]