Untitled

<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<style>
#container{
	width: 1220px;
	height: 650px;
	border: 3px solid blacke;
	background-color:grey;
	margin:0px;
	position:realtive;
	cursor: url("zad3.jpg"),auto;
	}
#ramka{
		border: 5px solid lime;
		background-color: white;
		height: 70%;
		width: 50%;
		position: relative;
		margin: auto;
}
#ramka:hover {cursor: url("http://panoramix.ift.uni.wroc.pl/~wybieralski/cur/aim.cur"), auto;
}

#buttons{
	position: relative;
	left:510px;
	margin:20px;
}
img{
	position:absolute;
	width:30px;
	height:40px;

	}
#punkty{
	width:100px;
	height: 20px;
	position:relative;
	border: 2px solid blue;
	marign:5px;
	left: 555px;
	bottom:5px;
	background-color: white;

	}
</style>
</head>
<body>
<div id="container">

<h1 style="font:tahoma;text-align:center">Strzelanka</h1>
<div id="punkty">
</div>

<div id='ramka'>

</div>

<div id="buttons">
	<button onclick="run=objects()"> Start </button>
    <button onclick="run=false"> Stop </button>
</div>

<script>

    function objects() {

       var i;

	   for (i=0; i<5; i++){

	   var posx = (Math.random() * $('img').width()).toFixed();
       var posy = (Math.random() * $('img').height()).toFixed();

		$tarcza = $("<img src='zad3.jpg'>").css({
            'left': 20*posx +'px',
                'top': 10*posy + 'px'
        });

		$tarcza.appendTo('#ramka').delay(200).fadeOut(5000);
	}}
</script>
<script>
$('img').click(function(){
 $(this).remove();
});
</script>
</div>
</body>
</html>