HELP ON JAVASCRIPT AND A LITTLE CSS CODE.

I'm making a platformer and I've gotten to a certain point on my own but I'm stuck with trying to program the lava as a hazard.

I'm supposed to adjust the player characters response to obstacles so that lava kills the player by setting them back to the start of the level. This means that if the player hits lava send their position to a new Vector(10,10). Also if I can I'm supposed to delay the restart of the level with Javascript and signal the player they have died by changing the CSS class and putting an overlay to give them the game over feel. I've been at this for a few days and I just can't seem to figure it out without giving myself countless errors.

My JavaScript Code So Far:

function Level(plan) {

this.width = plan[0].length;

this.height = plan.length;

this.grid = [];

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;

if (ch==='@')

this.player = new Player(new Vector(x, y));

else if (ch == "x")

fieldType = "wall";

else if (ch == "!")

fieldType = "lava";

gridLine.push(fieldType);

}

this.grid.push(gridLine);

}

}

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

};

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

function elt(name, className) {

var elt = document.createElement(name);

if (className) elt.className = className;

return elt;

}

function DOMDisplay(parent, level) {

this.wrap = parent.appendChild(elt("div", "game"));

this.level = level;

this.wrap.appendChild(this.drawBackground());

this.actorLayer = null;

this.drawFrame();

}

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;

};

DOMDisplay.prototype.drawPlayer = function() {

var wrap = elt("div");

var actor = this.level.player;

var rect = wrap.appendChild(elt("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.drawPlayer());

this.scrollPlayerIntoView();

};

DOMDisplay.prototype.scrollPlayerIntoView = function() {

var width = this.wrap.clientWidth;

var height = this.wrap.clientHeight;

var margin = width / 3;

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;

};

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 || yEnd > this.height)

return 'wall';

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.animate = function(step, keys) {

while (step > 0) {

var thisStep = Math.min(step, maxStep);

this.player.act(thisStep, this, keys);

step -= thisStep;

}

};

var maxStep = 0.05;

var playerXSpeed = 7;

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 != "wall")

this.pos = newPos;

};

var gravity = 70;

var jumpSpeed = 35;

var playerYSpeed = 8;

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) {

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 arrowCodes = {37: "left", 38: "up", 39: "right", 40: "down"};

function trackKeys(codes) {

var pressed = Object.create(null);

function handler(event) {

if (codes.hasOwnProperty(event.keyCode)) {

// If the event is keydown, set down to true. Else set to false.

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) {

var display = new Display(document.body, level);

runAnimation(function(step) {

level.animate(step, arrows);

display.drawFrame(step);

});

}

function runGame(plans, Display) {

function startLevel(n) {

runLevel(new Level(plans[n]), Display);

}

startLevel(0);

}

My Game Level Code:

var GAME_LEVELS = [ [" ", " ", " ", " ", " ", " ", " xxx ", " xx xx xx!xx ", " o o xx x!!!x ", " xx!xx ", " xxxxx xvx ", " xx ", " xx o o x ", " x o x ", " x xxxxx o x ", " x xxxx o x ", " x @ x x xxxxx x ", " xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxx xxxxxxxxx ", " x x x x ", " x!!!x x!!!!!x ", " x!!!x x!!!!!x ", " xxxxx xxxxxxx ", " ", " "],

My CSS so far:

.background { background: rgb(52, 166, 251);

table-layout: fixed;

border-spacing: 0; }

.background td { padding: 0; }

.lava { background: rgb(255, 100, 100); }

.wall { background: white; }

.actor { position: absolute; }

.player { background: rgb(64, 64, 64); }

.lost .player {

background: rgb(120, 20, 20)

}

.game {

overflow: hidden;

max-width: 600px;

max-height: 450px;

position: relative;

}

My HTML to run the game: