Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<style type="text/css">
    #ocean {
			background-image: url("ocean.jpg");
			width: 900px;
			height: 700px;
		}
    .player {
			position: absolute;
			background-image: url("player.png");
			width: 70px;
			height: 75px;
     }
     .enemy {
			position: absolute;
			background-image: url("enemy.png");
			width: 70px;
			height: 75px;
		}
	</style>

<div id="ocean">
		<div id="player"></div>
		<div id="enemy"></div>
	</div>


	<script type="text/javascript">
	  var player = {
			left: 450,
			top: 700
		}
		var enemies = [
			{left: 250, top: 200},
			{left: 350, top: 250},
			{left: 450, top: 200},
			{left: 250, top: 250},
			{left: 350, top: 250},
			{left: 150, top: 200}
		]

    function drawPlayer() {
			content = "<div class='player' style='left: "+player.left+"px; top: "+player.top+"px'></div>";
			document.getElementById("players").innerHTML = content;
		}

    function drawEnemies() {
			content = "";
			for(var i=0; i<enemy.length; i++) {
				content += "<div class='enemy' style='left: "+enemy[i].left+"px; top: "+enemy	document.onkeydown = function(e) {
				[i].top+"px'></div>";
			}
			document.getElementById("enemies").innerHTML = content;
			if(e.keyCode == 37) {
				if(player.left > 0) {
					player.left -= 10;
				}
			}
			if(e.keyCode == 39) {
				if(player.left < 1180) {
					player.left += 10;
				}
			}
			if(e.keyCode == 38) {
					player.top -= 10;
			}
			if(e.keyCode == 40) {
					player.top += 10;
			}
			drawPlayer();
		}
		drawPlayer();
		drawEnemies();
		}

	</script>
</body>
</html>