<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src='script.js'></script>
		<title></title>
	</head>
	<body>
		<div id='info'>
				<div id='instructions'>Hello and welcome to my game!!
					<br/>The premis is simple, use your mouse to collect as many green blocks as you can
					<br/>The Rules:
					<br/>1. Collect the green dots
					<br/>2. Avoid the red dots
					<br/>3. Green dots make your collector bigger
					<br/>4. Red dots make your collector smaller
					<br/>5. You lose a life for every red block you hit
					<br/>6. After you collect 30 blocks you advance to the next level (speeds up and more dots)
					<br/>7. After each level you gain a new life 
					<br/>8. Collect blue dots to gain an extra life
					<br/>9. Lose all your lives and GAME OVER.....
					<br/><br/>
					<div id='begin'>Start</div>
				</div>
	</div>

	<div id='frame'>
			<div id='title'>How high can you get?</div>
			<div id='inner'>
			    <div id ='other'><div id='box'></div></div>
				
				<div class='good'></div>
				<div class='bad'></div>
				<div class='ugly'></div>
			</div>
		</div>
		
		<div id='left'>
			<div id='clock'>
				<div id='top'>
					<div id='mins'>Minutes</div>
					<div id='secs'>Seconds</div>
				</div>
				<div id='bottom'></div>
			</div>
			<div id='score'>
				Score :<br/> 000000
			</div>
			<div id='button'>
				<div id='lives'>Lives</div>
				<div id='boxLeft'>Boxes Left</div>
				<div id='level'>level</div>
				<div id='easy'>Easy</div>
				<div id='hard'>Hard</div>
				<div id='extreme'>Extreme</div>
				<div id='start'>Play</div>
				<div id='stop'>Stop</div>
			</div>
		</div>
		
			</body>
</html>
html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        max-height:500px;
        background-image: url('http://static.hdw.eweb4.com/media/thumbs/1/13/123999.jpg');
      }
 
 #info{
 	position:relative;
 	z-index: 4;
 	width: 100%;
 	height: 100%;
 	background-color: black;
 	opacity:0.9;
 	color: white;

 }

 #instructions{
 	position:relative;
 	top:20%;
 	text-align: center;
 }

#begin{
	position: relative;
	cursor: pointer;
	border-radius: 20px;
	margin: 0 auto;
	width: 10%;
	background-color: red;
	text-align: center;
}

#frame{
	position:absolute;
	top:4%;
	left:2%;
	width:58%;
	height:91%;
	background: black;
	border: 2px solid black;
	cursor:none;
}

#inner{
	position: relative;
	left:10px;
	width:95%;
	height:95%;
}

#box{
	position:relative;
	top:80%;
	width:20px;
	height:3%;
	background-color: #add123;
	border-radius: 10px;
}

#left{
	position: absolute;
	left: 62%;
	top:5%;
	width: 35%;
	height:90%;
	border: 1px solid red;
}

#clock{
	position:relative;
	top:0;
	left:0;
	height:30%;
	width:100%;
	border: 1px solid red;
	background:black;
}

#top{
	position:relative;
	top:0;
	left:0;
	height:50%;
	width:99%;
}

#mins{
	padding-top:12%;
	color:white;
	position:relative;
	top:0;
	left:0;
	height:30%;
	width:48%;
	float:left;
	text-align:center;
	font-size:190%;
}

#secs{
	padding-top:12%;
	color:white;
	position:relative;
	top:0;
	left:0;
	width: 48%;
	height:30%;
	float: right;
	text-align:center;
	font-size:190%;
}

#bottom{
	color:white;
	text-align:center;
	font-size: 300%;
}

#score{
	color:white;
	text-align:center;
	font-size:300%;
	border: 1px solid red;
	background-color:black;
	height:30.1%;
	text:center;
}

#title{
	color:red;
	width:100%;
	font-size:200%;
	text-align:center;
	background:black;
}

#button{
	position:relative;
	background:black;
	width:100%;
	height:38.9%
	
}

#easy{
	position:absolute;
	left:4%;
	top:60%;
	width:28%;
	height:12%;
	background-color:blue;
	text-align:center;
	cursor: pointer;
	border-radius:10px;
}

#hard{
	position:absolute;
	left:37%;
	top:60%;
	width:28%;
	height:12%;
	background-color:red;
	text-align:center;
	cursor: pointer;
	border-radius:10px;
}

#extreme{
	position:absolute;
	left:70%;
	top:60%;
	width:28%;
	height:12%;
	background-color:red;
	text-align:center;
	cursor: pointer;
	border-radius:10px;
}

#start{
	position:absolute;
	left:55%;
	top:80%;
	width:40%;
	height:15%;
	background-color:#add123;
	text-align:center;
	cursor: pointer;
	border-radius:10px;
}

#stop{
	position:absolute;
	left:5%;
	top:80%;
	width:40%;
	height:15%;
	background-color:#add123;
	text-align:center;
	cursor: pointer;
	border-radius:10px;
}

#boxLeft{
	position:relative;
	top: 5px;
	color: white;
	float: left;
	width: 50%;
	text-align:center;
	font-size: 150%;
}

#level{
	position: relative;
	top: 5px;
	color: white;
	float: right;
	width: 20%;
	font-size: 150%;
	text-align:center;
}

#lives{
	position: relative;
	top: 5px;
	color: white;
	float: right;
	width: 20%;
	text-align:center;
	font-size: 150%;
}

.good{
	width:20px;
	height:20px;
	/*background-color:#add123;*/ 
	
	position:absolute;
	
	top:-200px;	
}

.newBlock{
	width:20px;
	height:20px;
	background-color:#add123;
	background-image :url( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9Rmc290ZpjfCdOeLaSfF9Eu-hEMwQ2eqUx8QK3Z6aD5nr_OkB'); 
	position:absolute;
	top:-50px;
	background-size: 100% 100%;
	border-radius: 1000000px;
}

.bad{
	width:20px;
	height:20px;
	background-color:red;
	position:absolute;
	top:-200px;	
}

.badBlock{
	width:20px;
	height:20px;
	background-color:red;
	position:absolute;
	top:-50px;
	border-radius: 1000000px;
}

.ugly{
	width:20px;
	height:20px;
	background-color:yellow;
	position:absolute;
	top:-200px;	
}

.lifeBlock{
	width:20px;
	height:20px;
	background-image :url('http://static3.wikia.nocookie.net/__cb20120809232436/fantendo/images/3/37/NSMBWii1upMushroom.png'); 
    background-color:blue;
	background-size: 100% 100%;
	position:absolute;
	top:-50px;
	border-radius: 1000000px;
}
.hidden {
display:none;	
}


#other{
    
    height:91%;
    margin: 0 auto;
}
$(document).ready(function() {

//sets the variables
var sec=0;
var min=0;
var limit= 300;
var limitBad= 400;
var speed=3000;
var score=0;
var boxLeft=30;
var level=1;
var lives= 5;
var mouseoff = 13;


///removes the instructions

$('#begin').click(function(){
	$('#info').slideUp(1000);
}) 


	



//sets the dificulty by changing the variables
$('#easy').click(function(){
	speed=3000;
	limit=300;
	limitBad= 400;
	$('#easy').css('background-color','blue');	
	$('#hard').css('background-color','red');
	$('#extreme').css('background-color','red');
	
});

$('#hard').click(function(){
	speed=2000;
	limit=200;
	limitBad= 300;
	$('#easy').css('background-color','red');	
	$('#hard').css('background-color','blue');
	$('#extreme').css('background-color','red');
});

$('#extreme').click(function(){
	speed=1000;
	limit=100;
	limitBad= 200;
	$('#easy').css('background-color','red');	
	$('#hard').css('background-color','red');
	$('#extreme').css('background-color','blue');
});

var box     = $("#box");
    var boxSize = {
        height: box.height(),
        width : box.width()
    };
    

//sets the timer
$('#bottom').html(min+":"+sec);


//colision in the game																	
 function testCollision(position1, size1, position2, size2, el) {
        if (((position1.left + size1.width)  > position2.left) &&
            ((position1.top  + size1.height) > position2.top)  &&
            ((position2.left + size2.width)  > position1.left) &&
            ((position2.top  + size2.height) > position1.top)) {
            
            
            // BadaBoom !
        
        	if(el.hasClass('newBlock')){
        		 score++;
        		 boxLeft--;
        		$('#score').html('Score :<br/>'+ score);
        		$('#boxLeft').html('Boxes left :<br/>'+ boxLeft);
        		el.remove();
        		$('#box').css("width","+=10px");
        		boxSize.width= boxSize.width+10;
        		mouseoff+=5
        		$('#other').css('width','-=10px')
        		
             } else if(el.hasClass('badBlock')) { 
       			score--;
       			lives--;
        		$('#score').html('Score :<br/>'+ score);
        		el.remove();
        		$('#box').css("width","-=10px");
        		boxSize.width= boxSize.width-10;
        		$('#lives').html('Lives :<br/>'+ lives);
        		mouseoff-=5
        		$('#other').css('width','+=10px')
             }else if (el.hasClass('lifeBlock')) {
        		lives++;
        		el.remove();
        		$('#lives').html('Lives :<br/>'+ lives);
        };
    		
        	if(boxLeft ==0){
        		level++;
        		speed-=200;
        		limit-=10;
        		limitBad-=10;
        		lives++;
        		boxLeft=30;
        		$('#box').css('width','20px');
        		boxSize.width= 20;
        		$('#level').html('Level :<br/>'+ level);
        		$('#lives').html('Lives :<br/>'+ lives);
        		clearInterval(dropBox);
				clearInterval(baddropBox);
				mouseoff=13
				$('#other').css('width','100%')
				
//calls function again                                                           calls function again 
					function fallBlock(el){
			el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
			}
		


			dropBox = setInterval(function(){
			var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
			fallBlock(new_block);
			},limit);

		
//inserts the bad bricks	
	
			baddropBox = setInterval(function(){
			var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad'));				fallBlock(badBlock);
			},limitBad);	
	
        		
        	}
        	if (lives==0) {
        		clearInterval(myCounter);
				clearInterval(dropBox);
				clearInterval(baddropBox);
				clearInterval(lifedropBox);
				$('#bottom').html(min+":"+sec);
				$('#box').css('width','20px');
				$('#score').html('Score :<br/>'+ score+'<br/> GAME OVER');
				$('.col').remove();
				boxSize.width= 20;
				$('#easy').click();
				min=0;
				sec=0;
				mouseoff=13
				$('#other').css('width','100%')
        	};


    }
}
//starts the game
$('#start').click(function(){
//resets variables
	score=0;
	boxLeft=30;
	level=1;
	lives= 5;
	$('#score').html('Score :<br/>'+ score);
	$('#lives').html('Lives :<br/>'+ lives);
//detects collision
$('#level').html('level :<br/>'+ level);
$('#boxLeft').html('Boxes left :<br/>'+ boxLeft);

//sets the box catcher movement
	$('#other').mousemove(function(event) {
	$('#box').offset({left: (event.pageX-mouseoff)});
});

// clock timer
	myCounter = setInterval(function () {
    if(sec<59){
    sec += 1;
    $('#bottom').html(min+":"+sec);}
    else{
		min+=1;
		sec-=59;
		$('#bottom').html(min+":"+sec);
    }
}, 1000);



	function fallBlock(el){
		el.animate({ 'top': '90%' },speed, function(){$(this).remove();});
	}
		
//inserts new good blocks
		dropBox = setInterval(function(){
		var new_block = $('.good').clone().addClass('newBlock').addClass('col').removeClass('good').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.good'));
		fallBlock(new_block);
		},limit);

		
//inserts the bad bricks	
	
		baddropBox = setInterval(function(){
		var badBlock = $('.bad').clone().addClass('badBlock').addClass('col').removeClass('bad').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.bad'));
		fallBlock(badBlock);
		},limitBad);	
	
//inserts the lives blocks
		lifedropBox = setInterval(function(){
		var lifeBlock = $('.ugly').clone().addClass('lifeBlock').addClass('col').removeClass('ugly').css({top:'-5px',left:Math.floor(Math.random()*95)+"%"}).insertAfter($('.ugly'));
		fallBlock(lifeBlock);
		},5000);




});


collisionBox=setInterval(function(){$('.col').each(function(){
		var new_blockSize = {height: $(this).height(), width: $(this).width()};

	// calls the function
	testCollision(box.position(), boxSize, $(this).position(), new_blockSize,$(this));

});},10)
	



//stops the game
$('#stop').click(function(){
	min=0;
	sec=0;
		clearInterval(myCounter);
		clearInterval(dropBox);
		clearInterval(baddropBox);
		clearInterval(lifedropBox);
		$('#bottom').html(min+":"+sec);
		$('#box').css('width','20px');
		$('#easy').click();
		boxSize.width= 20;
		$('.col').remove();
		mouseoff=13
		$('#other').css('width','100%')

		
});


});
Created from scratch
1517 forks
45296 views

Browse more Codebits