Hey guys, I\'m having an HTML issue. For class, I am to create a game that has t
ID: 3661545 • Letter: H
Question
Hey guys, I'm having an HTML issue.
For class, I am to create a game that has two pictures on it. One to start the game, and the other one is a part of the game. I have a start image that the end user would click on to start the game. Upon start of the game, the image (drone.jpg) inside the game will begin moving randomly in random directions. It is not supposed to move more than 10 pixels from it's original position. The game is to countdown from 30 seconds, and at the end it will give a total of the amount of times the end user was able to click on the image in the game (drone.jpg) before the time ran out.
So far, I am having troubles with getting the javascript to work to move the image around on click, and I have been searching around for days trying to figure out how to get the timer to work and am at a loss. Can any one help me? Here is my code so far for the html page which I have in the body tags..
<img id="start" src="pics/start.jpg" alt="Start" width="50">
<span id= "dronestyle">
<img id="drone" src="pics/drone.jpg" alt="drone" width="100"></span>
<script>
var object = document.getElementById('drone');
var startobject = document.getElementById('start');
startobject.onclick=function(){
var x = Math.floor((Math.random() * 4)+1);
if (x==4 && object.style.pixeLeft>=10) {object.style.pixelLeft-=10;}
if (x==3 && object.style.pixelRight>=5) {object.style.pixelRight-=5;}
if (x==2 && object.style.pixelUp>=10) {object.style.pixelUp-=10;}
if (x==1 && object.style.pixelDown>=5) {object.style.pixelDown-=5;}
};
</script>
Explanation / Answer
<html>
<script type="text/javascript">
var img = document.getElementById('drone');
function moveRandom(){
var x = Math.floor((Math.random() % 4) + 1);
if (x == 4 && object.style.pixeLeft>=10) {
object.style.pixelLeft-=10;
}
if (x == 3 && object.style.pixelRight>=5) {
object.style.pixelRight-=5;
}
if (x == 2 && object.style.pixelUp >= 10) {
object.style.pixelUp-=10;
}
if (x == 1 && object.style.pixelDown >= 5) {
object.style.pixelDown-=5;
}
}
</script>
<body>
<form>
<img id="start" src="pics/start.jpg" alt="Start" width="50">
<span id= "dronestyle">
<img id="drone" src="pics/drone.jpg" alt="drone" width="100"></span>
</form>
</body>
</html>