This game is similar to guessing number game, but now we have x and y which is represent the position x, y of the screen. Now the player have to guess 2 numbers. Players can only guess 10 times. There is no new function or properties in this game.
Here is the source of the game:
css code:
html code:#stage{width: 300px;height: 400px;position: relative;overflow:hidden;}#background{width: 300px;height: 400px;position: absolute;top: 0px;left: 0px;background-image: url(../images/back.jpg);z-index:1;}#cannon{width: 60px;height: 40px;position: absolute;top: 360px;left: 120px;background-image: url(../images/cannon.png);z-index:3;-webkit-transition: 0.5s ease-out 0s;-moz-transition: 0.5s ease-out 0s;transition: 0.5s ease-out 0s;}#alien{width: 40px;height: 30px;position: absolute;top: 120px;left: 80px;background-image: url(../images/alien.jpg);z-index:4;-webkit-transition: 0.5s ease-out 0s;-moz-transition: 0.5s ease-out 0s;transition: 0.5s ease-out 0s;}#explose{width: 40px;height: 30px;position: absolute;top: 120px;left: 80px;display:none;background-image: url(../images/explose.jpg);z-index:4;}#missile{width: 10px;height: 10px;position: absolute;top: 360px;left: 145px;background-image: url(../images/missile.png);z-index:5;-webkit-transition: 0.5s ease-out 0s;-moz-transition: 0.5s ease-out 0s;transition: 0.5s ease-out 0s;}
<!doctype html>
<html>
<meta charset="utf-8">
<title>Alien Attack</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />
<body>
<div id="stage">
<div id="background"></div>
<div id="cannon"></div>
<div id="missile"></div>
<div id="alien"></div>
<div id="explose"></div>
</div>
<p id="output">Enter the X and Y position (0-300), then click fire.</p>
<input id="inputX" type="text" placeholder="X...">
<input id="inputY" type="text" placeholder="Y...">
<button id="button1">fire!</button>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>javascript code:
//Game variables
var alienX = 80;
var alienY = 20;
var guessX = 0;
var guessY = 0;
var shotsRemaining = 8;
var shotsMade = 0;
var gameState = "";
var gameWon = false;
//The game objects
var cannon = document.querySelector("#cannon");
var alien = document.querySelector("#alien");
var explose = document.querySelector("#explose");
var missile = document.querySelector("#missile");
//The input and output fields
var inputX = document.querySelector("#inputX");
var inputY = document.querySelector("#inputY");
var output = document.querySelector("#output");
//The button
var button = document.querySelector("#button1");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);
function render()
{
//Position the cannon
cannon.style.left = (guessX-30) + "px";
//Position the missile
missile.style.left = (guessX-5) + "px";
missile.style.top = guessY + "px";
//Position the alien
alien.style.left = alienX + "px";
alien.style.top = alienY + "px";
}
function clickHandler()
{
validateInput();
}
function playGame()
{
shotsRemaining = shotsRemaining - 1;
shotsMade = shotsMade + 1;
gameState = " Shots: " + shotsMade + ", Remaining: " + shotsRemaining;
guessX = parseInt(inputX.value);
guessY = parseInt(inputY.value);
//Find out whether the player's x and y guesses are inside
//The alien's area
//alert('ab');
if(guessX >= alienX && guessX <= alienX + 20)
{
//Yes, it's within the X range, so now let's
//check the Y range
if(guessY >= alienY && guessY <= alienY + 20)
{
//It's in both the X and Y range, so it's a hit!
gameWon = true;
endGame();
}
}
else
{
output.innerHTML = "Miss!" + gameState;
//Check for the end of the game
if (shotsRemaining < 1)
{
endGame();
}
}
//Update the alien's position if the
//game hasn't yet been won
if(!gameWon)
{
//Update the alien's X position
alienX = Math.floor(Math.random() * 280);
//Add 30 to the new Y position so that
//the alien moves down toward earth
alienY += 30;
alienY = alienY % 400;
}
//Render the new game state
render();
console.log("X: " + alienX);
console.log("Y: " + alienY);
}
function validateInput()
{
guessX = parseInt(inputX.value);
guessY = parseInt(inputY.value);
if(isNaN(guessX) || isNaN(guessY))
{
output.innerHTML = "Please enter a number.";
}
else
if(guessX > 300 || guessY > 400)
{
output.innerHTML = "Please enter a number less than 300x400.";
}
else
{
playGame();
}
}
function endGame()
{
if(gameWon)
{
explose.style.display="block";
explose.style.top = alien.style.top;
explose.style.left=alien.style.left;
missile.style.display="none";
output.innerHTML = "Hit! You saved the earth!" + "<br>" + "It only took you " + shotsMade + " shots.";
}
else
{
output.innerHTML = "You lost!" + "<br>" + "The earth has been invaded!";
}
}Images:
No comments:
Post a Comment