Hello, I would like the game action (where the fighting happens) to be in the center of the page per the photo below. Please I have tried numerous times and cannot seem to align it properly. Below is the photo and the code.

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