Balloon Game

Catch the correct balloon before it hits the ground

HTML

<title>Sean Coyne</title>

<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />

</head>
<body onload="start_game()">

<body>


	<section>
	<article>
	<div id="logo"><img src="http://s18.postimg.org/5plqdice1/Logo_Comic.png" id="Logo"></div><br></br>
	
	<div id="canvas">
		<canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>
		
		<p id="p1"></p>
		
		<script>
			
var balloon_x=100;
			var balloon_y=0;
			var basket_x=100;
			var basket_y=100;
			var points=0;
			
			//Background colour of canvas
			var c = document.getElementById("c");
			var ctx = c.getContext("2d");
			ctx.fillStyle = "#000";
			ctx.fillRect(0,0,500,500);
			
			//Here is the event listener
			mycanv.addEventListener("mousemove",seenmotion, false);
			
			function seenmotion(e) {
			
			//This is the code for the mouse 
			//moving over the canvas.
			var bounding_box=c.getBoundingClientRect();
					basket_x=(e.clientX-bounding_box.left) *
										 (c.width/bounding_box.width);	
					basket_y=(e.clientY-bounding_box.top) *
							(c.height/bounding_box.height);	
			}
			
			function start_game() {
				 setInterval(game_loop, 50);
			}
			
			
			function game_loop() {
				// The code above is called every 50ms and is a 
				// frame-redraw-game-animation loop.

				c.width = c.width;
				
				// Below is the code that draws the objects
				draw_balloon(balloon_x,balloon_y);
				draw_basket(basket_x,basket_y); 

				// Below is the code that updates the balloons location
				balloon_x++;
					if (balloon_x>c.width) {
						balloon_x=0;
				}

				//Here is the collision detection code
				if (collision(balloon_x, balloon_y, basket_x, basket_y)) {
						points -= 0.5;
					}
					
					 
				//Here is the code for the point system
				points+=1;
				
				// and let's stick it in the top right. 
					var integerpoints=Math.floor(points); // make it into an integer
				ctx.font="bold 24px sans-serif...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    background-color: silver;
    background-image: linear-gradient(335deg, #d35400 23px, transparent 23px), linear-gradient(155deg, #e67e22 23px, transparent 23px), linear-gradient(335deg, #c0392b 23px, transparent 23px), linear-gradient(155deg, #e74c3c 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
body {
    width:925px;
    height:auto;
    background-color:#fff;
    margin-left:auto;
    margin-right:auto;
}
#canvas {
    margin-left:205px;
}
section {
    width:auto;
    height:100%;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
}
article {
    width:100x;
    height:100%;
    background-color:#81CFE0;
    margin-left:auto;
    margin-right:auto;
}
#logo {
    width:500px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
}
#comingsoon {
    margin-top:200px;
    margin-left:auto;
    margin-right:auto;
    width:370px;
}