Skip to content

Instantly share code, notes, and snippets.

@jonjonferriterferriter

jonjonferriterferriter/gist:4227682

Created December 6, 2012 19:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonjonferriterferriter/4227682 to your computer and use it in GitHub Desktop.
Save jonjonferriterferriter/4227682 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Final</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#field {
height:500px;
width:500px;
background: #ff9;
float:left;
z-index: 1;
}
#rails {
height:450px;
width:450px;
background: #ff9;
position: absolute;
top:25px;
left:25px;
border: 1px solid black;
z-index: 2;
}
#player {
position: absolute;
height:50px;
width:50px;
z-index: 3;
}
#bullet {
position: absolute;
height:10px;
width:10px;
z-index: 3;
background-color: black;
}
#smallEnemy {
height:15px;
width:15px;
background-color: #C09;
}
#mediumEnemy {
height:50px;
width:50px;
background-color: #0f0;
}
#largeEnemy {
height:100px;
width:100px;
background-color: #ff0
}
#xlargeEnemy {
height:200px;
width:200px;
background-color: #00f;
}
.starter{background-color: black;}
.down{ background-color: #ff0;}
.up{background-color: #339}
.left{background-color:#ccf;}
.right{background-color:#6C3;}
.hit{visibility: none;}
</style>
</head>
<body>
<section id="field">
<div id="rails"></div>
<div id="player" class="starter"></div>
</section>
<section id="startField">
<button type="button" id="startBtn">START</button>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timer.js"></script>
<script type="text/javascript">
var gameOver = false;
//declare some clean up variables
var Pleft, Ptop;
//declare some variables that will help determine where the bullet will start from
var bulletOriginY, bulletOriginX;
//start the game once you click the start button
$('#startBtn').click(function() {
//disable the button when it is clicked so you can't click it any more
$('#startBtn').attr('disabled', 'disabled');
//start the game function
game();
});
//----------- main game function --------------//
var game = function() {
//if the game is not over, run the main code
if (gameOver === false) {
//------------enemy set up--------------------//
//--------------------player movement and imaging--------------//
$(document).keydown(function(event) {
Ptop = $('#player').position().top;
Pleft = $('#player').position().left;
//firing function
var shoot = function() {
//determine which way the bullet will fire
if ($('#player').hasClass('down')) {
bulletOriginY = Ptop - 5;
bulletOriginX = Pleft + 23;
};
if ($('#player').hasClass('right')) {
bulletOriginY = Ptop + 23;
bulletOriginX = Pleft - 5;
};
if ($('#player').hasClass('left')) {
bulletOriginY = Ptop + 23;
bulletOriginX = Pleft + 46;
};
if ($('#player').hasClass('up')) {
bulletOriginY = Ptop + 46;
bulletOriginX = Pleft + 23;
};
//create the bullet
var bullet = $('<div>');
//give the bullet the right ID
bullet.attr({
id: 'bullet'
});
//set up the CSS of the bullet so it will spawn in the right spot
bullet.css({
'top': (bulletOriginY + 'px'),
'left': (bulletOriginX + 'px')
});
//append the bullet to the field
$('#field').append(bullet);
};
//----------------------MOVEMENT AND FIRING-------------------------//
//check if it's top is zero or it's left is zero
if (Ptop === 0 || Ptop === 450 || Pleft === 0 || Pleft === 450) {
//check if both are zero (TOP CORNER)
if (Ptop === 0 && Pleft === 0) {
switch (event.keyCode) {
case 68:
$('#player').animate({
left: '+=5px'
}, 10); // MOVE RIGHT
break;
case 83:
$('#player').animate({
top: '+=5px'
}, 10); // MOVE DOWN
break;
}
}
//check if top is zero only
if (Ptop === 0 && Pleft !== 0 && Pleft !== 450) {
//give the player the right class depending on where it is in the field
if (!$('#player').hasClass("up")) {
$('#player').removeClass("down left right");
$('#player').addClass("up");
}
switch (event.keyCode) {
case 65:
$('#player').animate({
left: '-=5px'
}, 10); // MOVE LEFT
break;
case 68:
$('#player').animate({
left: '+=5px'
}, 10); // MOVE RIGHT
break;
}
}
//check if left is zero only
if (Ptop !== 0 && Ptop !== 450 && Pleft === 0) {
//give the player the right class depending on where it is in the field
if (!$('#player').hasClass("left")) {
$('#player').removeClass("down right up");
$('#player').addClass("left");
}
switch (event.keyCode) {
case 87:
$('#player').animate({
top: '-=5px'
}, 10); // MOVE UP
break;
case 83:
$('#player').animate({
top: '+=5px'
}, 10); // MOVE DOWN
break;
}
}
//check to see if the player is in the bottom left corner
if (Ptop === 450 && Pleft === 0) {
switch (event.keyCode) {
case 87:
$('#player').animate({
top: '-=5px'
}, 10); // MOVE UP
break;
case 68:
$('#player').animate({
left: '+=5px'
}, 10); // MOVE RIGHT
break;
}
}
if (Ptop === 450 && Pleft !== 0 && Pleft !== 450) {
//give the player the right class depending on where it is in the field
if (!$('#player').hasClass("down")) {
$('#player').removeClass("left right up");
$('#player').addClass("down");
}
switch (event.keyCode) {
case 65:
$('#player').animate({
left: '-=5px'
}, 10); // MOVE LEFT
break;
case 68:
$('#player').animate({
left: '+=5px'
}, 10); // MOVE RIGHT
break;
}
}
if (Ptop === 450 && Pleft === 450) {
switch (event.keyCode) {
case 87:
$('#player').animate({
top: '-=5px'
}, 10); // MOVE UP
break;
case 65:
$('#player').animate({
left: '-=5px'
}, 10); // MOVE LEFT
break;
}
}
if (Ptop !== 450 && Ptop !== 0 && Pleft == 450) {
//give the player the right class depending on where it is in the field
if (!$('#player').hasClass("right")) {
$('#player').removeClass("left down up");
$('#player').addClass("right");
}
switch (event.keyCode) {
case 87:
$('#player').animate({
top: '-=5px'
}, 10); // MOVE UP
break;
case 83:
$('#player').animate({
top: '+=5px'
}, 10); // MOVE DOWN
break;
}
}
if (Ptop === 0 && Pleft === 450) {
switch (event.keyCode) {
case 83:
$('#player').animate({
top: '+=5px'
}, 10); // MOVE DOWN
break;
case 65:
$('#player').animate({
left: '-=5px'
}, 10); // MOVE LEFT
break;
}
}
}
});
}
}​
</script>
</body>
</html>
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment