Skip to content

Instantly share code, notes, and snippets.

@rummik
Created April 26, 2014 08:48
Show Gist options
  • Save rummik/11315124 to your computer and use it in GitHub Desktop.
Save rummik/11315124 to your computer and use it in GitHub Desktop.
Random clicky game.
<!doctype html>
<meta charset="utf-8">
<title>Dragon Hatcher</title>
<link href="//fonts.googleapis.com/css?family=Imprima" rel="stylesheet">
<div id="count">0</div>
<div id="clicky">hatch</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
(function() {
var Game = {
cheats: false,
clicks: 0,
increment: 1,
upgrades: {},
achievements: {}
};
Game.click = function(n) {
this.clicks += n || this.increment;
this.draw();
};
if (Game.cheats)
window.Game = Game;
// Events
// ======
function bind(fn) {
fn = fn || function() {};
return function(ev) {
var event = ev || event;
event.preventDefault();
fn.call(this, event);
};
}
window.oncontextmenu = bind();
(function() {
var count = document.getElementById('count');
Game.draw = function() {
count.innerHTML = this.clicks;
};
})();
(function() {
var clicky = document.getElementById('clicky');
clicky.onmousedown = bind(function() {
Game.click();
});
clicky.onmousewheel = bind(function() {
var that = this;
Game.click();
if (this.className != 'active') {
this.className = 'active';
setTimeout(function() {
that.className = '';
}, 1000 / 15);
}
});
})();
})();
@hue: 40;
@saturation: 70%;
@lightness: 90%;
body {
font-family: 'Imprima', sans-serif;
}
#clicky {
background: hsl(@hue, @saturation, @lightness)
-webkit-radial-gradient(
80px 30px,
hsla(@hue, @saturation, 90%, .4),
hsla(@hue, @saturation, 60%, .2) 25%,
hsla(@hue, @saturation, 20%, .4) 65%,
hsla(@hue, @saturation, 0%, .5)
);
border-top-left-radius: 100px 190px;
border-top-right-radius: 100px 190px;
border-bottom-left-radius: 100px 110px;
border-bottom-right-radius: 100px 110px;
width: 200px;
height: 300px;
margin: -150px -100px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
line-height: 300px;
font-size: 40px;
font-family: sans;
//color: #888;
//text-shadow: 0 0 30px #ccc;
color: transparent;
cursor: pointer;
&:active, &.active {
width: 190px;
height: 285px;
margin: -142px -95px;
line-height: 285px;
font-size: 39px;
}
}
#count {
position: absolute;
top: 50%;
left: 50%;
margin: 160px -150px;
text-align: center;
width: 300px;
font-size: 100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment