Hello, I need this game to be IN THE MIDDLE OF THE WEBPAGE. The enemies should be in the middle and the main character should be in the middle . They should battle in the MIDDLE OF THE WEBPAGE please. I would like all the game action to take place in the middle of the webpage. Also could you please place the "game over" in the middle of the webpage when they die? Please help I have tried for hours. Please list every piece of code . See code/photo below. Will thumbs up the right answer.

code:

#hero {

/* background: #ff0000; */

background-image: url("man-of-space.png");

width: 40px;

height: 40px;

position: absolute;

}

#background {

background-image: url("space.png");

/* background: #000000; */

height: 100%; background-position: center;

}

.laser {

background: #00ff00;

width: 2px;

height: 50px;

position: absolute;

}

.enemy {

background-image: url("spaceship.png");

background-size: 40px 40px;

width: 40px;

height: 40px;

position: absolute;

}

#score {

color: #ffffff;

font-size: 18pt;

position: absolute;

left: 20px;

top: 20px;

}

#gameover {

color: #ff0000;

font-size: 20px;

position: absolute;

left: 160px;

top: 200px;

visibility: hidden;

}

GAME OVER

var LEFT_KEY = 37;

var UP_KEY = 38;

var RIGHT_KEY = 39;

var DOWN_KEY = 40;

var SPACE_KEY = 32;

var HERO_MOVEMENT = 3;

var lastLoopRun = 0;

var score = 0;

var iterations = 0;

var controller = new Object();

var enemies = new Array();

function createSprite(element, x, y, w, h) {

var result = new Object();

result.element = element;

result.x = x;

result.y = y;

result.w = w;

result.h = h;

return result;

}

function toggleKey(keyCode, isPressed) {

if (keyCode == LEFT_KEY) {

controller.left = isPressed;

}

if (keyCode == RIGHT_KEY) {

controller.right = isPressed;

}

if (keyCode == UP_KEY) {

controller.up = isPressed;

}

if (keyCode == DOWN_KEY) {

controller.down = isPressed;

}

if (keyCode == SPACE_KEY) {

controller.space = isPressed;

}

}

function intersects(a, b) {

return a.x b.x && a.y b.y;

}

function ensureBounds(sprite, ignoreY) {

if (sprite.x

sprite.x = 20;

}

if (!ignoreY && sprite.y

sprite.y = 20;

}

if (sprite.x + sprite.w > 480) {

sprite.x = 480 - sprite.w;

}

if (!ignoreY && sprite.y + sprite.h > 480) {

sprite.y = 480 - sprite.h;

}

}

function setPosition(sprite) {

var e = document.getElementById(sprite.element);

e.style.left = sprite.x + 'px';

e.style.top = sprite.y + 'px';

}

function handleControls() {

if (controller.up) {

hero.y -= HERO_MOVEMENT;

}

if (controller.down) {

hero.y += HERO_MOVEMENT;

}

if (controller.left) {

hero.x -= HERO_MOVEMENT;

}

if (controller.right) {

hero.x += HERO_MOVEMENT;

}

if (controller.space) {

var laser = getFireableLaser();

if (laser) {

laser.x = hero.x + 9;

laser.y = hero.y - laser.h;

}

}

ensureBounds(hero);

}

function getFireableLaser() {

var result = null;

for (var i = 0; i

if (lasers[i].y

result = lasers[i];

}

}

return result;

}

function getIntersectingLaser(enemy) {

var result = null;

for (var i = 0; i

if (intersects(lasers[i], enemy)) {

result = lasers[i];

break;

}

}

return result;

}

function checkCollisions() {

for (var i = 0; i

var laser = getIntersectingLaser(enemies[i]);

if (laser) {

var element = document.getElementById(enemies[i].element);

element.style.visibility = 'hidden';

element.parentNode.removeChild(element);

enemies.splice(i, 1);

i--;

laser.y = -laser.h;

score += 100;

} else if (intersects(hero, enemies[i])) {

gameOver();

} else if (enemies[i].y + enemies[i].h >= 500) {

var element = document.getElementById(enemies[i].element);

element.style.visibility = 'hidden';

element.parentNode.removeChild(element);

enemies.splice(i, 1);

i--;

}

}

}

function gameOver() {

var element = document.getElementById(hero.element);

element.style.visibility = 'hidden';

element = document.getElementById('gameover');

element.style.visibility = 'visible';

}

function showSprites() {

setPosition(hero);

for (var i = 0; i

setPosition(lasers[i]);

}

for (var i = 0; i

setPosition(enemies[i]);

}

var scoreElement = document.getElementById('score');

scoreElement.innerHTML = 'SCORE: ' + score;

}

function updatePositions() {

for (var i = 0; i

enemies[i].y += 4;

enemies[i].x += getRandom(7) - 3;

ensureBounds(enemies[i], true);

}

for (var i = 0; i

lasers[i].y -= 12;

}

}

function addEnemy() {

var interval = 50;

if (iterations > 1500) {

interval = 5;

} else if (iterations > 1000) {

interval = 20;

} else if (iterations > 500) {

interval = 35;

}

if (getRandom(interval) == 0) {

var elementName = 'enemy' + getRandom(10000000);

var enemy = createSprite(elementName, getRandom(450), -40, 35, 35);

var element = document.createElement('div');

element.id = enemy.element;

element.className = 'enemy';

document.children[0].appendChild(element);

enemies[enemies.length] = enemy;

}

}

function getRandom(maxSize) {

return parseInt(Math.random() * maxSize);

}

function loop() {

if (new Date().getTime() - lastLoopRun > 40) {

updatePositions();

handleControls();

checkCollisions();

addEnemy();

showSprites();

lastLoopRun = new Date().getTime();

iterations++;

}

setTimeout('loop();', 2);

}

document.onkeydown = function(evt) {

toggleKey(evt.keyCode, true);

};

document.onkeyup = function(evt) {

toggleKey(evt.keyCode, false);

};

var hero = createSprite('hero', 250, 460, 20, 20);

var lasers = new Array();

for (var i = 0; i

lasers[i] = createSprite('laser' + i, 0, -120, 2, 50);

}

loop();

SCORE: 0 Put here enemies het