怎么才能达到"lava"留下痕迹的效果

Question

玩 JavaScript 游戏 "development" 一段时间后，我想到了一个好主意，或者看起来/听起来是这样。

我正在考虑创建一个代表熔岩的实体。该熔岩将朝特定方向移动，使用：

function Lava(pos, ch) {
  this.pos = pos;
  this.size = new Vector(1, 1);
  if(ch == '-') {
    this.speed = new Vector(3, 0)
  }
}

var acrotchar = {"-": Lava};.

在哪里

完整代码可见here或下方：

var LEVELS = [
  ["                                  x  x",
   "                                  xx x",
   "                      xxx         x  x",
   "                     xx!xx        x ox",
   "                     x!!!x        x xx",
   "                     xx!xx        x  x",
   "  x                   xvx         x  x",
   "  x                               xx x",
   "  x                               x  x",
   "  xx                              x  x",
   "  x                               x xx",
   "  x                                  x",
   "  x @                xxxxx     o     x",
   "  xxxxxx     xxxxxxxxx   xxxxxxxxxxxxx",
   "       x     x                        ",
   "       x!!!!!x                        ",
   "       x!!!!!x                        ",
   "       xxxxxxx                        ",
   "--------------------------------------"]
   ];

//set variables (HP and EXP)
var life = 3;
var expo = 0;
document.getElementById("life").innerHTML = ("Lives left: " + life);
document.getElementById("expo").innerHTML = ("Points: " + expo);

//set the playzone
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(scale) {
 return new Vector(this.x * scale, this.y * scale);
};

// Note: uppercase words are used that means constructor are values
var actorchars =  {
 "@": Player,
 "o": Coin,
 "=": Lava,
 "|": Lava,
 "v": Lava,
 "#": Lava,
 "-": Flood
};

function Player(pos) {
 this.pos = pos.plus(new Vector(0, -.5));
 this.size = new Vector(.5, 1);
 this.speed = new Vector(0, 0);
}
Player.prototype.type = "player";

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, 5);    
  this.repeatPos = pos;
 } else if (ch === '#')
   this.speed = new Vector(0, 10);
}
Lava.prototype.type = "lava"

function Flood(pos, ch) {
  this.pos = pos;
  this.size = new Vector(1, 1);
  if  (ch === '-') {
    this.speed = new Vector(0, 1);
    this.repeatPos = pos;  //will be removed in the future 
  }
}
Flood.prototype.type = "flood"

//Lava.prototype.type = "Lava";

// function Wall(pos, ch) {
 // this.pos = pos;
 // this.size = new Vector(1, 1);
 // if (ch === "z")
  // this.speed = new Vector(0, 1);
// }
// Wall.prototype.type = "wall"

function Coin(pos) {
 this.basePos = this.pos = pos;
 this.size = new Vector(.6, .6);
 // take a look back
 this.wobble = Math.random() * Math.PI * 2;
}
Coin.prototype.type = "coin";

Level.prototype.isFinished = function() {
  return this.status !== null && this.finishDelay < 0;
};

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 === "z")
    fieldType = "wall";
   else if (ch === "!")
    fieldType = "lava";
   else if (ch === "|")
    fieldType = "lava";
   else if (ch === "=")
    fieldType = "lava";
   else if (ch === "#")
    fieldType = "lava";
      else if (ch === "-")
        fieldType = "flood";
   else if (ch === "v"){
    fieldType = "lava";
    console.log(fieldType);
   }
   gridLine.push(fieldType);
  }
  this.grid.push(gridLine);
 }
 this.player = this.actors.filter(function(actor) {
  return actor.type === "player";
 })[0]; 
 this.status = this.finishDelay = null;
}

function element(name, className) {
 var elem = document.createElement(name);
 if(className) elem.className = className;
 return elem;
}

function DOMDisplay(parent, level) {
 this.wrap = parent.appendChild(element("div", "game"));
 this.level = level;
 
 this.wrap.appendChild(this.drawBackground());
 this.actorLayer = null;
 this.drawFrame();
}


var scale = 15;


DOMDisplay.prototype.drawBackground = function() {
 var table = element("table", "background");
 table.style.width = this.level.width * scale + "px";
 table.style.height = this.level.height * scale + "px";
 this.level.grid.forEach(function(row) {
  var rowElement = table.appendChild(element("tr"));
  rowElement.style.height = scale + "px";
  row.forEach(function(type) {
   rowElement.appendChild(element("td", type));
  });
 });
 return table;
};

DOMDisplay.prototype.drawActors = function() {
 var wrap = element("div");
 this.level.actors.forEach(function(actor) {
  var rect = wrap.appendChild(element("div", "actor " + actor.type));
  rect.style.width = actor.size.x * scale + "px";
  rect.style.height = actor.size.y * scale + "px";
  rect.style.left = actor.pos.x * scale + "px";
  rect.style.top = actor.pos.y * scale + "px";
 });
 return wrap;
};

DOMDisplay.prototype.drawFrame = function() {
 if (this.actorLayer)
  this.wrap.removeChild(this.actorLayer);
 this.actorLayer = this.wrap.appendChild(this.drawActors());
 this.wrap.className = "game " + (this.level.status || "");
 this.scrollPlayerIntoView();
};


// clear it later
DOMDisplay.prototype.scrollPlayerIntoView = function() {
  var width = this.wrap.clientWidth;
  var height = this.wrap.clientHeight;
  var margin = width / 3;

  // The viewport
  var left = this.wrap.scrollLeft, right = left + width;
  var top = this.wrap.scrollTop, bottom = top + height;

  var player = this.level.player;
  var center = player.pos.plus(player.size.times(0.5))
                 .times(scale);

  if (center.x < left + margin)
    this.wrap.scrollLeft = center.x - margin;
  else if (center.x > right - margin)
    this.wrap.scrollLeft = center.x + margin - width;
  if (center.y < top + margin)
    this.wrap.scrollTop = center.y - margin;
  else if (center.y > bottom - margin)
    this.wrap.scrollTop = center.y + margin - height;
};

DOMDisplay.prototype.clear = function() {
 this.wrap.parentNode.removeChild(this.wrap);
};

Level.prototype.obstacleAt = function(pos, size) {
  var xStart = Math.floor(pos.x);
  var xEnd = Math.ceil(pos.x + size.x);
  var yStart = Math.floor(pos.y);
  var yEnd = Math.ceil(pos.y + size.y);

  if (xStart < 0 || xEnd > this.width || yStart < 0)
    return "wall";
  if (yEnd > this.height)
    return "lava", "flood";
  for (var y = yStart; y < yEnd; y++) {
    for (var x = xStart; x < xEnd; x++) {
      var fieldType = this.grid[y][x];
      if (fieldType) return fieldType;
    }
  }
};

Level.prototype.actorAt = function(actor) {
  for (var i = 0; i < this.actors.length; i++) {
    var other = this.actors[i];
    if (other != actor &&
        actor.pos.x + actor.size.x > other.pos.x &&
        actor.pos.x < other.pos.x + other.size.x &&
        actor.pos.y + actor.size.y > other.pos.y &&
        actor.pos.y < other.pos.y + other.size.y)
      return other;
  }
};

var maxStep = 0.05;

Level.prototype.animate = function(step, keys) {
  if (this.status !== null)
    this.finishDelay -= step;

  while (step > 0) {
    var thisStep = Math.min(step, maxStep);
    this.actors.forEach(function(actor) {
      actor.act(thisStep, this, keys);
    }, this);
    step -= thisStep;
  }
};


Lava.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.size))
    this.pos = newPos;
  else if (this.repeatPos)
    this.pos = this.repeatPos;
  else
    this.speed = this.speed.times(-1);
};

Flood.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.size))
    this.pos = newPos;
  else
    this.speed = this.speed.times(-1);
};

var wobbleSpeed = 8, wobbleDist = 0.07;

Coin.prototype.act = function(step) {
  this.wobble += step * wobbleSpeed;
  var wobblePos = Math.sin(this.wobble) * wobbleDist;
  this.pos = this.basePos.plus(new Vector(0, wobblePos));
};


var playerXSpeed = 10;

Player.prototype.moveX = function(step, level, keys) {
  this.speed.x = 0;
  if (keys.left) this.speed.x -= playerXSpeed;
  if (keys.right) this.speed.x += playerXSpeed;

  var motion = new Vector(this.speed.x * step, 0);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle)
    level.playerTouched(obstacle);
  else
    this.pos = newPos;
};

var gravity = 30;
var jumpSpeed = 17;

Player.prototype.moveY = function(step, level, keys) {
  this.speed.y += step * gravity;
  var motion = new Vector(0, this.speed.y * step);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle) {
    level.playerTouched(obstacle);
    if (keys.up && this.speed.y > 0)
      this.speed.y = -jumpSpeed;
    else
      this.speed.y = 0;
  } else {
    this.pos = newPos;
  }
};

Player.prototype.act = function(step, level, keys) {
  this.moveX(step, level, keys);
  this.moveY(step, level, keys);

  var otherActor = level.actorAt(this);
  if (otherActor)
    level.playerTouched(otherActor.type, otherActor);

  // Losing animation
  if (level.status == "lost") {
    this.pos.y += step;
    this.size.y -= step;
  }
};

Level.prototype.playerTouched = function(type, actor) {
  //if (type == "lava" || type == "Lava" && this.status === null) { //DOESN'T SEEM TO WORK, FIND OUT WHY MASS DAMAGE
  if (type == "lava" && this.status === null || type == "flood" && this.status === null) {
    this.status = "lost";
 life -= 1;
 console.log(life);
    expo = 0;
    document.getElementById("expo").innerHTML = ("Points: " + expo);
 document.getElementById("life").innerHTML = ("Lives left: " + life);
  if(life < 0) { 
 sessionStorage.setItem("reloading", "true");
 document.location.reload();
  }
    this.finishDelay = 1;
  } else if (type == "coin") {
   expo += 1;
      document.getElementById("expo").innerHTML = ("Points: " + expo);
    this.actors = this.actors.filter(function(other) {
      return other != actor;
    });
    if (!this.actors.some(function(actor) {
      return actor.type == "coin";
    })) {
   life += 1;
   document.getElementById("life").innerHTML = ("Lives left: " + life);
      this.status = "won";
      this.finishDelay = 1;
    }
  }
};

var arrowCodes = {37: "left", 38: "up", 39: "right"};

function trackKeys(codes) {
  var pressed = Object.create(null);
  function handler(event) {
    if (codes.hasOwnProperty(event.keyCode)) {
      var down = event.type == "keydown";
      pressed[codes[event.keyCode]] = down;
      event.preventDefault();
    }
  }
  addEventListener("keydown", handler);
  addEventListener("keyup", handler);
  return pressed;
}

function runAnimation(frameFunc) {
  var lastTime = null;
  function frame(time) {
    var stop = false;
    if (lastTime !== null) {
      var timeStep = Math.min(time - lastTime, 100) / 1000;
      stop = frameFunc(timeStep) === false;
    }
    lastTime = time;
    if (!stop)
      requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

var arrows = trackKeys(arrowCodes);

function runLevel(level, Display, andThen) {
  var display = new Display(document.body, level);
  runAnimation(function(step) {
    level.animate(step, arrows);
    display.drawFrame(step);
    if (level.isFinished()) {
      display.clear();
      if (andThen)
        andThen(level.status);
      return false;
    }
  });
}


var lives = function() {
 ctx.font = "20px Courier";
 ctx.fontFamily = "monospace";
 ctx.fillStyle = "#666";
 ctx.textAlign = "left";
 ctx.textBaseline = "top";
 ctx.fillText("Lives left: " + life, 10, 10);
};


function runGame(plans, Display) {
  function startLevel(n) {
    runLevel(new Level(plans[n]), Display, function(status) {
      if (status == "lost") {
        startLevel(n);       
   } else if (n < plans.length - 1)
        startLevel(n + 1);
      else
        alert("You win!");
    });
  }
  startLevel(0);
}

runGame(LEVELS, DOMDisplay);

body {
  background: #222;
}

h2 {
  color: #666;
  font-family: monospace;
  text-align: center;
}

.background {
  table-layout: fixed;
  border-spacing: 0;
}

.background td {
  padding: 0;
}

.lava, .actor {
  background: #e55;
}

.wall {
  background: #444;
  border: solid 3px #333;
  box-sizing: content-box;
}

.actor {
  position: absolute;
}

.coin {
  background: #e2e838;
  border-radius: 50%;
}

.player {
  background: #335699;
  box-shadow: none;
}

.lost .player {
  background: #a04040;
}

.won .player {
  background: green;
}

.game {
  position: relative;
  overflow: hidden;
}

#life, #expo {
  font-size: 16px;
  font-family: monospace;
  color: #666;
  text-align: left;
  baseline: top;
  margin-left: 30px;
  font-weight: bold;
}

input {
  margin-left: 30px;
  
}

<h2>Simple JavaScript Game</h2>
  
  <div id="life"></div>  
  <div id="expo"></div>

我想实现的是：

熔岩（红色方块，在代码中显示为“-”，标记为 "flood"）将：

~~向特定方向移动（已经完成，或多或少），~~
离开 "trace" 它的运动，（从技术上讲，这种情况下的熔岩水平似乎在上升），
"flood" 能够遍历对象（可选，因为我必须自己仔细检查整个代码，看看我在哪里给了实体 "collisions")

非常感谢任何帮助，尤其是熔岩上升效果。

Answer 1

你的游戏做的很好，但是我有几点建议：

请不要使用原型向对象添加功能。这使得不熟悉代码的人非常难以理解。更好的方法是将所有成员函数放在同一个对象中，这样它们就被组合在一起。它使代码（在我看来）更易于阅读和理解。例如：

function Flood(pos, ch){
    this.pos = pos;
    //other assignments

    this.act = function(){
        //code
    }

    //other functions
}

将所有函数集中在一个 class 中还可以更轻松地找到一个函数，而不是搜索整个文件来查找它。

尽管游戏的大部分内容已经编写完成，但研究新的 ES6 class 语法可能还是值得的，因为这是继承和 object oriented programming. You can have a generic GridElement class that implements the all standard behaviours, and extend and modify only the parts that differ from type to type. This approach is extremely powerful, and makes it very easy to add new types. I would highly recommend reading more on the theory of object oriented programming, because it is a very useful tool, especially in large projects. Daniel Shiffman is an awesome YouTuber, and makes amazing videos about programming. He has an entire series on Object Oriented programming on youtube, and I would suggest watching the video here 的完美示例.
不显示主显示函数中的元素。相反，让每个 class 都有自己的显示功能，return 是一个 div 元素。您可以在主显示循环中调用每个元素的显示功能。这样一来，向特定的 classes 添加额外的行为就变得容易多了。如果 Flood 对象有自己的显示功能，那么它可以 return 不连续的轨迹而不是修改它的大小，这不是实现此行为的理想方式。
我不知道地球上有任何地方有熔岩泛滥，因此我建议您在代码中使用更准确的名称。当我看到 Flood 时，我立刻想到了水，这让我有点摸不着头脑，才弄清楚 Flood 实际上是上升的熔岩。更好的 class 名称可能是 LavaFlood，因此我在下面的代码中冒昧地将 class Flood 的名称更改为 LavaFlood。

至于熔岩上升的效果，就很简单了。我所做的只是将一个 trueSize 变量添加到 (Lava)Flood class 并更改 act 函数：

（我不能 post 这是正常代码，因为网站一直说代码格式不正确）

LavaFlood.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.trueSize)) {
    this.size = this.size.plus(this.speed.times(-step));
    this.pos = newPos;
  } else
    this.speed = this.speed.times(-1);
};

完整代码 - 熔岩上升：

var LEVELS = [
  ["                                  x  x",
   "                                  xx x",
   "                      xxx         x  x",
   "                     xx!xx        x ox",
   "                     x!!!x        x xx",
   "                     xx!xx        x  x",
   "  x                   xvx         x  x",
   "  x                               xx x",
   "  x                               x  x",
   "  xx                              x  x",
   "  x                               x xx",
   "  x                                  x",
   "  x @                xxxxx     o     x",
   "  xxxxxx     xxxxxxxxx   xxxxxxxxxxxxx",
   "       x     x                        ",
   "       x!!!!!x                        ",
   "       x!!!!!x                        ",
   "       xxxxxxx                        ",
   "--------------------------------------"]
   ];

//set variables (HP and EXP)
var life = 3;
var expo = 0;
document.getElementById("life").innerHTML = ("Lives left: " + life);
document.getElementById("expo").innerHTML = ("Points: " + expo);

//set the playzone
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(scale) {
 return new Vector(this.x * scale, this.y * scale);
};

// Note: uppercase words are used that means constructor are values
var actorchars =  {
 "@": Player,
 "o": Coin,
 "=": Lava,
 "|": Lava,
 "v": Lava,
 "#": Lava,
 "-": LavaFlood
};

function Player(pos) {
 this.pos = pos.plus(new Vector(0, -.5));
 this.size = new Vector(.5, 1);
 this.speed = new Vector(0, 0);
}
Player.prototype.type = "player";

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, 5);    
  this.repeatPos = pos;
 } else if (ch === '#')
   this.speed = new Vector(0, 10);
}
Lava.prototype.type = "lava"

function LavaFlood(pos, ch) {
  this.pos = pos;
  this.size = new Vector(1, 1);
  this.trueSize = new Vector(1, 1);
  if  (ch === '-') {
    this.speed = new Vector(0, -1);
    this.repeatPos = pos;  //will be removed in the future 
  }
}
LavaFlood.prototype.type = "lava-flood"

//Lava.prototype.type = "Lava";

// function Wall(pos, ch) {
 // this.pos = pos;
 // this.size = new Vector(1, 1);
 // if (ch === "z")
  // this.speed = new Vector(0, 1);
// }
// Wall.prototype.type = "wall"

function Coin(pos) {
 this.basePos = this.pos = pos;
 this.size = new Vector(.6, .6);
 // take a look back
 this.wobble = Math.random() * Math.PI * 2;
}
Coin.prototype.type = "coin";

Level.prototype.isFinished = function() {
  return this.status !== null && this.finishDelay < 0;
};

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 === "z")
    fieldType = "wall";
   else if (ch === "!")
    fieldType = "lava";
   else if (ch === "|")
    fieldType = "lava";
   else if (ch === "=")
    fieldType = "lava";
   else if (ch === "#")
    fieldType = "lava";
      else if (ch === "-")
        fieldType = "lava-flood";
   else if (ch === "v"){
    fieldType = "lava";
    console.log(fieldType);
   }
   gridLine.push(fieldType);
  }
  this.grid.push(gridLine);
 }
 this.player = this.actors.filter(function(actor) {
  return actor.type === "player";
 })[0]; 
 this.status = this.finishDelay = null;
}

function element(name, className) {
 var elem = document.createElement(name);
 if(className) elem.className = className;
 return elem;
}

function DOMDisplay(parent, level) {
 this.wrap = parent.appendChild(element("div", "game"));
 this.level = level;
 
 this.wrap.appendChild(this.drawBackground());
 this.actorLayer = null;
 this.drawFrame();
}


var scale = 15;


DOMDisplay.prototype.drawBackground = function() {
 var table = element("table", "background");
 table.style.width = this.level.width * scale + "px";
 table.style.height = this.level.height * scale + "px";
 this.level.grid.forEach(function(row) {
  var rowElement = table.appendChild(element("tr"));
  rowElement.style.height = scale + "px";
  row.forEach(function(type) {
   rowElement.appendChild(element("td", type));
  });
 });
 return table;
};

DOMDisplay.prototype.drawActors = function() {
 var wrap = element("div");
 this.level.actors.forEach(function(actor) {
  var rect = wrap.appendChild(element("div", "actor " + actor.type));
  rect.style.width = actor.size.x * scale + "px";
  rect.style.height = actor.size.y * scale + "px";
  rect.style.left = actor.pos.x * scale + "px";
  rect.style.top = actor.pos.y * scale + "px";
 });
 return wrap;
};

DOMDisplay.prototype.drawFrame = function() {
 if (this.actorLayer)
  this.wrap.removeChild(this.actorLayer);
 this.actorLayer = this.wrap.appendChild(this.drawActors());
 this.wrap.className = "game " + (this.level.status || "");
 this.scrollPlayerIntoView();
};


// clear it later
DOMDisplay.prototype.scrollPlayerIntoView = function() {
  var width = this.wrap.clientWidth;
  var height = this.wrap.clientHeight;
  var margin = width / 3;

  // The viewport
  var left = this.wrap.scrollLeft, right = left + width;
  var top = this.wrap.scrollTop, bottom = top + height;

  var player = this.level.player;
  var center = player.pos.plus(player.size.times(0.5))
                 .times(scale);

  if (center.x < left + margin)
    this.wrap.scrollLeft = center.x - margin;
  else if (center.x > right - margin)
    this.wrap.scrollLeft = center.x + margin - width;
  if (center.y < top + margin)
    this.wrap.scrollTop = center.y - margin;
  else if (center.y > bottom - margin)
    this.wrap.scrollTop = center.y + margin - height;
};

DOMDisplay.prototype.clear = function() {
 this.wrap.parentNode.removeChild(this.wrap);
};

Level.prototype.obstacleAt = function(pos, size) {
  var xStart = Math.floor(pos.x);
  var xEnd = Math.ceil(pos.x + size.x);
  var yStart = Math.floor(pos.y);
  var yEnd = Math.ceil(pos.y + size.y);

  if (xStart < 0 || xEnd > this.width || yStart < 0)
    return "wall";
  if (yEnd > this.height)
    return "lava", "lava-flood";
  for (var y = yStart; y < yEnd; y++) {
    for (var x = xStart; x < xEnd; x++) {
      var fieldType = this.grid[y][x];
      if (fieldType) return fieldType;
    }
  }
};

Level.prototype.actorAt = function(actor) {
  for (var i = 0; i < this.actors.length; i++) {
    var other = this.actors[i];
    if (other != actor &&
        actor.pos.x + actor.size.x > other.pos.x &&
        actor.pos.x < other.pos.x + other.size.x &&
        actor.pos.y + actor.size.y > other.pos.y &&
        actor.pos.y < other.pos.y + other.size.y)
      return other;
  }
};

var maxStep = 0.05;

Level.prototype.animate = function(step, keys) {
  if (this.status !== null)
    this.finishDelay -= step;

  while (step > 0) {
    var thisStep = Math.min(step, maxStep);
    this.actors.forEach(function(actor) {
      actor.act(thisStep, this, keys);
    }, this);
    step -= thisStep;
  }
};


Lava.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.size))
    this.pos = newPos;
  else if (this.repeatPos)
    this.pos = this.repeatPos;
  else
    this.speed = this.speed.times(-1);
};

LavaFlood.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.trueSize)){
 this.size = this.size.plus(this.speed.times(-step)); 
    this.pos = newPos;
  }
  else
    this.speed = this.speed.times(-1);
};

var wobbleSpeed = 8, wobbleDist = 0.07;

Coin.prototype.act = function(step) {
  this.wobble += step * wobbleSpeed;
  var wobblePos = Math.sin(this.wobble) * wobbleDist;
  this.pos = this.basePos.plus(new Vector(0, wobblePos));
};


var playerXSpeed = 10;

Player.prototype.moveX = function(step, level, keys) {
  this.speed.x = 0;
  if (keys.left) this.speed.x -= playerXSpeed;
  if (keys.right) this.speed.x += playerXSpeed;

  var motion = new Vector(this.speed.x * step, 0);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle)
    level.playerTouched(obstacle);
  else
    this.pos = newPos;
};

var gravity = 30;
var jumpSpeed = 17;

Player.prototype.moveY = function(step, level, keys) {
  this.speed.y += step * gravity;
  var motion = new Vector(0, this.speed.y * step);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle) {
    level.playerTouched(obstacle);
    if (keys.up && this.speed.y > 0)
      this.speed.y = -jumpSpeed;
    else
      this.speed.y = 0;
  } else {
    this.pos = newPos;
  }
};

Player.prototype.act = function(step, level, keys) {
  this.moveX(step, level, keys);
  this.moveY(step, level, keys);

  var otherActor = level.actorAt(this);
  if (otherActor)
    level.playerTouched(otherActor.type, otherActor);

  // Losing animation
  if (level.status == "lost") {
    this.pos.y += step;
    this.size.y -= step;
  }
};

Level.prototype.playerTouched = function(type, actor) {
  //if (type == "lava" || type == "Lava" && this.status === null) { //DOESN'T SEEM TO WORK, FIND OUT WHY MASS DAMAGE
  if (type == "lava" && this.status === null || type == "lava-flood" && this.status === null) {
    this.status = "lost";
 life -= 1;
 console.log(life);
    expo = 0;
    document.getElementById("expo").innerHTML = ("Points: " + expo);
 document.getElementById("life").innerHTML = ("Lives left: " + life);
  if(life < 0) { 
 sessionStorage.setItem("reloading", "true");
 document.location.reload();
  }
    this.finishDelay = 1;
  } else if (type == "coin") {
   expo += 1;
      document.getElementById("expo").innerHTML = ("Points: " + expo);
    this.actors = this.actors.filter(function(other) {
      return other != actor;
    });
    if (!this.actors.some(function(actor) {
      return actor.type == "coin";
    })) {
   life += 1;
   document.getElementById("life").innerHTML = ("Lives left: " + life);
      this.status = "won";
      this.finishDelay = 1;
    }
  }
};

var arrowCodes = {37: "left", 38: "up", 39: "right"};

function trackKeys(codes) {
  var pressed = Object.create(null);
  function handler(event) {
    if (codes.hasOwnProperty(event.keyCode)) {
      var down = event.type == "keydown";
      pressed[codes[event.keyCode]] = down;
      event.preventDefault();
    }
  }
  addEventListener("keydown", handler);
  addEventListener("keyup", handler);
  return pressed;
}

function runAnimation(frameFunc) {
  var lastTime = null;
  function frame(time) {
    var stop = false;
    if (lastTime !== null) {
      var timeStep = Math.min(time - lastTime, 100) / 1000;
      stop = frameFunc(timeStep) === false;
    }
    lastTime = time;
    if (!stop)
      requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

var arrows = trackKeys(arrowCodes);

function runLevel(level, Display, andThen) {
  var display = new Display(document.body, level);
  runAnimation(function(step) {
    level.animate(step, arrows);
    display.drawFrame(step);
    if (level.isFinished()) {
      display.clear();
      if (andThen)
        andThen(level.status);
      return false;
    }
  });
}


var lives = function() {
 ctx.font = "20px Courier";
 ctx.fontFamily = "monospace";
 ctx.fillStyle = "#666";
 ctx.textAlign = "left";
 ctx.textBaseline = "top";
 ctx.fillText("Lives left: " + life, 10, 10);
};


function runGame(plans, Display) {
  function startLevel(n) {
    runLevel(new Level(plans[n]), Display, function(status) {
      if (status == "lost") {
        startLevel(n);       
   } else if (n < plans.length - 1)
        startLevel(n + 1);
      else
        alert("You win!");
    });
  }
  startLevel(0);
}

runGame(LEVELS, DOMDisplay);

body {
  background: #222;
}

h2 {
  color: #666;
  font-family: monospace;
  text-align: center;
}

.background {
  table-layout: fixed;
  border-spacing: 0;
}

.background td {
  padding: 0;
}

.lava, .actor {
  background: #e55; 
}

.wall {
  background: #444;
  border: solid 3px #333;
  box-sizing: content-box;
}

.actor {
  position: absolute;
}

.coin {
  background: #e2e838;
  border-radius: 50%;
}

.player {
  background: #335699;
  box-shadow: none;
}

.lost .player {
  background: #a04040;
}

.won .player {
  background: green;
}

.game {
  position: relative;
  overflow: hidden;
}

#life, #expo {
  font-size: 16px;
  font-family: monospace;
  color: #666;
  text-align: left;
  baseline: top;
  margin-left: 30px;
  font-weight: bold;
}

input {
  margin-left: 30px; 
}

<h2>Simple JavaScript Game</h2>
  
  <div id="life"></div>  
  <div id="expo"></div>

如果您需要任何说明或帮助，请随时提出。

Answer 2

所有的东西都装不下 post，剩下的是：

要让熔岩从物体中升起，只需反转速度并移除 obstacleAt if 语句即可。要使熔岩看起来像是在物体后面，只需添加 css class lava-flood 并将 z-index 设置为 -1 之类的值。如果你想让熔岩在物体前面上升，只需从 CSS 中的熔岩泛滥 class 中删除 z-index 属性。

完整代码 - 熔岩从物体后面升起

var LEVELS = [
  ["                                  x  x",
   "                                  xx x",
   "                      xxx         x  x",
   "                     xx!xx        x ox",
   "                     x!!!x        x xx",
   "                     xx!xx        x  x",
   "  x                   xvx         x  x",
   "  x                               xx x",
   "  x                               x  x",
   "  xx                              x  x",
   "  x                               x xx",
   "  x                                  x",
   "  x @                xxxxx     o     x",
   "  xxxxxx     xxxxxxxxx   xxxxxxxxxxxxx",
   "       x     x                        ",
   "       x!!!!!x                        ",
   "       x!!!!!x                        ",
   "       xxxxxxx                        ",
   "--------------------------------------"]
   ];

//set variables (HP and EXP)
var life = 3;
var expo = 0;
document.getElementById("life").innerHTML = ("Lives left: " + life);
document.getElementById("expo").innerHTML = ("Points: " + expo);

//set the playzone
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(scale) {
 return new Vector(this.x * scale, this.y * scale);
};

// Note: uppercase words are used that means constructor are values
var actorchars =  {
 "@": Player,
 "o": Coin,
 "=": Lava,
 "|": Lava,
 "v": Lava,
 "#": Lava,
 "-": LavaFlood
};

function Player(pos) {
 this.pos = pos.plus(new Vector(0, -.5));
 this.size = new Vector(.5, 1);
 this.speed = new Vector(0, 0);
}
Player.prototype.type = "player";

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, 5);    
  this.repeatPos = pos;
 } else if (ch === '#')
   this.speed = new Vector(0, 10);
}
Lava.prototype.type = "lava"

function LavaFlood(pos, ch) {
  this.pos = pos;
  this.size = new Vector(1, 1);
  this.trueSize = new Vector(1, 1);
  if  (ch === '-') {
    this.speed = new Vector(0, -1);
    this.repeatPos = pos;  //will be removed in the future 
  }
}
LavaFlood.prototype.type = "lava-flood"

//Lava.prototype.type = "Lava";

// function Wall(pos, ch) {
 // this.pos = pos;
 // this.size = new Vector(1, 1);
 // if (ch === "z")
  // this.speed = new Vector(0, 1);
// }
// Wall.prototype.type = "wall"

function Coin(pos) {
 this.basePos = this.pos = pos;
 this.size = new Vector(.6, .6);
 // take a look back
 this.wobble = Math.random() * Math.PI * 2;
}
Coin.prototype.type = "coin";

Level.prototype.isFinished = function() {
  return this.status !== null && this.finishDelay < 0;
};

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 === "z")
    fieldType = "wall";
   else if (ch === "!")
    fieldType = "lava";
   else if (ch === "|")
    fieldType = "lava";
   else if (ch === "=")
    fieldType = "lava";
   else if (ch === "#")
    fieldType = "lava";
      else if (ch === "-")
        fieldType = "lava-flood";
   else if (ch === "v"){
    fieldType = "lava";
    console.log(fieldType);
   }
   gridLine.push(fieldType);
  }
  this.grid.push(gridLine);
 }
 this.player = this.actors.filter(function(actor) {
  return actor.type === "player";
 })[0]; 
 this.status = this.finishDelay = null;
}

function element(name, className) {
 var elem = document.createElement(name);
 if(className) elem.className = className;
 return elem;
}

function DOMDisplay(parent, level) {
 this.wrap = parent.appendChild(element("div", "game"));
 this.level = level;
 
 this.wrap.appendChild(this.drawBackground());
 this.actorLayer = null;
 this.drawFrame();
}


var scale = 15;


DOMDisplay.prototype.drawBackground = function() {
 var table = element("table", "background");
 table.style.width = this.level.width * scale + "px";
 table.style.height = this.level.height * scale + "px";
 this.level.grid.forEach(function(row) {
  var rowElement = table.appendChild(element("tr"));
  rowElement.style.height = scale + "px";
  row.forEach(function(type) {
   rowElement.appendChild(element("td", type));
  });
 });
 return table;
};

DOMDisplay.prototype.drawActors = function() {
 var wrap = element("div");
 this.level.actors.forEach(function(actor) {
  var rect = wrap.appendChild(element("div", "actor " + actor.type));
  rect.style.width = actor.size.x * scale + "px";
  rect.style.height = actor.size.y * scale + "px";
  rect.style.left = actor.pos.x * scale + "px";
  rect.style.top = actor.pos.y * scale + "px";
 });
 return wrap;
};

DOMDisplay.prototype.drawFrame = function() {
 if (this.actorLayer)
  this.wrap.removeChild(this.actorLayer);
 this.actorLayer = this.wrap.appendChild(this.drawActors());
 this.wrap.className = "game " + (this.level.status || "");
 this.scrollPlayerIntoView();
};


// clear it later
DOMDisplay.prototype.scrollPlayerIntoView = function() {
  var width = this.wrap.clientWidth;
  var height = this.wrap.clientHeight;
  var margin = width / 3;

  // The viewport
  var left = this.wrap.scrollLeft, right = left + width;
  var top = this.wrap.scrollTop, bottom = top + height;

  var player = this.level.player;
  var center = player.pos.plus(player.size.times(0.5))
                 .times(scale);

  if (center.x < left + margin)
    this.wrap.scrollLeft = center.x - margin;
  else if (center.x > right - margin)
    this.wrap.scrollLeft = center.x + margin - width;
  if (center.y < top + margin)
    this.wrap.scrollTop = center.y - margin;
  else if (center.y > bottom - margin)
    this.wrap.scrollTop = center.y + margin - height;
};

DOMDisplay.prototype.clear = function() {
 this.wrap.parentNode.removeChild(this.wrap);
};

Level.prototype.obstacleAt = function(pos, size) {
  var xStart = Math.floor(pos.x);
  var xEnd = Math.ceil(pos.x + size.x);
  var yStart = Math.floor(pos.y);
  var yEnd = Math.ceil(pos.y + size.y);

  if (xStart < 0 || xEnd > this.width || yStart < 0)
    return "wall";
  if (yEnd > this.height)
    return "lava", "lava-flood";
  for (var y = yStart; y < yEnd; y++) {
    for (var x = xStart; x < xEnd; x++) {
      var fieldType = this.grid[y][x];
      if (fieldType) return fieldType;
    }
  }
};

Level.prototype.actorAt = function(actor) {
  for (var i = 0; i < this.actors.length; i++) {
    var other = this.actors[i];
    if (other != actor &&
        actor.pos.x + actor.size.x > other.pos.x &&
        actor.pos.x < other.pos.x + other.size.x &&
        actor.pos.y + actor.size.y > other.pos.y &&
        actor.pos.y < other.pos.y + other.size.y)
      return other;
  }
};

var maxStep = 0.05;

Level.prototype.animate = function(step, keys) {
  if (this.status !== null)
    this.finishDelay -= step;

  while (step > 0) {
    var thisStep = Math.min(step, maxStep);
    this.actors.forEach(function(actor) {
      actor.act(thisStep, this, keys);
    }, this);
    step -= thisStep;
  }
};


Lava.prototype.act = function(step, level) {
  var newPos = this.pos.plus(this.speed.times(step));
  if (!level.obstacleAt(newPos, this.size))
    this.pos = newPos;
  else if (this.repeatPos)
    this.pos = this.repeatPos;
  else
    this.speed = this.speed.times(-1);
};

LavaFlood.prototype.act = function(step, level) {
  this.pos = this.pos.plus(this.speed.times(step));
  this.size = this.size.plus(this.speed.times(-step));
};

var wobbleSpeed = 8, wobbleDist = 0.07;

Coin.prototype.act = function(step) {
  this.wobble += step * wobbleSpeed;
  var wobblePos = Math.sin(this.wobble) * wobbleDist;
  this.pos = this.basePos.plus(new Vector(0, wobblePos));
};


var playerXSpeed = 10;

Player.prototype.moveX = function(step, level, keys) {
  this.speed.x = 0;
  if (keys.left) this.speed.x -= playerXSpeed;
  if (keys.right) this.speed.x += playerXSpeed;

  var motion = new Vector(this.speed.x * step, 0);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle)
    level.playerTouched(obstacle);
  else
    this.pos = newPos;
};

var gravity = 30;
var jumpSpeed = 17;

Player.prototype.moveY = function(step, level, keys) {
  this.speed.y += step * gravity;
  var motion = new Vector(0, this.speed.y * step);
  var newPos = this.pos.plus(motion);
  var obstacle = level.obstacleAt(newPos, this.size);
  if (obstacle) {
    level.playerTouched(obstacle);
    if (keys.up && this.speed.y > 0)
      this.speed.y = -jumpSpeed;
    else
      this.speed.y = 0;
  } else {
    this.pos = newPos;
  }
};

Player.prototype.act = function(step, level, keys) {
  this.moveX(step, level, keys);
  this.moveY(step, level, keys);

  var otherActor = level.actorAt(this);
  if (otherActor)
    level.playerTouched(otherActor.type, otherActor);

  // Losing animation
  if (level.status == "lost") {
    this.pos.y += step;
    this.size.y -= step;
  }
};

Level.prototype.playerTouched = function(type, actor) {
  //if (type == "lava" || type == "Lava" && this.status === null) { //DOESN'T SEEM TO WORK, FIND OUT WHY MASS DAMAGE
  if (type == "lava" && this.status === null || type == "lava-flood" && this.status === null) {
    this.status = "lost";
 life -= 1;
 console.log(life);
    expo = 0;
    document.getElementById("expo").innerHTML = ("Points: " + expo);
 document.getElementById("life").innerHTML = ("Lives left: " + life);
  if(life < 0) { 
 sessionStorage.setItem("reloading", "true");
 document.location.reload();
  }
    this.finishDelay = 1;
  } else if (type == "coin") {
   expo += 1;
      document.getElementById("expo").innerHTML = ("Points: " + expo);
    this.actors = this.actors.filter(function(other) {
      return other != actor;
    });
    if (!this.actors.some(function(actor) {
      return actor.type == "coin";
    })) {
   life += 1;
   document.getElementById("life").innerHTML = ("Lives left: " + life);
      this.status = "won";
      this.finishDelay = 1;
    }
  }
};

var arrowCodes = {37: "left", 38: "up", 39: "right"};

function trackKeys(codes) {
  var pressed = Object.create(null);
  function handler(event) {
    if (codes.hasOwnProperty(event.keyCode)) {
      var down = event.type == "keydown";
      pressed[codes[event.keyCode]] = down;
      event.preventDefault();
    }
  }
  addEventListener("keydown", handler);
  addEventListener("keyup", handler);
  return pressed;
}

function runAnimation(frameFunc) {
  var lastTime = null;
  function frame(time) {
    var stop = false;
    if (lastTime !== null) {
      var timeStep = Math.min(time - lastTime, 100) / 1000;
      stop = frameFunc(timeStep) === false;
    }
    lastTime = time;
    if (!stop)
      requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

var arrows = trackKeys(arrowCodes);

function runLevel(level, Display, andThen) {
  var display = new Display(document.body, level);
  runAnimation(function(step) {
    level.animate(step, arrows);
    display.drawFrame(step);
    if (level.isFinished()) {
      display.clear();
      if (andThen)
        andThen(level.status);
      return false;
    }
  });
}


var lives = function() {
 ctx.font = "20px Courier";
 ctx.fontFamily = "monospace";
 ctx.fillStyle = "#666";
 ctx.textAlign = "left";
 ctx.textBaseline = "top";
 ctx.fillText("Lives left: " + life, 10, 10);
};


function runGame(plans, Display) {
  function startLevel(n) {
    runLevel(new Level(plans[n]), Display, function(status) {
      if (status == "lost") {
        startLevel(n);       
   } else if (n < plans.length - 1)
        startLevel(n + 1);
      else
        alert("You win!");
    });
  }
  startLevel(0);
}

runGame(LEVELS, DOMDisplay);

body {
  background: #222;
}

h2 {
  color: #666;
  font-family: monospace;
  text-align: center;
}

.background {
  table-layout: fixed;
  border-spacing: 0;
}

.background td {
  padding: 0;
}

.lava, .actor {
  background: #e55; 
}

.lava-flood {
  z-index: -1; 
}

.wall {
  background: #444;
  border: solid 3px #333;
  box-sizing: content-box;
}

.actor {
  position: absolute;
}

.coin {
  background: #e2e838;
  border-radius: 50%;
}

.player {
  background: #335699;
  box-shadow: none;
}

.lost .player {
  background: #a04040;
}

.won .player {
  background: green;
}

.game {
  position: relative;
  overflow: hidden;
}

#life, #expo {
  font-size: 16px;
  font-family: monospace;
  color: #666;
  text-align: left;
  baseline: top;
  margin-left: 30px;
  font-weight: bold;
}

input {
  margin-left: 30px; 
}

<h2>Simple JavaScript Game</h2>
  
  <div id="life"></div>  
  <div id="expo"></div>

如果您需要任何说明或帮助，请随时提出。

怎么才能达到"lava"留下痕迹的效果

How could I achieve the effect of "lava" leaving traces

html

javascript

css

game-physics

所有的东西都装不下 post，剩下的是：