-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
391 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.