just another dump game

index.haml

/ by: @vinhnx.

%h1 Click-a-trooper game
#game
  %img#troophead{:alt => "stormtrooper", :src => "https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/jsms/jquery-events/trooper.ico"}
    %img#vader{:alt => "vader", :src => "https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/jsms/jquery-events/vader.ico"}
      %img#r2d2{:alt => "r2d2", :src => "https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/jsms/jquery-events/r2d2.ico"}
        %img#sand{:alt => "sand", :src => "https://dl.dropbox.com/u/11357190/HTML-builds/test-lab/jsms/jquery-events/sand.ico"}
          %p
            SCORE:
            %span#score 0
          %p#success keep going!
          %p#force Luke, I'm your father!
          %p#r2 RXYAN 351u uS*SX 8 A
          %p#ss good job, buddy!
#startover Start over
%div{:style => "clear:both"}
%footer
  icons by
  %a{:href => "http://tooschee.com/"} Tooschee
  \&
  = succeed "." do
    %a{:href => "http://www.everaldo.com/", :title => ""} Everaldo Coelho

script.js

// ... just another dump game

$(function() {
  var score = 0,
    troophead = $("img#troophead"),
  	vader = $("img#vader"),
		r2d2 = $("img#r2d2"),
		sand = $("img#sand"),
		pscore = $("span#score"),
		success = $("p#success"),
		force = $("p#force"),
		r2 = $("p#r2"),
		ss = $("p#ss"),
		reset = $("div#startover"),
		info = $("span.info")
	;

	success.hide();
	force.hide();
	r2.hide();
	ss.hide();
	
	troophead.click(function() {
		score++;
		info.fadeIn();
		pscore.text(score);
		success.fadeIn(500).fadeOut(100);
	});
	vader.click(function() {
		score -= 10;
		pscore.text(score);
		force.fadeIn(500).fadeOut(1000);
	});
	r2d2.click(function() {
		score *= 2;
		pscore.text(score);
		r2.fadeIn(500).fadeOut(1300);
	});
	sand.click(function() {
		score += 10;
		pscore.text(score);
		ss.fadeIn(500).fadeOut(1600);
	});

	reset.click(function() {
			score = 0;
			pscore.text(score);
		});
});

style.less

// ... testing flexbox

@import url('http://fonts.googleapis.com/css?family=Doppio+One');

// base setting
// ------------

@100: 100%;
@fontFam: 'Doppio One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@basecl: #111;
@cl1: #E8A852;
@cl2: #D66D3D;
@cl3: #AB4628;
@cl4: #3D2614;
@cl5: #B5AF5F;

*, *:before, *:after { .box-sizing(); }
html {
  text-rendering: optimizeLegibility;
  overflow-y: hidden;
  height: 100%;
}
body {
  width: 900px;
  margin: 0 auto;
  background: lighten(@basecl, 5%);
  font: 14px/2 @fontFam;
  font-weight: 500;
  color: @cl5;
  vertical-align: middle;
  text-shadow: 0 -1px 0 @basecl;
}

::-moz-selection { background: @cl1; color: #222; text-shadow: none; }
::selection { background: @cl1; color: #222; text-shadow: none; }

a, a:visited {
  color: #fc3;
  text-decoration: none;
  &:hover {
    color: #FF8000;
  }
}

h1{
  color: @cl5;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 70px;
  line-height: 50px;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 1px 5px 6px @basecl;
  
}

.hot-pink {
  color: #FF0080;
  font-weight: 900;
  text-transform: uppercase;
}

#game {
  display: flex;
  width: 80%;
  height: auto;
  float: left;
  background: #408080;
  color: lighten(@cl5, 25%);
  padding: 1em;
  .border-radius();
  .box-shadow();
}

#startover {
  text-align: center;
  float: right;
  padding: .5em 1em;
  font-size: 1.400em;
  border: 1px solid rgb(19, 89, 132);
  background:rgb(30, 117, 170);
  -webkit-box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 0 #333;
  color: #fff;
  .border-radius();
}

#startover:hover {
  cursor: pointer;
  background:rgb(25, 113, 168)
}

#startover:active {
  top: 1px;
  position: relative;
  box-shadow: 0 0 7px #000
}

#game img {
  margin: 1em;
  padding: .5em;
}

img:hover {
  cursor: pointer;
  background: rgba(0,0,0,.1);
  padding: .5em;
  -webkit-box-shadow: inset 0 0 9px #000;
  -moz-box-sizing: inset 0 0 9px #000;
  box-sizing: inset 0 0 9px #000;
  .transition-duration();
  .border-radius();
}

img:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

footer {
  font-size: 80%;
  text-align: center;
  position: absolute;
  bottom: 1em;
}

#score {
  color: @cl5;
}

// HELPERS
// -------
.box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

.box-shadow(@x: 1px, @y: 5px, @blur: 6px, @color: #000) {
  -webkit-box-shadow:  @x @y @blur @color;
  -moz-box-sizing:  @x @y @blur @color;
  box-sizing:  @x @y @blur @color;
}

.transition-duration(@timming: 150ms) {
  -webkit-transition-duration: @timming;
  -moz-transition-duration: @timming;
  transition-duration: @timming;
}