我目前正在尝试设计我的第一个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;
}
答案 0 :(得分：1)
import 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
您有3个真正的选项，可让ES6 import在浏览器中运行。虽然像Grunt或Gulp这样的老任务运行者可以为此工作，但随着人们越来越多地使用模块捆绑器（如 Webpack （选项＃1）），其中大多数都被逐步淘汰。
以下是这些选项：
我建议使用像 Webpack 这样的模块捆绑器将ES6编译成Common JS。
链接到 Webpack 网站：https://webpack.js.org/
您可以使用像 Webpack Dev Server 这样的任务运行器让Webpack监视您的文件以进行更改并根据需要进行编译。您甚至可以在浏览器中的某个端口上监听（例如http://localhost:3000/）。
Webpack Dev Server ：https://github.com/webpack/webpack-dev-server
这有些新技术我只是把它放在这里，因为有人说他们让它工作了。我自己从未真正使用它。显然，您可以使用<script type="module" src="main.js"></script>直接在浏览器中使用ES6。完成后，您可以直接在import中使用ES6 main.js。
我可以使用（ES6模块）吗？：https://caniuse.com/#feat=es6-module
以下是一个示例：http://plnkr.co/edit/Jqbu07cd9bFFTMtVrz5c?p=preview
或者，您可以使用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]