I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times as possible before time runs out.
Here are the steps to follow:
1. Create a webpage named "game.html" and place it in the root directory. Add a layer with an image content that will move randomly on the screen when the game starts. Also, include another image that will act as a start button for the game. Be sure to set boundaries so that the image does not leave the visible screen space (assuming 800x600 resolution).
2. Implement a timer or loop to limit the game duration to 30 seconds. You can use the setTimeout() function to achieve this.
3. The game should track the player's score, which increases each time the image is clicked. The score should be displayed either in the status bar or somewhere in the background.
4. Each time the player clicks on the image, it should move randomly within a 10-pixel radius on the screen.
5. The game continues until the time runs out, at which point a dialog box can display the final score. The user then has the option to restart the game by clicking the "Start" image again.
6. For an added challenge, consider implementing difficulty levels such as faster motion or smaller target sizes. This step is optional and carries no extra points.
7. Lastly, add a link from your homepage to the game page and make sure to thoroughly test the code before publishing it.
I've made some progress but need assistance. Can you help me with this?
<Layer Name="game" LEFT=400 TOP=500>
<a href="#" onClick="return moveGame()";> Start! </a>
<br>
<IMG <span id= "Game" style= "left: 100px; top 100px; position; absolute;" SRC="/pics/drone.jpg" alt="drone" width="100">
<script>
<SCRIPT LANGUAGE="javascript">
function moveGame(){
var x;
x = Math.floor(Math.random()*4+1);
if (x==4 && game.style.pixelLeft>=10) {game.style.pixelLeft-=10;}
if (x==3 && game.style.pixelRight>=5) {game.style.pixelRight-=5;}
if (x==2 && game.style.pixelUp>=10) {game.style.pixelUp-=10;}
if (x==1 && game.style.pixelDown>=5) {game.style.pixelDown-=5;}
setTimeout("moveGame()",50);
}
</script>
</layer>`