This is used with Java, CSS, and Html

Alright well I'm having trouble with this code. First off I can't see the level that I made

Additionally the green blocks (which is acid) When the player's avatar touches the acid I want the player's avatar to 'die' and restart at the spawn point (which @ symboled is used) (how ever do to the way this is setup I can't post them with out it looks weird)

1- I need the Acid (which is called lava in the program which is represented by '!' points) to kill the player and reset the player's avatar to the orginal spawn

2- the index seems to have an error

3- also check if the player's Avatar has gravity (as in it can move across the bottom of the level blocks, doesnt phase though the black blocks, can jump, as well as move left and right)

------File 1 -------

index.html

------File 2-----

.background { background: rgb(104, 102, 102); table-layout: fixed; border-spacing: 0; } .background td { padding: 0; } .lava { background: rgb(150, 255, 100); } .wall { background: black; }

.actor { position: absolute; } .player { background: rgb(224, 149, 66); }

.game { overflow: hidden; max-width: 600px; max-height: 450px; position: relative; }

-----File 3------- (the programmed file with the player jump, collsion thats needs to be checked, and lave to be added)

function Level(plan) {

// Use the length of a single row to set the width of the level

this.width = plan[0].length;

// Use the number of rows to set the height

this.height = plan.length;

// Store the individual tiles in our own, separate array

this.grid = [];

// Loop through each row in the plan, creating an array in our grid

for (var y = 0; y < this.height; y++) {

var line = plan[y], gridLine = [];

// Loop through each array element in the inner array for the type of the tile

for (var x = 0; x < this.width; x++) {

// Get the type from that character in the string. It can be 'x', '!' or ' '

// If the character is ' ', assign null.

var ch = line[x], fieldType = null;

// Use if and else to handle the three cases

if (ch==='@')

// Create a new player at that grid position.

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

else if (ch == "x")

fieldType = "wall";

// Because there is a third case (space ' '), use an "else if" instead of "else"

else if (ch == "!")

fieldType = "lava";

// "Push" the fieldType, which is a string, onto the gridLine array (at the end).

gridLine.push(fieldType);

}

// Push the entire row onto the array of rows.

this.grid.push(gridLine);

}

}

function Vector(x, y) {

this.x = x; this.y = y;

}

// Vector arithmetic: v_1 + v_2 = + =

Vector.prototype.plus = function(other) {

return new Vector(this.x + other.x, this.y + other.y);

};

// Vector arithmetic: v_1 * factor = *factor =

Vector.prototype.times = function(factor) {

return new Vector(this.x * factor, this.y * factor);

};

// A Player has a size, speed and position.

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

// Helper function to easily create an element of a type provided

// and assign it a class.

function elt(name, className) {

var elt = document.createElement(name);

if (className) elt.className = className;

return elt;

}

// Main display class. We keep track of the scroll window using it.

function DOMDisplay(parent, level) {

// this.wrap corresponds to a div created with class of "game"

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

this.level = level;

// In this version, we only have a static background.

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

// Keep track of actors

this.actorLayer = null;

// Update the world based on player position

this.drawFrame();

}

var scale = 20;

DOMDisplay.prototype.drawBackground = function() {

var table = elt("table", "background");

table.style.width = this.level.width * scale + "px";

// Assign a class to new row element directly from the string from

// each tile in grid

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;

};

// Draw the player agent

DOMDisplay.prototype.drawPlayer = function() {

// Create a new container div for actor dom elements

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;

// We want to keep player at least 1/3 away from side of screen

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;

// Change coordinates from the source to our scaled.

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 = functions (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;

}

}

}

};

// Update simulation each step based on keys & step size

Level.prototype.animate = function(step, keys) {

// Ensure each is maximum 100 milliseconds

while (step > 0) {

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

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

// Do this by looping across the step size, subtracing either the

// step itself or 100 milliseconds

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 = 30;

var jumpSpeed = 17;

var playerYSpeed = 7;

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.obstavleAt(newPos, this.size);

if (obstacle) {

if (keys.up && this.speed.y >0) this.speed.y -= playerYSpeed;

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

};

// Arrow key codes for readibility

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

// Translate the codes pressed from a key event

function trackKeys(codes) {

var pressed = Object.create(null);

// alters the current "pressed" array which is returned from this function.

// The "pressed" variable persists even after this function terminates

// That is why we needed to assign it using "Object.create()" as

// otherwise it would be garbage collected

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;

// We don't want the key press to scroll the browser window,

// This stops the event from continuing to be processed

event.preventDefault();

}

}

addEventListener("keydown", handler);

addEventListener("keyup", handler);

return pressed;

}

// frameFunc is a function called each frame with the parameter "step"

// step is the amount of time since the last call used for animation

function runAnimation(frameFunc) {

var lastTime = null;

function frame(time) {

var stop = false;

if (lastTime != null) {

// Set a maximum frame step of 100 milliseconds to prevent

// having big jumps

var timeStep = Math.min(time - lastTime, 100) / 1000;

stop = frameFunc(timeStep) === false;

}

lastTime = time;

if (!stop)

requestAnimationFrame(frame);

}

requestAnimationFrame(frame);

}

// This assigns the array that will be updated anytime the player

// presses an arrow key. We can access it from anywhere.

var arrows = trackKeys(arrowCodes);

// Organize a single level and begin animation

function runLevel(level, Display) {

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

runAnimation(function(step) {

// Allow the viewer to scroll the level

level.animate(step, arrows);

display.drawFrame(step);

});

}

function runGame(plans, Display) {

function startLevel(n) {

// Create a new level using the nth element of array plans

// Pass in a reference to Display function, DOMDisplay (in index.html).

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

}

startLevel(0);

}

-----File 4---- (which is ment to be the levels but it doesnt seem to work properly on here (just need to know that the @ symbol is the starting spawn point, which is where the avatar needs to restart at if it come in contact with the acid [which again is used by the '!' exclamation point])

var GAME_LEVELS = [ [" ", " ", " x xxx x x xxx x xx ", " x x x x x x x ", " x xx x x xx x x ", " x x x x x x x ", " xxx xxx x xxx xxx xxx ", " oooo ", " oooo ", " xxxx ", " xxx ", " xx o x ", " x xxx x ", " x xx x ", " x xxxx o o o x ", " x xxx xxx xxx xx x xxx x ", " x @ xxxxx x ", "!!xxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxx!x!xxxxxxxxx!!", "!!xxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxx!x!xxxxxxxxx!!", "!!xxxxxxxxxxxxx!!xxxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!xxxxx!xxxxx!xxxxxxx!!", "!!xxxxxxxxxxxxxxxxxxxxxxxxxxxxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!xxxxxx!!!!!xxxxxxxx!!", "!!xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx!!", "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx!!", "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx "], [" x!!x xxxxxxx x!x ", " x!!x xxxx xxxx x!x ", " x!!xxxxxxxxxx xx xx x!x ", " xx!!!!!!!!!!xx xx xx x!x ", " xxxxxxxxxx!!x x o o o x!x ", " xx!x x o o xx!x ", " x!x x xxxxxxxxxxxxxxx!!x ", " xvx x x x !!!!!!!!!!!!!!xx ", " xx | | | xx xxxxxxxxxxxxxxxxxxxxx ", " xx!!!!!!!!!!!xx v ", " xxxx!!!!!xxxx ", " x x xxxxxxx xxx xxx ", " x x x x x x ", " x x x x ", " x x xx x ", " xx x x x ", " x x o o x x x x ", " xxxxxxx xxx xxx x x x x x x ", " xx xx x x x x xxxxxx x x xxxxxxxxx x ", " xx xx x o x x xx x x x x ", " @ x x x x x x x x x x ", " xxx x x x x x x x xxxxx xxxxxx x ", " x x x x xx o xx x x x o x x x ", "!!!!x x!!!!!!x x!!!!!!xx xx!!!!!!!!xx x!!!!!!!!!! x = x x x ", "!!!!x x!!!!!!x x!!!!!xx xxxxxxxxxx x!!!!!!!xx! xxxxxxxxxxxxx xx o o xx ", "!!!!x x!!!!!!x x!!!!!x o xx!!!!!!xx ! xx xx ", "!!!!x x!!!!!!x x!!!!!x xx!!!!!!xx ! xxxxxxx ", "!!!!x x!!!!!!x x!!!!!xx xxxxxxxxxxxxxx!!!!!!xx ! ", "!!!!x x!!!!!!x x!!!!!!xxxxxxxxx!!!!!!!!!!!!!!!!!!xx ! ", "!!!!x x!!!!!!x x!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!xx ! "], [" ", " ", " ", " ", " ", " o ", " ", " x ", " x ", " x ", " x ", " xxx ", " x x !!! !!! xxx ", " x x !x! !x! ", " xxx xxx x x ", " x x x oooo x xxx ", " x x x x x!!!x ", " x x xxxxxxxxxxxx xxx ", " xx xx x x x ", " x xxxxxxxxx xxxxxxxx x x ", " x x x x!!!x ", " x x x xxx ", " xx xx x ", " x x= = = = x xxx ", " x x x x!!!x ", " x x = = = =x o xxx xxx ", " xx xx x x!!!x ", " o o x x x x xxv xxx ", " x x x x x!!!x ", " xxx xxx xxx xxx o o x!!!!!!!!!!!!!!x vx ", " x xxx x x xxx x x!!!!!!!!!!!!!!x ", " x x xxxxxxxxxxxxxxxxxxxxxxx ", " xx xx xxx ", " xxx x x x x!!!x xxx ", " x x x xxx x xxx x x ", " x x xxx xxxxxxx xxxxx x ", " x x x x x x ", " x xx x x x x x ", " x x |xxxx| |xxxx| xxx xxx x ", " x xxx o o x x xxx x ", " x xxxxx xx x xxx x!!!x x x ", " x oxxxo x xxx x x x xxx xxx x ", " x xxx xxxxxxxxxxxxx x oo x x oo x x oo xx xx xxx x ", " x @ x x x!!x x!!!!x x!!!!x xx xx x x ", " xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ", " ", " "], [" xxx x ", " x ", " xxxxx ", " x ", " x xxx ", " o x x x ", " o o oxxx x ", " xxx x ", " ! o ! xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx ", " x x x x x x x x x x x x x x x ", " x= o x x xxx x xxx x xxx x xxx x xxx x xxx x xxxxx ", " x x x x x x x x x x x x x x x ", " ! o ! o xxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxxxx ", " ", " o xxx xx ", " ", " ", " xx ", " xxx xxx ", " ", " o x x ", " xx xx ", " xxx xxx xxx x x ", " ", " || ", " xxxxxxxxxxx ", " x x o xxxxxxxxx o xxxxxxxxx o xx x ", " x x x x x x x || x x ", " x @ xxxxx o xxxxx o xxxxx ", " xxxxxxx xxxxx xx xx xxx ", " x= = =x x xxx ", " xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x!!!!!!!!!!!!!!!!!!!!!xxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", " xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", " "] ];

if (typeof module != "undefined" && module.exports) module.exports = GAME_LEVELS;