Merged dev into v0.0.2

zoeyfrisart · Jan 6, 2017 · e4d1833 · e4d1833
2 parents b9b0260 + 77f46ad
commit e4d1833
Show file tree

Hide file tree

Showing 17 changed files with 391 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,208 @@
+/*
+font-family: 'Caveat', cursive;
+font-family: 'Marck Script', cursive;
+font-family: 'Press Start 2P', cursive;
+font-family: 'Bungee Shade', cursive;
+*/
+
+body{
+  background: #0b0f40;
+  background-image: url(../links/background/overlay.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: top center;
+  padding: 0px;
+  margin: 0px;
+}
+
+p{
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 16px;
+  font-family: 'Press Start 2P', cursive;
+}
+
+.guide{
+  display: block;
+  width: 1400px;
+  height: 700px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+}
+
+.step1{
+  display: block;
+  position: absolute;
+  top: 150px;
+  left: 430px;
+}
+
+.step1 p{
+  color: floralwhite;
+  text-align: center;
+}
+
+.step2{
+  display: block;
+  position: absolute;
+  top: 180px;
+  left: 200px;
+}
+
+.step2 p{
+  color: lightslategray;
+}
+
+.step3{
+  display: block;
+  position: absolute;
+  top: 210px;
+  left: 400px;
+}
+
+.step3 p{
+  text-align: center;
+  line-height: 22px;
+}
+
+#music-switch{
+  position: absolute;
+  overflow: hidden;
+  width: 65px;
+  height: 65px;
+  top: 30px;
+  right: 30px;
+  background-image: url(../links/icons/music.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: -64px;
+  z-index: 2;
+}
+
+.center-wrapper{
+  width: 100vw;
+  height: 100vh;;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.portfolio-item1{
+  position: absolute;
+  top: 20px;
+  right: 100px;
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
+  background: #0b0b0b;
+  color: lime;
+  border-radius: 5px;
+  padding: 0px;
+  z-index: 50;
+  line-height: 30px;
+}
+
+.portfolio-item1 p{
+  color:lime;
+}
+
+.portfolio-item2{
+  position: absolute;
+  top: 150px;
+  right: 200px;
+  width: 1000px;
+  height: 400px;
+/*  background: blue;*/
+  border-radius: 5px;
+  padding: 10px;
+  display: ;
+  z-index: 50;
+}
+
+.portfolio-item2 h2{
+  font-family: 'Bungee Shade', cursive;
+  font-size: 45px;
+  color: #e2cb1e;
+  position: absolute;
+  top: -300px;
+}
+
+.portfolio-item2 img{
+  position: absolute;
+  top: 800px;
+}
+
+[data-info="css3"]{
+  left: 200px;
+}
+
+[data-info="html5"]{
+  left: 400px;
+}
+
+[data-info="js"]{
+  left: 0px;
+}
+
+.wrapper{
+  background: white;
+  width: 1400px;
+  height: 700px;
+  position: relative;
+  background-image: url(../links/background/background.jpg);
+  background-position: 1px;
+  transition: background 0.2s linear;
+  overflow: hidden;
+}
+
+#character{
+  width: 40px;
+  position: absolute;
+  bottom: 30px;
+  left: 102px;
+  transition: all 0.1s ease-in-out;
+  transform: rotate(0deg);
+  z-index: 10;
+}
+
+.hidden{
+  display: none;
+}
+
+.visible{
+  display: block;
+}
+
+.jumpi{
+  position: absolute;
+  bottom: 340px;
+  left: 15px;
+  border-radius: 30px;
+  width: 90px;
+  height: 50px;
+  color: red;
+  font-family: fantasy;
+  font-size: 40px;
+  text-align: center;
+}
+
+.grass{
+  display: block;
+  width: 1400px;
+  height: 200px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  background-image: url(../links/background/grass.png);
+  background-position: 1px;
+  transition: background 0.2s linear;
+}
+
+.github{
+  position: absolute;
+  top: 35px;
+  right: 100px;
+  z-index: 2;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Jquary Animation</title>
+  <meta name="author" content="Yannick Frisart">
+  <meta name="keywords" content="jquery">
+  <meta name="description" content="Jquery Animation">
+  <link rel="stylesheet" href="css/style.css" type="text/css">
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Caveat:400,700%7CMarck+Script%7CPress+Start+2P" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
+</head>
+<body>
+ <div class="center-wrapper">
+  <div class="wrapper">
+   <div class="grass"></div>
+    <img src="links/character.png" 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">
+      <div class="step1">
+        <p>
+          Je kan bewegen met je arrow keys!
+        </p>
+      </div>
+      <div class="step2">
+        <p>
+          Je kan muziek aan en uit zetten door op je spatiebar te drukken!
+        </p>
+      </div>
+      <div class="step3">
+        <p>
+          Of door op de muziek knop te drukken!<br>
+          rechts bovenin.
+        </p>
+      </div>
+    </div>
+    <div class="portfolio-item1">
+      <p>Hallo, Ik ben yannick!<br>Ik Volg de opleiding Mediavormgeving in de richting interactief op het MediaCollege Amsterdam.<br>Deze hele basis simpele game is gemaakt met javascript met de Jquary library<br>Je kan het process vinden op de github project pagina door op de knop rechts bovenin te drukken<br><br><br><br>
+      ~Yannick Frisart MV2C</p>
+    </div>
+    <div class="portfolio-item2">
+      <h2 data-info="vaardigheden">Mijn Vaardigheden</h2>
+      <img data-info="css3" src="links/attributes/css3.png" alt="css3" height="200">
+      <img data-info="html5" src="links/attributes/html5.png" alt="html5" height="200">
+      <img data-info="js" src="links/attributes/js.png" alt="javascript" height="200">
+    </div>
+  </div>
+ </div>
+ <audio src="links/music/background.mp3" loop css="hidden" data-music="background"></audio>
+  <audio src="links/music/jump.wav" css="hidden" data-music="jump"></audio>
+  <script>
+    const character = document.querySelector('#character');
+    const musicSwitch = document.querySelector('#music-switch');
+    const container = document.querySelector('body');
+    const scene = document.querySelector('.wrapper');
+    const grass = document.querySelector('.grass');
+    var backgroundMusic = document.querySelector('audio[data-music="background"]');
+    backgroundMusic.volume = 0.1;
+    const jumpSound = document.querySelector('audio[data-music="jump"]');
+    const guide = document.querySelector('.guide');
+    let audioPlaying = false;
+    var i = 10;
+    var backgroundForward = 0;
+    var backgroundBackward = 0;
+  </script>
+  <script src="js/scrips.js"></script>
+</body>
+</html>
diff --git a/js/scrips.js b/js/scrips.js
@@ -0,0 +1,112 @@
+$(document).ready(function(){
+});
+
+// ----------------------------
+//     character Movement
+// ----------------------------
+
+function walk(e){
+  /*Move right*/
+  let position = parseInt(scene.style.backgroundPositionX);
+  if(e.keyCode === 39){
+//    character.style.left = `${i}px`;
+    character.style.transform = `rotate(${i}deg)`;
+    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) {
+//    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';
+    jumpSound.currentTime = 0;
+    jumpSound.play();
+    setTimeout(reset, 150);
+//    $('.jumpi').removeClass('hidden').addClass('visible');
+//    character.style.bottom = '10px';
+  }
+
+  console.info(position);
+
+  if(position <= -200){
+    $('.guide').fadeOut('slow');
+  }
+
+// -------------------------
+//  Portfolio Item 1 code
+// -------------------------
+
+if(position>= -1200 && position <= -760){
+  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 120);
+} else if(position <= -1214 && position >= -1400){
+  $('.portfolio-item1').stop().animate({height: '500px', width: '1200px', padding: '15px'}, 220);
+} else if(position <= -1700){
+  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 120);
+}
+
+// -------------------------
+//  Portfolio Item 2 code
+// -------------------------
+
+if(position>= -1990 && position <= -1710){
+//  $('.portfolio-item2').stop().slideUp(100);
+  $('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 80);
+  $('img[data-info="css3"]').stop().animate({top: '800px'}, 60);
+  $('img[data-info="html5"]').stop().animate({top: '800px'}, 60);
+  $('img[data-info="js"]').stop().animate({top: '800px'}, 60);
+} else if(position <= -2000 && position >= -2700){
+//  $('.portfolio-item2').stop().slideDown(200);
+  $('h2[data-info="vaardigheden"]').stop().animate({top: '-50px'}, 'slow');
+  $('img[data-info="css3"]').stop().animate({top: '120px'}, 'slow', 'swing');
+  $('img[data-info="html5"]').stop().animate({top: '120px'}, 'slow', 'swing');
+  $('img[data-info="js"]').stop().animate({top: '120px'}, 'slow', 'swing');
+} else if(position <= -3000) {
+//  $('.portfolio-item2').stop().slideUp(100);
+  $('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 80);
+  $('img[data-info="css3"]').stop().animate({top: '800px'}, 60);
+  $('img[data-info="html5"]').stop().animate({top: '800px'}, 60);
+  $('img[data-info="js"]').stop().animate({top: '800px'}, 60);
+}
+// --------------------------
+//    Background Music
+// --------------------------
+
+if(e.keyCode === 32 && audioPlaying === false){
+  backgroundMusic.play();
+  musicSwitch.style.backgroundPosition = '0px';
+  audioPlaying = true;
+} else if(e.keyCode === 32 && audioPlaying === true){
+  backgroundMusic.pause();
+  musicSwitch.style.backgroundPosition = '-65px';
+  audioPlaying = false;
+}
+}
+function test(e){
+  console.log(e.keyCode);
+}
+
+function reset(){
+  character.style.bottom = '30px';
+  $('.jumpi').fadeOut(1000);
+}
+
+function backgroundMusicSwitch(){
+  if(audioPlaying === false){
+  backgroundMusic.play();
+  musicSwitch.style.backgroundPosition = '0px';
+  audioPlaying = true;
+} else if(audioPlaying === true){
+  backgroundMusic.pause();
+  musicSwitch.style.backgroundPosition = '-65px';
+  audioPlaying = false;
+}
+}
+
+container.addEventListener('keydown', walk);
diff --git a/links/attributes/css3.png b/links/attributes/css3.png
diff --git a/links/attributes/html5.png b/links/attributes/html5.png
diff --git a/links/attributes/js.png b/links/attributes/js.png
diff --git a/links/background/background.jpg b/links/background/background.jpg
diff --git a/links/background/grass.png b/links/background/grass.png
diff --git a/links/background/overlay.png b/links/background/overlay.png
diff --git a/links/character.png b/links/character.png
diff --git a/links/icons/Octocat.png b/links/icons/Octocat.png
diff --git a/links/icons/music.png b/links/icons/music.png
diff --git a/links/light.png b/links/light.png
diff --git a/links/music/background.mp3 b/links/music/background.mp3
diff --git a/links/music/jump.mp3 b/links/music/jump.mp3
diff --git a/links/music/jump.wav b/links/music/jump.wav