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

我目前正试图设计我的第一个2D游戏，并试图尽可能地清理我的语法。下面是当前运行的整个脚本

这是我的问题

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

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

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

欢迎大家帮忙！如果你有一个建议，让这里的东西运行得更好——请这样做！我只是要求你给我举个例子，这样对我来说更容易

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

window.addEventListener（“向下键”，moveSomething，false）；
//全球的
var terrainLayer；
var玩家层；
文本变量；
var playerContext；
var player=新图像（）；
player.src=“player.jpg”；
变量视口宽度；
变量视口高度；
var画布宽度；
var画布高度；
var-collisionID=[]；
var interactipid=[]；
变量tileSize=32；//瓷砖的大小（32×32）
var playerrended=false；
window.onload=window.onresize=function（）{
////////////////////////////////////////////////////////
//window.onload=window.onresize=function（）{
//帆布尺寸调整
////////////////////////////////////////////////////////
terrainLayer=document.getElementById（'terrainLayer'）；
playerLayer=document.getElementById（'playerLayer'）；
viewportWidth=window.innerWidth；
视口高度=window.innerHeight；
////////////////////////////////////////////////////////
//画布宽度=（视口宽度*.85）；
//画布高度=（视口高度*.85）；
//画布宽度=（画布宽度/（瓷砖尺寸））| 0/////
//画布宽度*=瓷砖尺寸；
//画布高度=（画布高度/瓷砖大小）| 0/////
//画布高度*=瓷砖尺寸；
//根据当前浏览器窗口大小缩放画布
////////////////////////////////////////////////////////
画布宽度=960；
画布高度=画布宽度/2；
terrainLayer.style.position=“绝对”；
setAttribute（“宽度”，画布宽度）；
terrainLayer.setAttribute（“高度”，画布高度）；
terrainLayer.style.top=（视口高度-画布高度）/2+“px”；
terrainLayer.style.left=（viewportWidth-canvasWidth）/2+“px”；
terrainContext=terrainLayer.getContext（“2d”）；
playerLayer.style.position=“绝对”；
playerLayer.setAttribute（“宽度”，画布宽度）；
playerLayer.setAttribute（“高度”，画布高度）；
playerLayer.style.top=（视口高度-画布高度）/2+“px”；
playerLayer.style.left=（viewportWidth-canvasWidth）/2+“px”；
playerContext=playerLayer.getContext（“2d”）；
renderTerrain（）；
如果（playerRendered！==true）{
渲染层（0,0）；
playerRendered=true；
}否则{
renderPlayer（player.xPos、player.yPos）；
}
};
函数renderPlayer（x，y）{
//播放器渲染
player.xPos=x；
player.yPos=y；
clearRect（0，0，画布宽度，画布高度）；
player.onload=playerContext.drawImage
（球员，
0, 
0, 
246, 
246,
player.xPos，
player.yPos，
瓷砖化，
瓷砖化）；
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//动态调整播放器图标的大小
//player.onload=playerContext.drawImage（player，player.xPos，player.yPos，（画布宽度*0.05），（画布高度*0.1））；
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
};
函数renderTerrain（）{
变量层_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,