Skip to content

Instantly share code, notes, and snippets.

@ymoregola

ymoregola/app.js

Created September 9, 2015 23:33
Show Gist options
  • Save ymoregola/d4235ae345dfbc11703c to your computer and use it in GitHub Desktop.
Save ymoregola/d4235ae345dfbc11703c to your computer and use it in GitHub Desktop.
Download ZIP
Street Fighter - Ryu
Raw
app.js
$(document).ready(function(){
$('.ryu').mouseenter(function(){
$('.ryu-still').hide();
$('.ryu-ready').show();
$('.ryu-cool').hide();
$('.ryu-throwing').hide();
})
.mouseleave(function() {
$('.ryu-still').show();
$('.ryu-ready').hide();
$('.ryu-cool').hide();
$('.ryu-throwing').hide();
})
.mousedown(function(){
playHadouken();
$('.ryu-ready').hide();
$('.ryu-still').hide();
$('.ryu-cool').hide();
$('.ryu-throwing').show();
$('.hadouken').finish().show().animate(
{'left': '1020px'},
550,
function(){
$(this).hide();
$(this).css('left', '520px');
});
})
.mouseup(function(){
$('.ryu-throwing').hide();
$('.ryu-cool').hide();
$('.ryu-ready').show();
$('.ryu-still').hide();
})
$('body').keydown(function(e){
if (e.keyCode == 88) {
$('.ryu-still').hide();
$('.ryu-throwing').hide();
$('.ryu-ready').hide();
$('.ryu-cool').show();
}
})
$('body').keyup(function(){
$('.ryu-throwing').hide();
$('.ryu-cool').hide();
$('.ryu-ready').hide();
$('.ryu-still').show();
})
});
function playHadouken() {
$('#hadouken-sound')[0].volume = 0.5;
$('#hadouken-sound')[0].load();
$('#hadouken-sound')[0].play();
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main">
<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="text">
<p> Click on Ryu to make him throw a Hadouken.</p>
<p> Press and hold down the "x" key to make him strike </br>
his cool pose!</p>
</div>
<div class="hadouken"></div>
</div>
<audio id="hadouken-sound" src="sound/hadouken.mp3">
</body>
</html>
Raw
main.css
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main">
<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="text">
<p> Click on Ryu to make him throw a Hadouken.</p>
<p> Press and hold down the "x" key to make him strike </br>
his cool pose!</p>
</div>
<div class="hadouken"></div>
</div>
<audio id="hadouken-sound" src="sound/hadouken.mp3">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment