-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (165 loc) · 8.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 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?v=1.0.1" 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">
<img src="links/character/notMoving@2x.png" alt="character" id="character1">
<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 class="step4">
<p>
Blijf naar rechts gaan voor de animaties!
<br>
--> --> --> --> --> --> --> --> --> --> --> -->
</p>
</div>
<h2 class="madeWith">Made With Love By Yannick</h2>
</div>
<div class="portfolio-item1">
<span class="introductieText"></span>
<!--
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 Jquery library<br>Je kan het process vinden op de github project pagina door op de knop rechts bovenin te drukken<br><br>
~Yannick Frisart MV2C<br>
Yannick's Macbook Pro: yannick$ git push|
-->
</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 class="portfolio-item3">
<h2 data-info="timeSpent">Tijd per week buiten school:</h2>
<div class="hours-spent-wrapper">
<div class="css-hours">
<p data-info="css-hours">
css:<br>
<span class="hours-spent">~4 - 5 uur</span>
</p>
</div>
<div class="html-hours">
<p data-info="html-hours">
html:<br>
<span class="hours-spent">~2 - 3 uur</span>
</p>
</div>
<div class="js-hours">
<p data-info="js-hours">
Javascript:<br>
<span class="hours-spent">~5 - 15 uur</span>
</p>
</div>
</div>
</div>
<div class="portfolio-item4">
<h2 data-info="watImLearning">Wat ik nu aan het leren ben:</h2>
<div data-info="frameworksAndLanguages">
<img data-info="less-l" src="links/attributes/less.png" alt="less" height="120">
<img data-info="es6-l" src="links/attributes/es6.png" alt="es6" height="140">
<img data-info="jquary-l" src="links/attributes/jquary.png" alt="jquary" height="120">
</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 class="portfolio-item6">
<h2 data-info="WhatIUse">Service's die ik gebruik:</h2>
<div class="uses">
<div data-info="vscode">
<h3 data-info="vscodeh3">code editor</h3>
<img src="links/attributes/vscode.png" alt="vscode">
<p data-info="vscodep">vs code</p>
</div>
<div data-info="gitKraken">
<h3 data-info="gitkrakenh3">git programma</h3>
<img src="links/attributes/gitkraken.jpg" alt="gitkraken">
<p data-info="gitkrakenp">git kraken</p>
</div>
<div data-info="DigitalOcean">
<h3 data-info="digitaloceanh3">server</h3>
<img src="links/attributes/digitalocean.png" alt="digitalocean">
<p data-info="digitaloceanp">DigitalOcean</p>
</div>
</div>
</div>
<div class="end">
<h2 data-info="theEnd">The End<br><small>have a nice day</small></h2>
</div>
</div>
</div>
<audio src="links/music/background.mp3" loop css="hidden" data-music="background"></audio>
<audio src="links/music/denied.wav" css="hidden" data-music="denied"></audio>
<script>
const noAcces = document.querySelector('audio[data-music="denied"]'); // select's the no acces mp3
const character = document.querySelector('#character1'); // pretty straight forward selects the character
const musicSwitch = document.querySelector('#music-switch'); // defines the music switch button to change music on click
const container = document.querySelector('body'); // sets the variable container to absolute body
const scene = document.querySelector('.wrapper'); // define's the wrapper (basicly the canvas)
var backgroundMusic = document.querySelector('audio[data-music="background"]'); // Select's the background mp3
backgroundMusic.volume = 0.3; // define's the background Music Volume
const guide = document.querySelector('.guide'); // Variable used to define .guide
let audioPlaying = false; // variable used to check if background music is playing
var i = 10; // Variable used in character movement
var f = 300; // variable used for moving up and down
let PoIt1Ran = false; //Portfolio item 1 ran value (used to prevent .animate from spam running)
let PoIt2Ran = false; //Portfolio item 2 ran value (used to prevent .animate from spam running)
let PoIt3Ran = false; //Portfolio item 3 ran value (used to prevent .animate from spam running)
let PoIt4Ran = false; //Portfolio item 4 ran value (used to prevent .animate from spam running)
let PoIt5Ran = false; //Portfolio item 5 ran value (used to prevent .animate from spam running)
let PoIt6Ran = false; //Portfolio item 6 ran value (used to prevent .animate from spam running)
let node = $('img[data-info="node-l"]'); // logo node
let php = $('img[data-info="php-l"]'); // logo php
let react = $('img[data-info="react-l"]'); // logo react
let vscode = $('img[alt="vscode"]'); // Logo VsCode
let vscodeh3 = $('h3[data-info="vscodeh3"]'); // h3 VsCode
let vscodep = $('p[data-info="vscodep"]'); // p VsCode
let gitkraken = $('img[alt="gitkraken"]'); // Logo Kitkraken
let gitkrakenh3 = $('h3[data-info="gitkrakenh3"]'); // h3 Kitkraken
let gitkrakenp = $('p[data-info="gitkrakenp"]'); // p Kitkraken
let digitalOcean = $('img[alt="digitalocean"]'); // Logo digitalocean
let digitalOceanh3 = $('h3[data-info="digitaloceanh3"]'); // h3 digitalocean
let digitalOceanp = $('p[data-info="digitaloceanp"]'); // p digitalocean
let endH2 = $('h2[data-info="theEnd"]'); // h2 of The End
let maxHeight = false; // Variable used in scrip to prevent character from leaving the viewport
let minHeight = false; // variable used to prevent character from going below the viewport
let characterHeight = 300; // variable used to define character start position
let endRan = false //Variable to prevent spammy jquaryAnimation by keydown element
</script>
<script src="http://178.62.226.236/container2/links/scripting/jquaryGame/js/typed.js"></script>
<script src="js/scrips.js?v1=1.0.1"></script>
</body>
</html>