Game And Watch Remaster - Caterpillar

README.md

@@ -0,0 +1,5 @@
+# Game And Watch Remastered - Caterpillar
+Game And Watch game written in HTML5 + CSS3 + jQuery. This WebApp is a "Responsive Web Design" (RWD) website. 
+
+
+<a href="https://b568579451df0339eaf6ca49b236c413b938d88b-www.googledrive.com/host/0B4HFlS9vdbwFfld6ai14anJkdmx3NWduQWVEc1NCWDVkVTJMdnk4YXZKOXpISXg5bmV3RXc/">Play game</a>

css/gawr-games-media.css

@@ -0,0 +1,30 @@
+@media screen and (min-height:1200px), screen and (min-device-height : 1200px) { 
+	#main { 
+		zoom: 125%;
+	}
+}
+
+@media screen and (max-width:1024px), screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
+	#main { 
+		zoom: 101%;
+	}
+	#main .control.sound { 
+		display: none;
+	}
+
+}
+@media screen and (max-height:640px), screen and (min-device-height : 480px) and (max-device-height : 640px) and (-webkit-device-pixel-ratio: 3) { 
+	#main { 
+		zoom: 63%;
+	}
+
+	#main h1, #main h2, #main h3 { 
+		display: none;
+	}
+	#main .control.sound { 
+		display: none;
+	}
+}
+@media screen and (max-height:480px), screen and (min-device-height : 360px) and (max-device-height : 480px) { 
+
+}

css/gawr-games-scoring-digit.css

@@ -0,0 +1,87 @@
+.sprite[data-type="digit-h"], .sprite[data-type="digit-v"], .sprite[data-type="digit-s"] { 
+	background-size: cover;
+}
+.sprite[data-type="digit-h"] { 
+	background-image: url("../img/black/digital-number-h.png");
+	height: 4px;
+	width: 18px;
+}
+.sprite[data-type="digit-v"] { 
+	background-image: url("../img/black/digital-number-v.png");
+	height: 18px;
+	width: 4px;
+}
+.sprite[data-type="digit-s"] { 
+	background-image: url("../img/black/digital-separator.png");
+	height: 36px;
+	width: 4px;
+}
+
+.sprite[data-position="101"], .sprite[data-position="102"], .sprite[data-position="103"] { 
+	right: 6px;
+}
+.sprite[data-position="201"], .sprite[data-position="202"], .sprite[data-position="203"] { 
+	right: 42px;
+}
+.sprite[data-position="301"], .sprite[data-position="302"], .sprite[data-position="303"] { 
+	right: 92px;
+}
+.sprite[data-position="401"], .sprite[data-position="402"], .sprite[data-position="403"] { 
+	right: 128px;
+}
+
+.sprite[data-position="101"], .sprite[data-position="201"], .sprite[data-position="301"], .sprite[data-position="401"] { 
+	top: 2px;
+}
+.sprite[data-position="102"], .sprite[data-position="202"], .sprite[data-position="302"], .sprite[data-position="402"] { 
+	top: 24px;
+}
+.sprite[data-position="103"], .sprite[data-position="203"], .sprite[data-position="303"], .sprite[data-position="403"] { 
+	top: 46px;
+}
+
+.sprite[data-position="104"], .sprite[data-position="105"], 
+.sprite[data-position="204"], .sprite[data-position="205"], 
+.sprite[data-position="304"], .sprite[data-position="305"], 
+.sprite[data-position="404"], .sprite[data-position="405"] {
+	top: 6px;
+}
+.sprite[data-position="106"], .sprite[data-position="107"], 
+.sprite[data-position="206"], .sprite[data-position="207"], 
+.sprite[data-position="306"], .sprite[data-position="307"], 
+.sprite[data-position="406"], .sprite[data-position="407"] {
+	top: 28px;
+}
+
+.sprite[data-position="104"], .sprite[data-position="106"] { 
+	right: 2px;
+}
+.sprite[data-position="105"], .sprite[data-position="107"] { 
+	right: 24px;
+}
+
+.sprite[data-position="204"], .sprite[data-position="206"] { 
+	right: 38px;
+}
+.sprite[data-position="205"], .sprite[data-position="207"] { 
+	right: 60px;
+}
+
+.sprite[data-position="304"], .sprite[data-position="306"] { 
+	right: 88px;
+}
+.sprite[data-position="305"], .sprite[data-position="307"] { 
+	right: 110px;
+}
+
+.sprite[data-position="404"], .sprite[data-position="406"] { 
+	right: 124px;
+}
+.sprite[data-position="405"], .sprite[data-position="407"] { 
+	right: 146px;
+}
+
+.sprite[data-position="300"] { 
+	top: 10px;
+	right: 72px;
+}

css/gawr-games.css

@@ -0,0 +1,225 @@
+@font-face { 
+	font-family: 'quadrit'; 
+	src: url('./font/quadrit.ttf'); 
+}
+@font-face { 
+	font-family: 'oswald-light'; 
+	src: url('./font/oswald-light.ttf'); 
+}
+* { 
+	font-family: 'quadrit'; 
+	font-size: 18px;
+	color: #000;
+}
+
+html, body { 
+	margin: 0px;
+	padding: 0px;
+	width: 100%;
+	height: 100%;
+	background-color: #fff;
+}
+
+#main { 
+	padding: 5px;
+	margin: auto;
+	display: inline-table;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	width: 970px;
+	position: absolute;
+	border: solid 0px red;
+}
+#main h1, .control { 
+	font-family: 'oswald-light'; 
+	letter-spacing: 5px;
+	font-size: 46px;
+	text-transform: uppercase;
+}
+#main h2, #main h3 { 
+	position: absolute;
+}
+#main h3, #main h3 em { 
+	font-family: 'oswald-light'; 
+	letter-spacing: 2px;
+	font-size: 14px;
+	color: #666;
+	top: 35px;
+	right: 115px;
+	font-weight: normal;
+	font-style: normal;
+	text-align: right;
+}
+#main h2 { 
+	font-family: 'quadrit'; 
+	text-shadow: 2px 2px #ccc;
+	letter-spacing: 2px;
+	font-size: 18px;
+	color: #999;
+	top: 0px;
+	right: 115px;
+	font-weight: bold;
+	font-style: normal;
+	text-align: right;
+	background-color: #e2ec1d;
+	color: #333;
+}
+#game { 
+	height: 500px;
+}
+#game, #main h1 { 
+	width: 750px;
+	margin: auto;
+	padding: 0px;
+}
+
+.control { 
+	margin: 20px 0px 20px 0px;
+	background-repeat: no-repeat;
+	background-position: 50% 75%;
+	background-size: 70px;
+	width: 100px;
+	height: 100px;
+	background-color: #333;
+	border-radius: 15px;
+	position: absolute;
+	cursor: pointer;
+	color: #fff;
+	box-shadow: 4px 4px 1px #ccc;
+	bottom: 0px;
+
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	-webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.control:active { 
+	opacity: 0.3;
+}
+.control.left { 
+	background-image: url("../img/white/control-left.png");
+}
+.control.right { 
+	background-image: url("../img/white/control-right.png");
+	right: 0px;
+}
+.control.a, .control.b, .control.reset { 
+	height: 50px;
+	right: 0px;
+	letter-spacing: 2px;
+	font-size: 22px;
+	text-align: center;
+	line-height: 40px;
+}
+.control.a { 
+	bottom: 425px;
+}
+.control.b { 
+	bottom: 360px;
+}
+.control.reset { 
+	bottom: 280px;
+	color: #333;
+	height: 30px;
+	line-height: 30px;
+	font-size: 18px;
+	box-shadow: none;
+	background-color: transparent;
+	border: solid 1px #ccc;
+
+}
+.control.reset span{ 
+	border-radius: 10px;
+	width: 15px;
+	height: 15px;
+	display: inline-table;
+	background-color: #ccc;
+	margin-right: 10px;
+	border: solid 1px #666;
+}
+
+.sprite, .score, .game-a, .game-b, .miss { 
+	position: absolute;
+	opacity: 0.70;
+	text-transform: uppercase;
+    -webkit-filter: drop-shadow(5px 5px 2px #666);
+    filter: drop-shadow(15px 15px 10px #666); 
+	letter-spacing: 3px;
+}
+.score { 
+	top: 10px;
+	right: 170px;
+	height: 50px;
+	width: 160px;
+}
+.game-a, .game-b { 
+	bottom: 10px;
+}
+.game-a  { 
+	left: 100px;
+}
+.game-b { 
+	left: 200px;
+}
+.miss { 
+	top: 15px;
+	right: 20px;
+}
+.sprite[data-type="miss"] { 
+	width: 45px;
+	height: 45px;
+	top: 40px;
+}
+.sprite[data-position="50"] { 
+	right: 20px;
+}
+.sprite[data-position="51"] { 
+	right: 60px;
+}
+.sprite[data-position="52"] { 
+	right: 100px;
+}
+
+.scene, .background, .foreground { 
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: 100%;
+	width: inherit;
+	height: inherit;
+	background-color: transparent;
+	position: absolute;
+}
+.scene { 
+	overflow: hidden;
+	position: relative;
+	border: solid 1px #aaa;
+	border-radius: 5px;
+	background-color: #ddd;
+}
+.background { 	
+    -webkit-filter: drop-shadow(3px 3px 1px #999);
+    filter: drop-shadow(5px 5px 2px #999); 
+	opacity: 0.60;
+}
+.foreground { 	
+    -webkit-filter: drop-shadow(10px 10px 5px #999);
+    filter: drop-shadow(12px 12px 6px #999); 
+	opacity: 0.80;
+}
+
+.sprite { 
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: 100%;
+}
+
+.sprite[data-state="off"], .game-a[data-state="off"], .game-b[data-state="off"], .miss[data-state="off"] { 
+	opacity: 0.00;
+    -webkit-filter: none;
+    filter: none; 
+}