|
Hi I am doing an assignment that uses JavaScript and wondering if anyone had any suggestions. I am really new to this and am not very familiar with the language so here it goes:
In the assignment I am asked to create a lunar lander game from elements in the HTML document.
I have been asked to make the lunar lander move up, down, left, right. I have this working, and I also have boundaries set. But what I need is some code to check to see if the lunar lander is in a predetermined range, once it is there a message image will pop up. This is where I am having the issues.
Here is the HTML code:
<body onload="hideMessageBubble('landed')">
<div id="landscape">
<img src="assets/lunarlandscape.gif" alt="Lunar Landscape" id="landscape1"/> </div>
<div id="lander">
<img src="assets/lundar_lander.gif" alt="Lunar Lander" id="lander1" /></div>
<div id="youLanded">
<img src="assets/you_landed.gif" id="landed" /></div>
<div></div>
<div id="controlPanel">
<img src="assets/left_but.gif" alt="Left" id="left" onmousedown="moveLander('lander', 10, 'left')" />
<img src="assets/right_but.gif" alt="Right" id="right" onmousedown="moveLander('lander', 10, 'right')" />
<img src="assets/up_but.gif" alt="Up" id="up" onmousedown="moveLander('lander', 10, 'up')" />
<img src="assets/down_but.gif" alt="Down" id="down" onmousedown="moveLander('lander', 10, 'down')" /> </div>
</body>
Here is what I have so far for the JavaScript part:
// JavaScript Document
////////////////////////////////////////////////
/////Assignment 5.1 - External JavaScript///////
////////////////////////////////////////////////
var element;
//Function to hide message bubble onload.
function hideMessageBubble(id) {
element = document.getElementById(id);
element.style.visibility = "hidden";
}
//Variables and values to define position
//of element.
var minTop = 120;
var maxTop = 200;
var minLeft = 120;
var maxLeft = 475;
var currentLeft = 110;
var currentTop = 210;
//Targets created to detect when the lander comes into the area in which the message will be displayed.
var targetXSt = 320;
var targetYSt = 180;
var targetXEn = 370;
var targetYEn = 160;
//Function to define the elements position
//on click of arrow buttons.
function moveLander(id, distance, direction) {
var div = document.getElementById(id);
if(direction == "up" && currentTop >= (minTop + distance)) {
currentTop -= distance;
div.style.top = currentTop + "px";
var nowYEn = div.style.top;
} else if (direction == "down" && currentTop <= (maxTop - distance)) {
currentTop += distance;
div.style.top = currentTop + "px";
var nowYSt = div.style.top;
} else if (direction == "left" && currentLeft >= (minLeft + distance)) {
currentLeft -= distance;
div.style.left = currentLeft + "px";
} else if (direction == "right" && currentLeft <= (maxLeft + distance)) {
currentLeft += distance;
div.style.left = currentLeft + "px";
//I have this code displaying the message, but when I go to add the rest
//of the conditions, it does not seem to run.
} else if (currentTop >= (targetYEn + distance)) {// && currentTop <= (targetYSt - distance)) {
element.style.visibility = "visible";
}
}
If anyone could help me that would be great!!
Thank you!
|
