Thinkful-Ed · kissa1001 · Jan 11, 2016 · Jan 11, 2016 · Jan 11, 2016 · Jan 25, 2016
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# jquery-streetfighter
+Starter Files for Thinkful Front End Web Development jQuery Streetfighter Project — Edit
+link: http://kissa1001.github.io/jquery-streetfighter/
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,75 @@
+body {
+	background-color: black;
+	overflow:hidden;
+
+}
+
+.main {
+	background-image: url('../images/background.jpg');
+	background-size:cover;
+	margin-top: 110px;
+	padding-left: 100px;
+	min-width: 1200px;
+	height: 500px;
+	position: relative;
+	z-index: 1;
+}
+
+.ryu {
+	width: 659px;
+	height: 494px;
+}
+
+.ryu-still, .ryu-ready, .ryu-throwing, .ryu-cool {
+	width: 659px;
+	height: 494px;
+}
+
+.ryu-ready, .ryu-throwing, .ryu-cool {
+	display: none;
+}
+
+.ryu-still {
+	background-image: url('../images/ryu-standing-still.png');
+
+}
+
+.ryu-ready {
+	background-image: url('../images/ryu-ready-position.gif');
+
+}
+
+.ryu-throwing {
+	background-image: url('../images/ryu-throwing-hadouken.png');
+
+}
+
+.ryu-cool{
+    background-image: url('../images/ryu-cool.gif');
+}
+
+.hadouken, .ryu-still, .ryu-ready, .ryu-throwing, .ryu-cool {
+	background-repeat: no-repeat;
+}
+
+.hadouken {
+	background-image: url('../images/hadouken.gif');
+	width: 156px;
+	height: 90px;
+	display: none;
+	float: left;
+	position: absolute;
+	top: 167px;
+	left: 520px;
+	z-index: 10;
+}
+.instructions {
+	font-size: 1.5em;
+	font-family: 'Satisfy', cursive;
+	color:#000;
+	background-color:rgba(225, 225, 225, 0.5);
+	width:50%;
+	float:right;
+	z-index:-1;
+	display:none;
+}
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Streetfighter</title>
+	<link rel="stylesheet" href="css/normalize.css">
+	<link rel="stylesheet" href="css/main.css">
+	<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
+</head>
+<body>
+	<div class="main">
+		<div class="instructions">
+		    	<p><strong>Click</strong> on Ryu to make him throw a Hadouken.</p>
+				<p>Press and hold down the <strong>"x"</strong> key to make him strike his cool pose!</p> 
+		    </div>    
+			<div class="ryu">
+				<div class="ryu-still"></div>
+				<div class="ryu-ready"></div>
+				<div class="ryu-throwing"></div>
+			    <div class="ryu-cool"></div>
+			</div>
+			<div class="hadouken"></div>
+			<audio id="hadouken-sound" src="sound/hadouken.mp3"></audio>
+		    <audio id="hadouken-cool" src="sound/hadouken-cool.mp3"></audio>
+	</div>
+	<script src="https://code.jquery.com/jquery.min.js"></script>
+	<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,54 @@
+$(document).ready(function(){
+	$('.instructions').fadeIn(1000);
+    $('.ryu').mouseenter(function(){
+        $('.ryu-still').hide();
+        $('.ryu-ready').show();
+    })
+    .mouseleave(function(){
+        $('.ryu-still').show();
+        $('.ryu-ready').hide();
+    })
+    .mousedown(function(){
+    	playHadouken();
+    	$('.ryu-ready').hide();
+    	$('.ryu-throwing').show();
+    	$('.hadouken').finish().show().animate({
+    		'left':'1020px'
+    	},500,function(){
+    		$(this).hide();
+            $(this).css('left', '520px');
+    	});
+    })
+    .mouseup(function(){
+    	$('.ryu-throwing').hide();
+    	$('.ryu-ready').show();
+    });
+
+    $(document).keydown(function(e) {
+        if (e.keyCode==88) {
+        	playHadoukenCool ();
+            $('.ryu-cool').show();
+            $('.ryu-ready').hide();
+            $('.ryu-still').hide();
+        }
+    })
+    .on('keyup', function(e){
+    	if (e.keyCode == 88){
+    		$('#hadouken-cool')[0].pause();
+    		$('#hadouken-sound')[0].load();
+    		$('.ryu-cool').hide();
+            $('.ryu-still').show();
+    	} 
+    });
+
+});
+function playHadouken () {
+  $('#hadouken-sound')[0].volume = 0.5;
+  $('#hadouken-sound')[0].load();
+  $('#hadouken-sound')[0].play();
+}
+function playHadoukenCool () {
+	$('#hadouken-cool')[0].play();
+}
+
+
diff --git a/main.html b/main.html
diff --git a/sound/hadouken-cool.mp3 b/sound/hadouken-cool.mp3