Skip to content

Instantly share code, notes, and snippets.

@kawaynejohnson

kawaynejohnson/index.html

Forked from anonymous/index.html
Created December 12, 2015 21:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kawaynejohnson/1a24c44861eef7ebbd67 to your computer and use it in GitHub Desktop.
Save kawaynejohnson/1a24c44861eef7ebbd67 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/daquwis
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<h1 id="game-over">YOU WIN!<h1>
<meta charset="utf-8">
<title>JS Bin</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<style id="jsbin-css">
body {
margin: 0;
background-image: url("http://data.whicdn.com/images/129645623/original.gif");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.stormtrooper {
width:50px;
height:50px;
float:left;
background-image: url("http://rs348.pbsrc.com/albums/q354/Kuro_wolf93/Storm-trooper-pixel-icon_zpsc8ee0b24.gif~c200");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.space{
width:50px;
height:50px;
float:left;
}
.row{
overflow:hidden;
}
#ship {
height:50px;
width:50px;
position:absolute;
top: 300px;
left:0;
display:block;
}
#bullet{
display: none;
}
.hidden {
visibility: hidden;
}
#game-over{
color:white;
display:none;
font-size:200px;
text-align: center;
}
</style>
</head>
<body>
<div class="row">
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="space"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
</div>
<div class="row">
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="space"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
</div>
<div class="row">
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="space"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
<div class="stormtrooper"></div>
</div>
<div class="row">
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
</div>
<div class="row">
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
</div>
<div class="row">
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
</div>
<img id="bullet" src=
"http://icons.iconarchive.com/icons/calle/smith-and-wesson/16/Single-Bullet-icon.png">
<img id="ship" src=
"http://cliparts.co/cliparts/pT5/A7L/pT5A7L8T9.png">
<audio id="shoot"><source src=
"http://static1.grsites.com/archive/sounds/scifi/scifi002.mp3"></audio>
<audio id="backgroundmusic"><source src=
"http://picosong.com/cdn/1b14d8263adc98072fec0a75717e5691.mp3"></audio>
<script id="jsbin-javascript">
$('#backgroundmusic')[0].play();
var audio = $("#shoot")[0];
$(window).keypress(function(e) {
// space key
if (e.keyCode === 0 || e.keyCode === 32) {
e.preventDefault();
//Restart Shooting Sound
audio.pause();
audio.currentTime = 0;
audio.play();
// $("#bullet").show();
var shipposition = Math.floor($("#ship").position().left / 50) *
50;
var $samecol = $('.stormtrooper:not(".hidden")').filter(
function() {
return Math.round($(this).position().left) ===
shipposition;
});
var largestTop = 0;
var $bottomEl;
$samecol.each(function() {
if (!$bottomEl || parseInt($(this).position().top) >
largestTop) {
largestTop = parseInt($(this).position().top);
$bottomEl = $(this);
}
});
$bottomEl.css('background-image', 'url("https://s-media-cache-ak0.pinimg.com/originals/10/92/fa/1092fa7d42c7db063aaf5f1d517b1692.gif")');
setTimeout(function () {
$bottomEl.addClass('hidden');
}, 1000);
checkIfGameIsOver();
}
});
$('body').keydown(function(e){
if (e.keyCode == 37) {
$('#ship').finish();
if ($("#ship").position().left > 0) {
$('#ship').animate({
left: '-=50'
});
}
}
if (e.keyCode == 39) {
$('#ship').finish();
if ($("#ship").position().left < 350) {
$('#ship').animate({
left: '+=50'
});
}
}
});
function checkIfGameIsOver(){
if ($('.stormtrooper:not(".hidden")').length == 1){
$('#game-over').show();
}
}
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
background-image: url("http://data.whicdn.com/images/129645623/original.gif");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.stormtrooper {
width:50px;
height:50px;
float:left;
background-image: url("http://rs348.pbsrc.com/albums/q354/Kuro_wolf93/Storm-trooper-pixel-icon_zpsc8ee0b24.gif~c200");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.space{
width:50px;
height:50px;
float:left;
}
.row{
overflow:hidden;
}
#ship {
height:50px;
width:50px;
position:absolute;
top: 300px;
left:0;
display:block;
}
#bullet{
display: none;
}
.hidden {
visibility: hidden;
}
#game-over{
color:white;
display:none;
font-size:200px;
text-align: center;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('#backgroundmusic')[0].play();
var audio = $("#shoot")[0];
$(window).keypress(function(e) {
// space key
if (e.keyCode === 0 || e.keyCode === 32) {
e.preventDefault();
//Restart Shooting Sound
audio.pause();
audio.currentTime = 0;
audio.play();
// $("#bullet").show();
var shipposition = Math.floor($("#ship").position().left / 50) *
50;
var $samecol = $('.stormtrooper:not(".hidden")').filter(
function() {
return Math.round($(this).position().left) ===
shipposition;
});
var largestTop = 0;
var $bottomEl;
$samecol.each(function() {
if (!$bottomEl || parseInt($(this).position().top) >
largestTop) {
largestTop = parseInt($(this).position().top);
$bottomEl = $(this);
}
});
$bottomEl.css('background-image', 'url("https://s-media-cache-ak0.pinimg.com/originals/10/92/fa/1092fa7d42c7db063aaf5f1d517b1692.gif")');
setTimeout(function () {
$bottomEl.addClass('hidden');
}, 1000);
checkIfGameIsOver();
}
});
$('body').keydown(function(e){
if (e.keyCode == 37) {
$('#ship').finish();
if ($("#ship").position().left > 0) {
$('#ship').animate({
left: '-=50'
});
}
}
if (e.keyCode == 39) {
$('#ship').finish();
if ($("#ship").position().left < 350) {
$('#ship').animate({
left: '+=50'
});
}
}
});
function checkIfGameIsOver(){
if ($('.stormtrooper:not(".hidden")').length == 1){
$('#game-over').show();
}
}</script></body>
</html>
Raw
jsbin.daquwis.css
body {
margin: 0;
background-image: url("http://data.whicdn.com/images/129645623/original.gif");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.stormtrooper {
width:50px;
height:50px;
float:left;
background-image: url("http://rs348.pbsrc.com/albums/q354/Kuro_wolf93/Storm-trooper-pixel-icon_zpsc8ee0b24.gif~c200");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.space{
width:50px;
height:50px;
float:left;
}
.row{
overflow:hidden;
}
#ship {
height:50px;
width:50px;
position:absolute;
top: 300px;
left:0;
display:block;
}
#bullet{
display: none;
}
.hidden {
visibility: hidden;
}
#game-over{
color:white;
display:none;
font-size:200px;
text-align: center;
}
Raw
jsbin.daquwis.js
$('#backgroundmusic')[0].play();
var audio = $("#shoot")[0];
$(window).keypress(function(e) {
// space key
if (e.keyCode === 0 || e.keyCode === 32) {
e.preventDefault();
//Restart Shooting Sound
audio.pause();
audio.currentTime = 0;
audio.play();
// $("#bullet").show();
var shipposition = Math.floor($("#ship").position().left / 50) *
50;
var $samecol = $('.stormtrooper:not(".hidden")').filter(
function() {
return Math.round($(this).position().left) ===
shipposition;
});
var largestTop = 0;
var $bottomEl;
$samecol.each(function() {
if (!$bottomEl || parseInt($(this).position().top) >
largestTop) {
largestTop = parseInt($(this).position().top);
$bottomEl = $(this);
}
});
$bottomEl.css('background-image', 'url("https://s-media-cache-ak0.pinimg.com/originals/10/92/fa/1092fa7d42c7db063aaf5f1d517b1692.gif")');
setTimeout(function () {
$bottomEl.addClass('hidden');
}, 1000);
checkIfGameIsOver();
}
});
$('body').keydown(function(e){
if (e.keyCode == 37) {
$('#ship').finish();
if ($("#ship").position().left > 0) {
$('#ship').animate({
left: '-=50'
});
}
}
if (e.keyCode == 39) {
$('#ship').finish();
if ($("#ship").position().left < 350) {
$('#ship').animate({
left: '+=50'
});
}
}
});
function checkIfGameIsOver(){
if ($('.stormtrooper:not(".hidden")').length == 1){
$('#game-over').show();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment