Red button

by chrisloughnane

HTML

<div class='redbutton'></div>
<p class="speech">ouch!</p>
<div id='score'>0</div>

CSS

div.redbutton {
    width: 392px;
    height:440px;
     background-image: url("http://richerramblings.files.wordpress.com/2011/08/big-red-button.jpg");
    position:fixed;
    transform: scale(.5,.5);
    -ms-transform: scale(.5,.5); /* IE 9 */
    -webkit-transform: scale(.5,.5); /* Safari and Chrome */
    -o-transform: scale(.5,.5); /* Opera */
    -moz-transform: scale(.5,.5); /* Firefox */   
}

p.speech
{
    position: relative;
	width: 200px;
	height: 100px;
    font-size: 3em;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}
p.speech:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}
p.speech:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}

.redbutton {
    cursor: pointer;
}

#score {
    position: absolute;
    top: 90%;
    left: 95%;
    font-size: 3em;
}

JavaScript

$(document).ready(function(){
    $('.speech').hide();
    move();
    
    $('.redbutton').click(function(e){
        $('.speech').fadeIn('fast').css({'top' : e.pageY-220,'left' : e.pageX}).fadeOut('slow');
        var score = parseInt($('#score').text());
        $('#score').text(score+1);
    });
    
    
    
});
function getNewPosition(){
    
    var height = $(window).height() - 220;
    var width = $(window).width() - 196;
    
    var newHeight = Math.floor(Math.random() * height);
    var newWidth = Math.floor(Math.random() * width);
    
    return [newHeight,newWidth];        
}

function move(){
    var position = getNewPosition();
    $('.redbutton').animate({ top: position[0], left: position[1] }, function(){
      setTimeout(move,200);        
    });   
}