Hi everyone,
So this is a game which I would like learning to modify it
It's basically a rocket that should get to the base, I want to change it to a person that just walks right and left and when collided to the base, an alert shows up.
The person is based on the ground x= middle of the page , y =0
This is the code
<html>
<head>
<title>Lunar Lander</title>
<style>
#fuel { position: absolute; top: 25; left: 10; border: 1px solid black; }
#shroom { position: absolute; left: 0px; top: 0px; z-index: 0; }
#landingZone { position: absolute; top: 600px; left: 525px; width: 400px; }
/* Debugging output */
#debugOutput { position: absolute; top: 100; left: 10; }
</style>
<script>
var xPos = 0;
var yPos = 0;
var dx = 0;
var dy = 0;
var fuel = 200;
var gravity = .06;
var lander = null;
var landerHeight = 0;
var landerWidth = 0;
var fuelDiv = null;
function init() {
lander = document.getElementById( 'shroom' );
landerHeight = parseInt( lander.height );
landerWidth = parseInt( lander.width );
fuelDiv = document.getElementById( 'fuel' );
doAnimation(); // start the game
}
function doAnimation() {
dy += gravity;
xPos += dx;
yPos += dy;
lander.style.left = xPos + "px";
lander.style.top = yPos + "px";
// debugging output
document.getElementById( 'xPos' ).innerHTML = "xPos: " + xPos;
document.getElementById( 'yPos' ).innerHTML = "yPos: " + yPos;
document.getElementById( 'dx' ).innerHTML = "Dx: " + dx;
document.getElementById( 'dy' ).innerHTML = "Dy: " + dy;
if( yPos + landerHeight < 600 ) {
window.setTimeout( doAnimation, 30 );
} else {
if( xPos + landerWidth >= 525 && xPos <= 565 && Math.abs( dx ) < .75 && dy < 2 ) {
alert( 'win' );
} else {
alert( 'crashed!' );
}
}
}
function processKeypress( e ) {
var keyCode = e.keyCode || e.which;
var ch = String.fromCharCode( keyCode );
if( ch == 'a' || ch == 'd' || ch == 'w' ) {
// Only use fuel when pressing a, d, or w
if( fuel > 0 ) fuel--;
fuelDiv.innerHTML = "Fuel Remaining: " + fuel;
if( fuel > 0 ) {
if( ch == 'a' ) dx -= 2;
if( ch == 'd' ) dx += 2;
if( ch == 'w' ) dy -= 2;
} else {
fuelDiv.innerHTML += " (OUT OF FUEL!!!)";
}
}
}
</script>
</head>
<body onload="init();" onKeyPress="processKeypress( event );">
<div id="fuel"></div>
<!-- Note: Height and Width must be set on image, so they can be read by the JavaScript -->
<img id="shroom" width="100" height="100" src="Images/mushroom.png"></p>
<!--<img src="Serenity2.jpg">-->
<div <img id="landingZone" src="Images/ball.png"></div>
<!-- For debugging output -->
<div id="debugOutput">
<div id="xPos"></div>
<div id="yPos"></div>
<div id="dx"></div>
<div id="dy"></div>
</div>
</body>
</html>