Rewrite the code in Listing so the spaceship oscillates in both vertical and horizontal directions, instead of panning left-to-right. At the same time, make the code more unobtrusive by extracting JavaScript and CSS into external files. YOU WILL NEED TO MANUALLY ADD YOU OWN IMAGES FOR THIS TO WORK BEING backround and the ufo image

#range

{

position:absolute;

top: 0px;

left: 0px;

background: url( space.jpg);

cursor: crosshair;

width: 100%;

height: 300px;

}

#img1

{

position:absolute;

border:none; left:

0px; top: 100px;

padding: 10px;

}

#score

{

font: 16px normal arial, verdana, sans-serif;

color: white;

padding: 10px;

}

var timer1 = null;

var el = null;

var score = 0; /umber of 'hits'

var shots = 0; //total 'shots'

function moveIt()

{

//animate the image

if( parseInt( el.style.left) > (screen.width - 50))

el.style.left = 0;

el.style.left = parseInt( el.style.left) + 6 + 'px';

el.style.top = 100 + (80 * Math.sin( parseInt( el.style.left)/ 50)) + 'px';

//set the timer

timer1 = setTimeout( moveIt, 25);

}

function scoreUp()

{

//increment the player's score

score ++;

}

function scoreboard()

{

//display the scoreboard

document.getElementById(" score"). innerHTML = "Shots: " + shots + " Score: " + score;

}

window.onload = function()

{

el = document.getElementById(" img1");

//onClick handler calls scoreUp()

//when the image is clicked

el.onclick = scoreUp;

//update total number of shots

//for every click within play field

document.getElementById("range").onclick = function()

{

shots ++;

//update scoreboard

scoreboard();

}

//initialize game

scoreboard();

el.style.left = '50px';

moveIt();

}