Skip to content

Instantly share code, notes, and snippets.

@ryanorsinger

ryanorsinger/whack step 1

Last active August 29, 2015 14:07
Show Gist options
  • Save ryanorsinger/2723923b2b15f69edf6a to your computer and use it in GitHub Desktop.
Save ryanorsinger/2723923b2b15f69edf6a to your computer and use it in GitHub Desktop.
Download ZIP
Whack-a-mole intro
Raw
whack step 1
<html>
<head>
<title>Whack A Mole</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#game-board {
width: 700;
margin: left;
}
.mole {
display : none;
height: 149px;
width: 149px;
}
.mole-hole {
border: 1px dashed gray;
float: left;
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<h1>Welcome to Whack a Mole-Cricket</h1>
<button id="start-button">Start</button>
<div id="game-board">
<div class="mole-hole" id="1">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="2">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="3">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="4">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="5">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="6">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="7">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="8">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="9">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="10">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="11">
<img src="img/mole.png" class="mole">
</div>
<div class="mole-hole" id="12">
<img src="img/mole.png" class="mole">
</div>
</div>
<script>
var holes = $('.mole-hole');
$('#start-button').click(function() {
$('.mole').fadeIn(300);
});
$('.mole').click(function() {
$(this).fadeOut(300)
});
</script>
</body>
</html>
Raw
whack step 2
<html>
<head>
<title>Whack A Mole</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#game-board {
width: 700;
}
.mole {
display : none;
height: 149px;
width: 149px;
}
.mole-hole {
border: 1px dashed gray;
float: left;
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<h1>Welcome to Whack a Mole-Cricket</h1>
<button id="start-button">Start</button>
<div id="game-board">
<div class="mole-hole">
<img src="img/mole.png" id="1" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="2" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="3" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="4" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="5" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="6" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="7" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="8" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="9" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="10" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="11" class="mole">
</div>
<div class="mole-hole">
<img src="img/mole.png" id="12" class="mole">
</div>
</div>
<script>
var score = 0;
// Function to show the mole.
var show = function() {
// Fade out any moles
$('.mole').hide();
// Show a random mole
var rand = Math.floor((Math.random() * 12) + 1);
var hole = $("#"+[rand]);
hole.fadeIn();
}
$('#start-button').click(function() {
show();
});
$('.mole').click(function() {
$(this).fadeOut(300)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment