Final touch.

vraa · Sep 30, 2014 · ac5db84 · ac5db84
1 parent 2c4edf7
commit ac5db84
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 25 deletions.
diff --git a/src/assets/css/game.css b/src/assets/css/game.css
@@ -0,0 +1,103 @@
+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, 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,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+*{
+	-webkit-box-sizing: border-box;
+  	-moz-box-sizing: border-box;
+	box-sizing: border-box; 
+}
+
+.suzhi{
+	font:1rem Audiowide;
+}
+.info{
+	display: none;
+}
+
+@media(min-width: 850px){
+	.suzhi{
+		overflow: hidden;
+		width: 850px;
+		margin:20px auto;
+	}
+	.game{
+		float: left;
+		width: 500px;
+	}
+	.info{
+		display: block;
+		float: left;
+		width: 350px;
+		height: 500px;
+		padding: 10px 10px 10px 30px;
+		background-color: #DDDDDD;
+		color: #666;
+		font-size: .7rem;
+		line-height: 1.45rem;
+	}
+	.info h1{
+		font-size: 1.4rem;
+		margin:10px 0;
+		text-transform: uppercase;
+		color: #001F3F;
+	}
+	.info h2{
+		font-size: 1.2rem;
+		margin-bottom: 10px;
+	}
+	.info ol{
+		list-style: decimal;
+		letter-spacing: 1pt;
+		margin-left: 20px;
+	}
+	.info .author{
+		margin: 100px 0;
+		font-size: .9rem;
+		border-top: 1px dashed #ccc;
+		padding: 10px 0;
+	}
+	.author a{
+		color: #111111;
+		text-decoration: none;
+	}
+}
diff --git a/src/assets/img/suzhishot.png b/src/assets/img/suzhishot.png
diff --git a/src/game/game.js b/src/game/game.js
@@ -43,15 +43,6 @@ define(['util', 'colors', 'suzhi', 'thingy'],
 		initObjects : function(){
 			suzhi = new Suzhi({env:env, canvas: canvas, sprite: sprite});
 			thingies = [];
-			/*
-			for(var i=1; i<=5; i++){
-				thingies.push(new Thingy({
-							type : util.randomGoody(),
-							position :  util.randomPoint(canvas,20),
-							canvas : canvas
-						}
-					));
-			}*/
 		},
 
 		run : function(){
@@ -195,14 +186,14 @@ define(['util', 'colors', 'suzhi', 'thingy'],
 
 			if(width >= 500){
 				width = 500;
-				height = 480;
+				height = 500;
 			}
 			canvas.width = width;
 			canvas.height = height;
 			canvas.addEventListener(evt, this.handleClickStart);
 
 			ctx = canvas.getContext('2d');
-			document.body.appendChild(canvas);
+			document.getElementById('game').appendChild(canvas);
 			cH = canvas.height;
 			cW = canvas.width;
 		},

diff --git a/src/game/main-built.js b/src/game/main-built.js
diff --git a/src/index.html b/src/index.html
@@ -3,21 +3,45 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-		<title>Suzhi - a zero's adventure!</title>
-		<style type="text/css">
-		canvas{
-			display: block;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin:auto;
-		}
-		</style>
-		<script data-main="game/main" src="game/lib/require.js"></script>
+		<title>Suzhi - Game</title>
+		<meta name="description" content="Keep the ball in air. Drop, dead! : Suzhi - a fun, little JavaScript game.">
+		<meta property="og:title" content="Suzhi" />
+		<meta property="og:url" content="http://veerasundar.com/suzhi" />
+		<meta property="og:description" content="Keep the ball in air. Drop, dead! : Suzhi - a fun, little JavaScript game." />
+		<meta property="og:image" content="http://veerasundar.com/suzhi/assets/img/suzhishot.png" />
+		<meta name="twitter:card" content="summary_large_image"/>
+		<meta name="twitter:creator" content="@vraa"/>
+		<meta name="twitter:creator:id" content="8643632"/>
+		<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
+		<link rel="stylesheet" href="assets/css/game.css">
+		<script data-main="game/main-built" src="game/lib/require.js"></script>
 	</head>
 	<body>
-		<div style="font-family:Audiowide"></div>
+		<div class="suzhi">
+			<div id="game" class="game"></div>
+			<div class="info">
+				<h1>Suzhi</h1>
+				<h2>How to play?</h2>
+				<ol>
+					<li>Use mouse to control the ball (suzhi).</li>
+					<li>Click to keep the ball in air. Drop the ball and the game is over.</li>
+					<li>Collect Green objects and avoid red objects.</li>
+				</ol>
+
+				<div class="author">
+					<a href="http://veerasundar.com" title="Built with ❤ from Chennai">@vraa</a> | <a href="http://github.com/vraa/suzhi">Source</a>
+				</div>
+			</div>
+		</div>
+		<script>
+		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+		  ga('create', 'UA-2028306-41', 'auto');
+		  ga('send', 'pageview');
+
+		</script>
 	</body>
 </html>