原生JS超级马里奥（第九天）

上一章讲述马里奥跳跃动作和刹车的动作，本章对Json文件改动较多，我会一一讲解，还涉及到了部分代码重构

本章的提交ID：7419c4a70c772a45795d20ceb6559c1e1e8d8e3a

github地址：ainuo5213的超级马里奥

本节目录

目录讲解：

1. loaders/level.js：原loadLevelAsync方法和loadTiles方法移动到了单独的文件，用于单独生成loadLevelAsync

实现效果

layers.js文件改动

layers.js将原本用于获取TileResolver从实例中改为了创建实例，并且使用外部传入的tiles，在redraw方法中用于清空当前临时创建的bufferContext的内容，避免重复渲染

Level.js改动

Level.js去掉了tiles、tileCollider的初始化操作，暴露一个方法用于设置马里奥碰撞检测实例和tiles

loader.js改动

loader.js删掉了loadTiles、loadLevelAsync方法，将loadJson暴露了出去

，供loader/level.js使用

TilCollider碰撞检测实例改动

因之前遗漏，这里改动一下name为type

1-1关卡数据json改动

1-1.json改动都标有注释，各位可以尝试理解一下

{"spriteSheet": "overworld",// 模式，用于16x16单位的多个元素拼凑而成的图片生成"patterns": {// 云，云被划分为了6个单位，上面3个，下面三个"cloud-single": {"tiles": [{"name": "cloud-1-1","ranges": [[0, 0]]},{"name": "cloud-1-2","ranges": [[1, 0]]},{"name": "cloud-1-3","ranges": [[2, 0]]},{"name": "cloud-2-1","ranges": [[0, 1]]},{"name": "cloud-2-2","ranges": [[1, 1]]},{"name": "cloud-2-3","ranges": [[2, 1]]}]},// 水管体，水管体被划分为了2个单位，左边一个，右边一个"pipe-section-vert": {"tiles": [{"name": "pipe-vert-left","type": "ground","ranges": [[0, 0]]},{"name": "pipe-vert-right","type": "ground","ranges": [[1, 0]]}]},// 水管帽子被划分为了2个单位，左边一个，右边一个"pipe-cap-vert": {"tiles": [{"name": "pipe-insert-vert-left","type": "ground","ranges": [[0, 0]]},{"name": "pipe-insert-vert-right","type": "ground","ranges": [[1, 0]]}]},// 高度为2的水管，被划分为了2个，上边1个单位是水管帽，下边1个单位是水管体"pipe-2h": {"tiles": [{"pattern": "pipe-cap-vert","ranges": [[0, 0]]},{"pattern": "pipe-section-vert","ranges": [[0, 1,1, 1]]}]},// 高度为3的水管，被划分为了2个，上边1个单位是水管帽，下边2个单位是水管体"pipe-3h": {"tiles": [{"pattern": "pipe-cap-vert","ranges": [[0, 0]]},{"pattern": "pipe-section-vert","ranges": [[0, 1,1, 2]]}]},// 高度为4的水管，被划分为了2个，上边1个单位是水管帽，下边3个单位是水管体"pipe-4h": {"tiles": [{"pattern": "pipe-cap-vert","ranges": [[0, 0]]},{"pattern": "pipe-section-vert","ranges": [[0, 1,1, 3]]}]}},// 背景渲染部分，整合了之前的backgrounds，并加入了水管（2h、3h、4h）和云"layers": [{"tiles": [{"name": "sky","ranges": [[0, 212,0, 13]]},{"name": "ground","type": "ground","ranges": [[0, 212,13, 2]]},{"name": "sky","ranges": [[75, 2,13, 2],[92, 2,13, 2],[157, 2,13, 2]]},{"name": "ground","type": "ground","ranges": [[5, 3,9, 1],[29, 5],[5, 7,9],[12, 6,11, 1],[2, 1,11, 1],[10, 2,10, 1],[10, 2,10],[9, 1,0, 7]]}]},{"tiles": [{"name": "bricks","type": "ground","ranges": [[27, 5,9],[83, 3,9],[86, 6,5],[96, 3,5],[99, 9],[105, 2,9],[123, 5],[126, 3,5],[132, 4,5],[133, 2,9],[171, 4,9]]},{"name": "chance","type": "ground","ranges": [[2, 2],[23, 9],[28, 9],[30, 9],[29, 5],[84, 9],[99, 5],[114, 5],[111, 9],[114, 9],[117, 9],[133, 2, 5],[173, 9]]},{"name": "chocolate","type": "ground","ranges": [[141, 1, 9],[140, 2, 10],[139, 3, 11],[138, 4, 12],[144, 1, 9],[144, 2, 10],[144, 3, 11],[144, 4, 12],[155, 2, 9],[154, 3, 10],[153, 4, 11],[152, 5, 12],[159, 1, 9],[159, 2, 10],[159, 3, 11],[159, 4, 12],[191, 2, 5],[190, 3, 6],[189, 4, 7],[188, 5, 8],[187, 6, 9],[186, 7, 10],[185, 8, 11],[184, 9, 12]]},{"pattern": "pipe-2h","ranges": [[35, 11],[167, 11],[182, 11]]},{"pattern": "pipe-3h","ranges": [[45, 10]]},{"pattern": "pipe-4h","ranges": [[53, 9],[64, 9]]},{"pattern": "cloud-single","ranges": [[2, 2],[25, 2],[35, 3],[44, 2],[64, 3],[74, 2],[80, 3],[90, 2],[108, 3],[118, 2],[128, 3],[138, 2]]}]}]
}

overworld.json地图切片数据改动

地图切片数据加入了6个单位的云和4个单位的水管，用于切不同的16x16的方格进行渲染，所以说云占6个单位，长3宽2等

loader/level.js

loader/level.js是之前loadTiles和loadAsync的整合，并进行部分优化，将每个循环拆分到了外部，降低主代码区的代码长度，利于维护和扩展

import { createBackgroundLayer, createrSpriteLayer } from "../layers.js";
import { Matrix } from "../Math.js";
import { Level } from "../Level.js";
import { loadJson, loadSpriteSheet } from "../loader.js";export function loadLevelAsync(name) {return loadJson(`/src/levels/${name}.json`).then(data => Promise.all([data, loadSpriteSheet(data.spriteSheet)])).then(([levelJson, backgroundSprite]) => {const level = new Level();// 加载level中的matrix每一个格子的数据到tilesconst mergedTiles = levelJson.layers.reduce((mergedTiles, layer) => {return mergedTiles.concat(layer.tiles);}, []);// 动态设置level的碰撞检测类const collisionGrid = createCollisionGrid(mergedTiles, levelJson.patterns);level.setCollisionGrid(collisionGrid);levelJson.layers.forEach(layer => {const backgroundGrid = createBackgroundGrid(layer.tiles, levelJson.patterns);const backgroundLayer = createBackgroundLayer(level, backgroundGrid, backgroundSprite);level.compositor.layers.push(backgroundLayer);})// 创建马里奥图像的回调const marioSpriteLayer = createrSpriteLayer(level.entities);level.compositor.layers.push(marioSpriteLayer);return level;})
}// 一个range范围内的x和y对象集合
function* expandSpan(xStart, xLen, yStart, yLen) {const xEnd = xStart + xLen;const yEnd = yStart + yLen;for (let x = xStart; x < xEnd; x++) {for (let y = yStart; y < yEnd; y++) {yield { x, y };}}
}// 展开一个range，原range.forEach...
function expandRange(range) {// 修改渲染逻辑: 当配置中的range为4位数，则其分别为x位置开始xStart、x方向渲染长度xLen、y位置开始yStart、y方向渲染长度yLen//             当配置中的range为2位数，则其分别为x位置开始xStart、y位置开始yStart，此时yLen、xLen均为1//             当配置中的range为3位数，则其分别为x位置开始xStart、x方向渲染长度xLen、y位置开始yStart，此时yLen为1if (range.length === 4) {const [xStart, xLen, yStart, yLen] = range;return expandSpan(xStart, xLen, yStart, yLen);} else if (range.length === 2) {const [xStart, yStart] = range;return expandSpan(xStart, 1, yStart, 1);} else if (range.length === 3) {const [xStart, xLen, yStart] = range;return expandSpan(xStart, xLen, yStart, 1);}
}// 展开多个ranges（原tile.ranges.forEach...）
function* expandRanges(ranges) {for (const range of ranges) {for (const item of expandRange(range)) {yield item}}
}// 展开tiles为制定格式的对象的数组（如果该元素是pattern，就继续展开pattern对应的那个对象知道展开到底）
function expandTiles(tiles, patterns) {const expandedTiles = [];function walkTiles(tiles, offsetX, offsetY) {for (const tile of tiles) {for (const { x, y } of expandRanges(tile.ranges)) {const derivedX = x + offsetX;const derivedY = y + offsetY;if (tile.pattern) {const tiles = patterns[tile.pattern].tiles;walkTiles(tiles, derivedX, derivedY);} else {expandedTiles.push({tile,x: derivedX,y: derivedY});}}}}walkTiles(tiles, 0, 0);return expandedTiles;
}// 循环遍历展开了的tiles，生成matrix
function createCollisionGrid(tiles, patterns) {const matrix = new Matrix();for (const { tile, x, y } of expandTiles(tiles, patterns)) {matrix.set(x, y, {type: tile.type,name: tile.name});}return matrix;
}// 循环遍历展开了的tiles，生成matrix
function createBackgroundGrid(tiles, patterns) {const matrix = new Matrix();for (const { tile, x, y } of expandTiles(tiles, patterns)) {matrix.set(x, y, {type: tile.type,name: tile.name,});}return matrix;
}

本节代码重构较多，大家多多理解重构部分