diff --git a/README.md b/README.md new file mode 100644 index 00000000..16a7050c --- /dev/null +++ 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 index e69de29b..3c5d2004 100644 --- 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 new file mode 100644 index 00000000..55f496cb Binary files /dev/null and b/images/background.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7d10a4e2 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + Streetfighter + + + + + +
+
+

Click on Ryu to make him throw a Hadouken.

+

Press and hold down the "x" key to make him strike his cool pose!

+
+
+
+
+
+
+
+
+ + +
+ + + + diff --git a/js/app.js b/js/app.js index e69de29b..80bd7864 100644 --- 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 deleted file mode 100644 index c7f8ef61..00000000 --- a/main.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Streetfighter - - - - - - - - - diff --git a/sound/hadouken-cool.mp3 b/sound/hadouken-cool.mp3 new file mode 100644 index 00000000..1ea6cfff Binary files /dev/null and b/sound/hadouken-cool.mp3 differ