Thinkful Streetfighter

gistfile1.txt

CSS

	body {
		background-color: black;
	}
	.main {
	  background-color: white;
	  margin-top: 110px;
	  padding-left: 100px;
	  min-width: 1200px;
	  height: 500px;
	  position: relative;
	  z-index: 1;
	}
	.ryu {
		width: 659px;
	    height: 494px;
	}
	
	.ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
	  width: 659px;
	  height: 494px;
	}
	
	.ryu-ready, .ryu-throwing, .ryu-cool {
	  display: none;
	} 
	
	.ryu-ready {
	  background-image: url('../images/ryu-ready-position.gif');
	}
	
	.ryu-still {
	  background-image: url('../images/ryu-standing-still.png');
	}
	
	.ryu-throwing {
	  background-image: url('../images/ryu-throwing-hadouken.png');
	}
	
	.ryu-cool {
	  background-image: url('../images/ryu-cool.gif');
	}
	
	.hadouken, .ryu-ready, .ryu-still, .ryu-throwing {
	  background-repeat: no-repeat;
	}
	
	.hadouken {
	  background-image: url('../images/hadouken.gif');
	  width: 156px; 
	  height: 90px;
	  display: none;
	  position: absolute;
	  z-index: 10;
	  top: 167px;
	  left: 520px;
	  float: left;
	}
	* {
	  outline: red 1px solid;
	}



app.js

	$(document).ready(function() {
	  
	  $('.ryu').mouseenter(function() {
	    $('.ryu-still').hide();
	    $('.ryu-ready').show();
	  })
	
	  .mouseleave(function() {
	    $('.ryu-ready').hide();
	    $('.ryu-still').show();
	  })
	
	  .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();
	  });
	
	  $('body').keydown(function(event) {
	      if (event.which == 88) {
	        $('.ryu-ready').hide();
	        $('.ryu-still').hide();
	        $('.ryu-throwing').hide();
	        $('.hadouken').hide();
	        $('.ryu-cool').show();
	      }
	    });
	
	    $('body').keyup(function(event) {
	        $('.ryu-still').show();
	        $('.ryu-cool').hide();
	    });
	
	  
	  function playHadouken () {
	  	$('#hadouken-sound')[0].volume = 0.5;
	  	$('#hadouken-sound')[0].load();
	  	$('#hadouken-sound')[0].play();
	  }
	
	
	
	});