Changed Into Space

- Fixed some delays - Changed to space - Cleaned up some code - Changed character
zoeyfrisart · Jan 6, 2017 · 1f74c56 · 1f74c56
1 parent 640c0e2
commit 1f74c56
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 21 deletions.
diff --git a/css/style.css b/css/style.css
@@ -158,18 +158,18 @@ h2{
  width: 1400px;
  height: 700px;
  position: relative;
- background-image: url(../links/background/background.jpg);
+ background-image: url(../links/background/background.png);
  background-position: 1px;
  transition: background 0.2s linear;
  overflow: hidden;
 }
 
 #character{
- width: 40px;
+ width: 90px;
  position: absolute;
  bottom: 30px;
  left: 102px;
- transition: all 0.1s ease-in-out;
+ transition: all 0.25s ease-in-out, transform 0.8s ease-in-out;
  transform: rotate(0deg);
  z-index: 10;
 }
@@ -302,3 +302,45 @@ h2{
 [data-info="watImLearning"]{
  margin-top: -170px;
 }
+
+
+[data-info="langEnFrameworks"]{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ position: absolute;
+ width: 1400px;
+ height: 300px;
+ bottom: 100px;
+}
+
+.portfolio-item5{
+ height: 700px;
+ width: 1400px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+[data-info="watIkWilLeren"]{
+ margin-top: -170px;
+}
+
+[data-info="react-l"]{
+ position: absolute;
+ bottom: 90px;
+ right: 1400px;
+}
+
+[data-info="node-l"]{
+ position: absolute;
+ top: 700px;
+ left: 50px;
+}
+
+[data-info="php-l"]{
+ position: absolute;
+ bottom: 90px;
+ right: 1400px;
+}
diff --git a/index.html b/index.html
@@ -15,8 +15,7 @@
 <body>
  <div class="center-wrapper">
  <div class="wrapper">
- <div class="grass"></div>
- <img src="links/character.png" alt="character" id="character">
+ <img src="links/character/[email protected]" alt="character" id="character">
  <div id="music-switch" onclick="backgroundMusicSwitch()"></div>
  <a href="https://github.com/yannick1691/jquaryGame" target="_blank" class="github"><img src="links/icons/Octocat.png" height="55" alt="github"></a>
  <div class="guide">
@@ -79,7 +78,12 @@ <h2 data-info="watImLearning">Wat ik nu aan het leren ben:</h2>
  </div>
  </div>
  <div class="portfolio-item5">
-
+ <h2 data-info="watIkWilLeren">Wat ik wil leren in de toekomst:</h2>
+ <div data-info="langEnFrameworks">
+ <img data-info="node-l" src="links/attributes/node.png" alt="node" height="150">
+ <img data-info="php-l" src="links/attributes/php.png" alt="php" height="150">
+ <img data-info="react-l" src="links/attributes/react.png" alt="react" height="150">
+ </div>
  </div>
  </div>
  </div>
@@ -97,13 +101,19 @@ <h2 data-info="watImLearning">Wat ik nu aan het leren ben:</h2>
  const guide = document.querySelector('.guide');
  let audioPlaying = false;
  var i = 10;
+ var f = 10;
  var backgroundForward = 0;
+ var backgroundForward2 = 0;
  var backgroundBackward = 0;
+ var backgroundBackward2 = 0;
  let PoIt1Ran = false;
  let PoIt2Ran = false;
  let PoIt3Ran = false;
  let PoIt4Ran = false;
  let PoIt5Ran = false;
+ let node = $('img[data-info="node-l"]');
+ let php = $('img[data-info="php-l"]');
+ let react = $('img[data-info="react-l"]')
  </script>
  <script src="js/scrips.js"></script>
 </body>

diff --git a/js/scrips.js b/js/scrips.js
@@ -7,29 +7,28 @@ $(document).ready(function(){
 function walk(e){
  /*Move right*/
  let position = parseInt(scene.style.backgroundPositionX);
- if(e.keyCode === 39){
+ let characterHeight = parseInt(character.style.bottom);
+ if(e.keyCode === 39){ // Code Om naar Rechts te gaan
 // character.style.left = `${i}px`;
- character.style.transform = `rotate(${i}deg)`;
+ character.style.transform = 'rotate(0deg)';
  scene.style.backgroundPosition = `${backgroundForward}px`;
- grass.style.backgroundPosition = `${backgroundForward}px`;
  i = i + 15;
  backgroundForward = i - (i * 2.1);
  backgroundBackward = backgroundForward;
- } else if(e.keyCode === 37 && position <= -20) {
+ } else if(e.keyCode === 37 && position <= -20) { // Code Om Naar Links Te Gaan
 // character.style.left = `${i}px`;
  character.style.transform = `rotate(${i}deg)`;
  scene.style.backgroundPosition = `${backgroundBackward}px`;
- grass.style.backgroundPosition = `${backgroundBackward}px`;
  i = i - 15;
  backgroundBackward = i - (i * 2);
  backgroundForward = backgroundBackward;
- } else if(e.keyCode === 38){
- character.style.bottom = '205px';
+ } else if(e.keyCode === 38){ // Code Om Omhoog te gaan
+ f = f + 20;
+ character.style.transform = 'rotate(-90deg)';
+ character.style.bottom = `${f}px`;
+// f = parseInt(character.style.bottom);
  jumpSound.currentTime = 0;
  jumpSound.play();
- setTimeout(reset, 150);
-// $('.jumpi').removeClass('hidden').addClass('visible');
-// character.style.bottom = '10px';
  }
 
  console.info(position);
@@ -129,6 +128,33 @@ if(position >= -3934 && position <= -3820 && PoIt4Ran === true){
  $('img[data-info="less-l"]').stop().animate({left: '1400px'},300);
  PoIt4Ran = false;
 }
+
+
+// -------------------------
+// Portfolio Item 5 code
+// -------------------------
+if(position >= -4760 && position <= -4600 && PoIt5Ran === true){
+ $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '-170px'},360);
+ node.stop().animate({top: '700px'},300);
+ php.stop().animate({right: '1400px'},300);
+ react.stop().animate({right: '1400px'},300);
+ PoIt5Ran = false;
+} else if(position <= -4775 && position >= -5100 && PoIt5Ran === false){
+ $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '170px'},360);
+ node.stop().animate({top: '-100px'},760);
+ node.animate({top: '100px'},600);
+ node.animate({top: '10px'},600);
+ php.stop().animate({right: '30px'},360);
+ react.stop().animate({right: '30px'},360);
+ PoIt5Ran = true;
+} else if(position <= -5200 && position >= -5400 && PoIt5Ran === true){
+ $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '-170px'},360);
+ node.stop().animate({top: '700px'},300);
+ php.stop().animate({right: '1400px'},300);
+ react.stop().animate({right: '1400px'},300);
+ PoIt5Ran = false;
+}
+
 
 // --------------------------
 // Background Music
@@ -148,11 +174,6 @@ function test(e){
  console.log(e.keyCode);
 }
 
-function reset(){
- character.style.bottom = '30px';
- $('.jumpi').fadeOut(1000);
-}
-
 function backgroundMusicSwitch(){
  if(audioPlaying === false){
  backgroundMusic.play();

diff --git a/links/attributes/node.png b/links/attributes/node.png
diff --git a/links/attributes/php.png b/links/attributes/php.png
diff --git a/links/attributes/react.png b/links/attributes/react.png
diff --git a/links/background/background.png b/links/background/background.png
diff --git a/links/character/[email protected] b/links/character/[email protected]
diff --git a/links/character/[email protected] b/links/character/[email protected]