Eloquent JavaScript 笔记 十五：A Platform Game
好多年没有见到这种游戏场景了，还记得 “超级玛丽” 吗？ 当年的红白机都带有这类游戏。
1. 游戏介绍：
1. 黑色方块代表player，可以用键盘控制它前进、后退、跳跃。
2. 红色代表岩浆，碰到就game over。
3. 黄色方块是金币，收集到所有的金币就过关。
2. The Technology
1. 使用DOM显示游戏，通过key event获得用户的键盘输入。
2. 游戏的固定场景用table存储。
3. 可移动的物体放在场景之上，用absolute position的element。
3. Levels
var simpleLevelPlan = [
" ",
" ",
" x = x ",
" x o o x ",
" x @ xxxxx x ",
" xxxxx x ",
" x!!!!!!!!!!!!x ",
" xxxxxxxxxxxxxx ",
" "
];1. x : 墙
2. 空格 ： 空白区域
3. ! : 不可移动的岩浆
4. @ : 游戏开始时，player所处位置
5. o : 金币
6. = : 水平往复移动的岩浆
7. | : 垂直移动的岩浆
8. v : 滴落的岩浆
整个游戏包含多个level。收集到所有的金币，当前level结束，进入下一level。碰到岩浆，本level重新开始。
4. Reading a Level
Level 是游戏的一关，包含所有的场景信息，主要包括：
width: 地图宽度
height: 地图高度
grid: 即地图，一个二维数组，每个数组元素中包含一种类型的 “静物” （null 空白, x 墙, ! 不动的lava）
actors: 可以移动的物体 (player, coin, 可移动的lava）
player: 玩家
status: 游戏状态，失败还是过关
finishDelay: 过关之后，游戏的场景保留一段时间，游戏的动画继续显示。这样的话，切换到下一关就不那么突兀。
function Level(plan) {
this.width = plan[0].length;
this.height = plan.length;
this.grid = [];
this.actors = [];
for (var y = 0; y < this.height; y++) {
var line = plan[y], gridLine = [];
for (var x = 0; x < this.width; x++) {
var ch = line[x], fieldType = null;
var Actor = actorChars[ch];
if (Actor)
this.actors.push(new Actor(new Vector(x, y), ch));
else if (ch == "x")
fieldType = "wall";
else if (ch == "!")
fieldType = "lava";
gridLine.push(fieldType);
}
this.grid.push(gridLine);
}
this.player = this.actors.filter(function(actor) {
return actor.type == "player";
})[0];
this.status = this.finishDelay = null;
}
Level.prototype.isFinished = function() {
return this.status != null && this.finishDelay < 0;
};actorChars，Actor，Vector，这些都是用来构建 actors 的，都在下一节定义。
5. Actors
5.1. Vector
先看Vector，第六章和第七章都用到过：
function Vector(x, y) {
this.x = x; this.y = y;
}
Vector.prototype.plus = function(other) {
return new Vector(this.x + other.x, this.y + other.y);
};
Vector.prototype.times = function(factor) {
return new Vector(this.x * factor, this.y * factor);
};5.2. actorChars
var actorChars = {
"@": Player,
"o": Coin,
"=": Lava, "|": Lava, "v": Lava
};5.3. Player
function Player(pos) {
this.pos = pos.plus(new Vector(0, -0.5));
this.size = new Vector(0.8, 1.5);
this.speed = new Vector(0, 0);
}
Player.prototype.type = "player";地图上的坐标不是用pixel为单位的，而是自定义的一个方块，后面会讲。所以，与位置相关的都是以方块为单位，如：Vector, size, speed, pos 等。
size: player 宽度为0.8块，高度为1.5块
speed: 用来模拟运动和重力
pos: 坐标。注意，屏幕坐标是向下延伸的。player 的高度是1.5，那么，它的bottom没有和grid对齐(左图），所以，在构造时，给它的y减去0.5（右图)。
5.4. Lava
function Lava(pos, ch) {
this.pos = pos;
this.size = new Vector(1, 1);
if (ch == "=") {
this.speed = new Vector(2, 0);
} else if (ch == "|") {
this.speed = new Vector(0, 2);
} else if (ch == "v") {
this.speed = new Vector(0, 3);
this.repeatPos = pos;
}
}
Lava.prototype.type = "lava";function Coin(pos) {
this.basePos = this.pos = pos.plus(new Vector(0.2, 0.1));
this.size = new Vector(0.6, 0.6);
this.wobble = Math.random() * Math.PI * 2;
}
Coin.prototype.type = "coin";好了，Level需要的所有元素都齐备了。
var simpleLevel = new Level(simpleLevelPlan);
console.log(simpleLevel.width, "by", simpleLevel.height);6. Encapsulation as a Burden
7. Drawing
7.1. DOMDisplay
Level如何绘制到屏幕上？ 我们需要定义一个display对象，这里，用DOM元素显示，所以，该对象叫做 DOMDisplay。
function DOMDisplay(parent, level) {
this.wrap = parent.appendChild(elt("div", "game"));
this.level = level;
this.wrap.appendChild(this.drawBackground());
this.actorLayer = null;
this.drawFrame();
}
function elt(name, className) {
var elt = document.createElement(name);
if (className) elt.className = className;
return elt;
}7.2. drawBackground()
var scale = 20;
DOMDisplay.prototype.drawBackground = function() {
var table = elt("table", "background");
table.style.width = this.level.width * scale + "px";
this.level.grid.forEach(function(row) {
var rowElt = table.appendChild(elt("tr"));
rowElt.style.height = scale + "px";
row.forEach(function(type) {
rowElt.appendChild(elt("td", type));
});
});
return table;
};background是个
| 。
需要添加CSS，使background上的不同fieldType显示出来： 7.3. drawActors() 每个actor是个 ，它的position是absolute。
7.4. drawFrame() 胜利或失败时，player的样式稍有变化： 7.5. scrollPlayerIntoView() 7.6. 进入下一关，删除当前场景 
8. Motion and Collision Motion: 每个actor都有speed属性，speed * duration 就是它的下一个位置。为了显示的平滑流畅，需要每隔一小段时间（例如：20ms）就让它移动一次（重绘）。 Collision: 碰撞检测。player会碰到墙、lava、coin，移动的lava也会碰到墙。碰撞之后，每种actor有自己特定的行为（停止、收集coin、弹回等）。类似于Motion，Collision检测也要每隔一小段时间就做一次，这样可以让动画更平滑。 8.1. 背景物体的碰撞检测方法：（只有地图上的静态物体，不包括 actors） 第二个 if，判断是否跑到地图下边界，如果超出下边界，视同碰到lava。 在 for 循环中，判断是否与其他object（wall，lava）重叠。 8.2. 判断是否碰撞其他actors 9. Actors and Actions 9.1. Level的animate方法 注意，step是个时间值（两次调用animate函数的时间间隔），在while循环中，我们把step切分成小的时间片，就是maxStep，0.05秒，也就是说，actor的每个动作时长最大是50ms。 第一个if，是判断当前关卡是否结束：won or lost。 如果结束了，actors也会继续执行动作，直到 finishDelay 时间耗尽。 keys 是键盘事件，由actor自行处理。其实，只有player需要处理keys，改变运动方向。 9.2. Lava 的 act() 然后，判断是否碰到别的物体，如果没碰到，移动到下一个位置。 如果碰到了，对于滴落的lava，它有个属性repeatPos（初始位置），直接移动到repeatPos； 没有repeatPos属性的lava，都可以往复运动，撞墙之后弹回，即speed逆转。 9.3. Coin 的 act() 9.4. Player 的act() act() : 主要分成四部分： 1. 水平方向移动 moveX()； 2. 垂直方向移动 moveY()； 3. 碰撞检测 Level.playerTouched() ； 4. 游戏失败处理 lost 。 在一个平面上的移动，都可以分成两步：先水平移动，再垂直移动。 因为每次移动的时间片很短(50ms)，距离也就会很短，从视觉效果看不出来分成了两步。 moveX() : moveY() : moveY() 需要考虑重力加速度，如果没有碰撞，y方向的speed会持续增加 step * gravity 。 Level.playerTouched() ： 10. Tracking Keys 跟踪键盘事件，绑定三个按键的event（左、上、右）。 因为游戏是定时刷新的，所以不需要在每次收到键盘event时直接改变game场景，而是把按键的状态记下来，在下一个时间片时再处理该event。 11. Running the Game 前文一直多次提到游戏场景定时刷新，这个定时并不是用setInterval或setTimeout这样的定时器，而是用第13章讲过的requestAnimationFrame() 。该函数通知系统需要刷新屏幕，系统会选择合适的时机执行传入的函数。这样可以更好的平衡性能和游戏的流畅性。 我们需要定义一个辅助函数 runAnimation() ，用于组织 requestAnimationFrame() 的执行： 2. 内部的fame函数有个time参数，它是由系统传入的，是当前系统时间； 3. 注意 var timeStep，它是当前时间与上次刷新时间的间隔，问什么要给它取个最大值(100ms)呢？ 因为，如果浏览器窗口 (或tab) 被隐藏了，系统就会停止刷新该窗口，直到该窗口重新显示出来。 这可以起到暂停游戏的作用。 游戏的总控函数： 12. Exercise: Game Over 现在的player有无数条命，如果在某一关失败了可以重复无数次。给它加个上限：3条命，如果失败3次，则从第一关开始。 13. Exercise: Pausing the Game 最后一题比较复杂，留待以后慢慢看。
|