Alien Attack – HTML5 game

See example bellow:

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:

#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;

}

html code:

<!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 300×400.”;

}

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:

Leave a Reply

Your email address will not be published. Required fields are marked *