Html assignment

Question

I have an HTML issue. This is for a intro web programming class that I have no clue what is going on.

Some web pages are written in a comibination of HTML and JavaScript. In this Application, you will create a video game using HTML and JavaScript. The idea of the game is that an image will move on screen randomly and the player will try to click the image as many times as possible before time runs out. The score will increase each time the player successfully clicks the image.

Perform the following steps:

Create a Web page called “game.html” and place it in the root directory. To that page, add a layer, which will be treated as an object, with an image for its contents. Add another image which will start the game when clicked on. When the game starts, the layer, including the image, will move randomly in any direction but not more than 10 pixels. The layer will not leave the visible screen space. You may assume an 800x600 resolution setting. Be creative when choosing your images, but avoid anything that may be considered explicit or offensive.

Add a timer, or loop, to determine how long the game will run. This should be set to 30 seconds. You will need to experiment to determine how many times a loop must repeat to make it last 30 seconds. One of the ways to accomplish this is by using the command “setTimeout()” which executes a code some time in the future. As an example, the following command will call the function “FlyLogoIE” exactly 50 milliseconds after this line is executed:

setTimeout("FlyLogoIE()",50);

The game should proceed as follows:

The score starts at 0. Each time the user clicks the image, one point is added to the score. This score is constantly displayed either on the status bar or somewhere in the background.

On every click, the layer also moves randomly, by not more than 10 pixels, to another part of the screen.

The game continues until the time runs out. Optionally, a dialog box appears telling the user his or her final score. The user now has the option to restart the game by clicking the “Start” image again.

For an extra challenge, implement levels of difficulty for the game. Add instructions that prompt the user for the level of difficulty at which he or she wants to play. A higher level of difficulty would correspond to either faster motion, a smaller target, or both. Perform this step only if all other requirements are met and you still have time before the due date. No extra points will be given to you for this step.

Add a link from your homepage to this web page.

Test the code thoroughly before publishing it.

Here is what I've done so far, but am lost. Can you help?

<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>`

Well, good job copying your homework assignment. You really should just start with what issue you are having rather than asking the community to do your homework for you. Saying that you are lost is an issue, but not a programming issue. — SoluableNonagon, Dec 28 '15 at 16:30
I appologize. I'm not sure where I am having the issue. They are requiring that I use notepad to write the code, so I don't get any errors when I load the page. Other than it doesn't work. So, I'm not sure where I am going wrong. I don't want the community to do my homework assignment. I'm trying to learn. Sorry if it came out the wrong way. — James, Dec 28 '15 at 16:32
General advice: look up game loops and how they work in web browsers. Define the components of the game and look up how each one is made (the game window, the layers, the icons, actions) and separate the logic out. — SoluableNonagon, Dec 28 '15 at 16:33
You have multiple components you need to create, start with one. Can you use HTML Canvas? Something simple you could look at is http://stackoverflow.com/questions/16755991/html5-canvas-moving-object-to-mouse-click-position or http://www.tutorialspoint.com/javascript/javascript_animation.htm — SoluableNonagon, Dec 28 '15 at 16:35
There’s no such thing as a `layer` element. There’s a stray semicolon in your `a` tag, there’s a stray `` before your actual ` — Sebastian Simon, Dec 28 '15 at 16:37
*" I appologize. I'm not sure where I am having the issue. They are requiring that I use notepad to write the code, so I don't get any errors when I load the page."* The errors will appear in the JavaScript console in your browser. — epascarello, Dec 28 '15 at 16:40
Possible duplicate of [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Shantanu Nandan, Dec 28 '15 at 17:11

score 0 · Answer 1 · answered Dec 28 '15 at 16:45

Start of with something like this:

JS:

// timer
var gameLength = 30 * 1000; // 30 seconds

function startGame(){
    runGame();
    setTimeout( endGame, gameLength );
}

function endGame(){
    // stop listening for click
}

function runGame(){
    // register click listeners
    // main game loop
}

var myElement = {
     htmlElement: "img",
     onClick: function(){ /* do stuff */ },
     moveRandomly: function(){ /* do stuff */ },
     state: 'listening' // or not
}

var viewPort = {
     htmlElement: 'div',
     draw: function(){ /* do stuff */ }
}

This is really just to get you started. There is more and it could be written better. You need to Object Orient this stuff so that each component is easy to understand, easy to modify, and then you'll be on your way in programming.

Part of learning programming is the struggle. Most everyone has been there. Don't give up.

Html assignment

1 Answers1