578 lines
14 KiB
HTML
578 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Quentin Rouland - Presentation Com</title>
|
|
<script type="text/javascript" src="js/phaser.min.js"></script>
|
|
<style type="text/css">
|
|
body {
|
|
margin: auto;
|
|
height: 610px;
|
|
background-color:rgb(22,154,196);
|
|
}
|
|
#game {
|
|
width: 900px ;
|
|
margin-left: auto;
|
|
margin-right: auto ;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="game"></div>
|
|
<script type="text/javascript">
|
|
|
|
|
|
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
|
|
|
|
var elementsColliteGrounds;
|
|
var elementsDecore;
|
|
var platforms;
|
|
var dude;
|
|
var state;
|
|
var dudeState;
|
|
var text;
|
|
var timeEvents = [];
|
|
|
|
var wordIndex;
|
|
var lineIndex;
|
|
var wordDelay;
|
|
var lineDelay;
|
|
var content = [];
|
|
var line = [];
|
|
var frame = 0;
|
|
var cv;
|
|
|
|
var e1;
|
|
var e2;
|
|
var e3;
|
|
var e4;
|
|
var ep;
|
|
|
|
function preload() {
|
|
game.load.image('terminal', 'assets/terminal.png');
|
|
game.load.image('background', 'assets/background.png');
|
|
game.load.image('limiteH', 'assets/limiteH.png');
|
|
game.load.image('ground', 'assets/limiteH.png');
|
|
game.load.image('limiteV', 'assets/limiteV.png');
|
|
game.load.image('bienvenue', 'assets/bienvenue.png');
|
|
game.load.image('cv', 'assets/cv.png');
|
|
game.load.image('mario', 'assets/mario.png');
|
|
game.load.image('tuxsax', 'assets/tuxsax.png');
|
|
game.load.image('pnc', 'assets/pnc.png');
|
|
game.load.image('freescale', 'assets/freescale.png');
|
|
game.load.image('iut', 'assets/iut.png');
|
|
game.load.image('ineo', 'assets/ineo.png');
|
|
game.load.image('perso', 'assets/perso.png');
|
|
game.load.image('master', 'assets/master.png');
|
|
game.load.image('dl', 'assets/dl.png');
|
|
game.load.image('c', 'assets/c.png');
|
|
game.load.image('uml', 'assets/uml.png');
|
|
game.load.image('python', 'assets/python.png');
|
|
game.load.image('java', 'assets/java.png');
|
|
game.load.image('expert', 'assets/expert.png');
|
|
game.load.image('linux', 'assets/linux.png');
|
|
game.load.spritesheet('button', 'assets/flixel-button.png', 80, 20);
|
|
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
|
|
game.load.bitmapFont('nokia', 'assets/fonts/bitmapFonts/nokia16black.png', 'assets/fonts/bitmapFonts/nokia16black.xml');
|
|
game.load.audio('music', 'assets/music.mp3');
|
|
}
|
|
|
|
function create() {
|
|
game.physics.startSystem(Phaser.Physics.ARCADE);
|
|
|
|
music = game.add.audio('music');
|
|
music.loop = true;
|
|
music.play();
|
|
|
|
|
|
game.add.sprite(0, 0, 'background');
|
|
game.add.sprite(200, 0, 'terminal');
|
|
game.add.sprite(196, 0, 'limiteH');
|
|
game.add.sprite(196, 596, 'limiteH');
|
|
game.add.sprite(196, 0, 'limiteV');
|
|
game.add.sprite(796, 0, 'limiteV');
|
|
|
|
|
|
makeButton('Accueil', 17, 140);
|
|
makeButton('Infos', 17, 180);
|
|
makeButton('Personnalites', 17, 220);
|
|
makeButton('Centres d\'Interet', 17, 260);
|
|
makeButton('Competences', 17, 300);
|
|
makeButton('Itineraire', 17, 340);
|
|
makeButton('Attentes', 17, 380);
|
|
makeButtonHref('CV', 17, 420, "cv.pdf");
|
|
|
|
state = 'Accueil';
|
|
start();
|
|
}
|
|
|
|
function update() {
|
|
game.physics.arcade.collide(elementsColliteGrounds, platforms);
|
|
game.physics.arcade.collide(elementsColliteGrounds, elementsColliteGrounds);
|
|
dude.body.velocity.x = 0;
|
|
dude.body.velocity.y = 0;
|
|
frame += 1;
|
|
switch(state) {
|
|
case "Accueil":
|
|
updateAccueil();
|
|
break;
|
|
case "Infos":
|
|
updateInfos();
|
|
break;
|
|
case "Itineraire":
|
|
updateItineraire();
|
|
break;
|
|
case "Personnalites" :
|
|
e1.angle += 1;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
function updateAccueil() {
|
|
if(dude.body.x < 768) {
|
|
dude.body.velocity.x = 75;
|
|
dude.animations.play('right');
|
|
if(dude.body.x > 700 && dude.body.y > (470 - 48)) {
|
|
dude.body.velocity.y = -344;
|
|
}
|
|
} else if (dude.body.x >= 768) {
|
|
dude.animations.stop();
|
|
dude.frame = 4;
|
|
dude.body.y = 470 - 48;
|
|
}
|
|
}
|
|
|
|
function updateInfos() {
|
|
console.log(frame)
|
|
cv.body.gravity.y = 150;
|
|
if(frame <= 180 ) {
|
|
cv.angle += 2
|
|
}
|
|
if(frame == 40 ) {
|
|
game.add.tween(cv.scale).to( { x: 0.6, y: 0.6 }, 8000, Phaser.Easing.Linear.None, true);
|
|
}
|
|
|
|
if (dude.body.x >= 300 && dudeState == 0) {
|
|
dude.body.velocity.x = -80;
|
|
dude.animations.play('left');
|
|
} else if (dude.body.x < 300 && dudeState == 0) {
|
|
dudeState = 1
|
|
dude.frame = 4;
|
|
dude.animations.stop();
|
|
} else if (dude.body.x <= 350 && dudeState == 1) {
|
|
dude.body.velocity.x = 80;
|
|
dude.animations.play('right');
|
|
} else if (dude.body.x <= 430 && dudeState == 1) {
|
|
dude.body.velocity.x = 80;
|
|
dude.body.velocity.y = -80;
|
|
dude.animations.play('right');
|
|
}
|
|
else if (dude.body.x > 430 && dudeState == 1 && frame <= 320) {
|
|
dude.body.velocity.y = -13;
|
|
dude.frame = 4;
|
|
dude.animations.stop();
|
|
}
|
|
else {
|
|
dude.frame = 4;
|
|
dude.animations.stop();
|
|
}
|
|
}
|
|
|
|
function updateItineraire() {
|
|
/*if ( dude.body.y > (470 - 48))
|
|
{
|
|
dude.body.y = 470 - 48;
|
|
}
|
|
dude.body.velocity.y = 0;
|
|
if(frame >= 150 && frame < 172)
|
|
dude.body.velocity.y = -300;
|
|
if(frame >= 172 && frame < 180)
|
|
dude.body.velocity.y = -250;
|
|
if(frame >= 185 && frame < 220)
|
|
dude.body.velocity.y = -60;
|
|
if(frame >= 300 && frame < 335)
|
|
dude.body.velocity.y = 300;
|
|
if(frame >= 400 && frame < 580)
|
|
{
|
|
dude.body.velocity.y = -60;
|
|
dude.angle += 1;
|
|
}
|
|
if(frame >= 580 && frame <= 760)
|
|
{
|
|
dude.body.velocity.y = 60;
|
|
dude.angle += 1;
|
|
}
|
|
*/
|
|
elementsColliteGrounds.forEach(function(item)
|
|
{
|
|
/*if(item.x < 204 && item.x > (0 - item.with)) {
|
|
var cropRect = new Phaser.Rectangle(204 - item.x, 0, 204 - item.with, item.height);
|
|
item.crop(cropRect);
|
|
}*/
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function initPlatforms() {
|
|
platforms = null;
|
|
platforms = game.add.group();
|
|
platforms.enableBody = true;
|
|
}
|
|
|
|
function initGround() {
|
|
var ground = platforms.create(200, 470, 'ground');
|
|
|
|
ground.body.immovable = true;
|
|
}
|
|
|
|
function initElements() {
|
|
elementsColliteGrounds = null;
|
|
}
|
|
|
|
function initPlatformsWorld() {
|
|
initElements();
|
|
initPlatforms();
|
|
initGround ();
|
|
}
|
|
|
|
function initDude(startx,starty) {
|
|
dude = game.add.sprite(startx, starty, 'dude');
|
|
|
|
game.physics.arcade.enable(dude);
|
|
|
|
//dude.body.bounce.y = 0.2;
|
|
//dude.body.gravity.y = 200;
|
|
dude.enableBody = true;
|
|
dude.body.collideWorldBounds = true;
|
|
|
|
dude.animations.add('left', [0, 1, 2, 3], 10, true);
|
|
dude.animations.add('right', [5, 6, 7, 8], 10, true);
|
|
|
|
dudeState = 0;
|
|
}
|
|
|
|
function initTerm() {
|
|
if (text != undefined) {
|
|
text.destroy();
|
|
|
|
}
|
|
text = game.add.text(200, 465, '', { font: "15px nokia", fill: "#19de65" });
|
|
}
|
|
|
|
function start() {
|
|
content = [];
|
|
wordIndex = 0;
|
|
lineIndex = 0;
|
|
wordDelay = 240;
|
|
lineDelay = [];
|
|
line = [];
|
|
|
|
if (ep != undefined) {
|
|
ep.destroy();
|
|
}
|
|
if (e1 != undefined) {
|
|
e1.destroy();
|
|
}
|
|
if (e2 != undefined) {
|
|
e2.destroy();
|
|
}
|
|
if (e3 != undefined) {
|
|
e3.destroy();
|
|
}
|
|
if (e4 != undefined) {
|
|
e4.destroy();
|
|
}
|
|
if (elementsColliteGrounds != undefined) {
|
|
elementsColliteGrounds.forEach(function(item)
|
|
{
|
|
if (item != undefined)
|
|
item.destroy();
|
|
});
|
|
}
|
|
|
|
frame = 0;
|
|
if (dude != undefined) {
|
|
dude.destroy(true);
|
|
}
|
|
|
|
for (i = 0; i < timeEvents.length; ++i) {
|
|
game.time.events.remove(timeEvents[i]);
|
|
}
|
|
|
|
initTerm();
|
|
initPlatformsWorld();
|
|
|
|
|
|
switch(state) {
|
|
case "Accueil":
|
|
content = [
|
|
"",
|
|
" ~# Présentation de Quentin Rouland",
|
|
" ~# Attentes et compétences personnelles/professionnnelles",
|
|
" ~# Traits de personnalités et centres d'intérêts"
|
|
]
|
|
lineDelay = [200, 750, 750, 750]
|
|
termText();
|
|
initDude(200,game.world.height - 52);
|
|
elementsColliteGrounds = game.add.group();
|
|
elementsColliteGrounds.enableBody = true;
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(210, -275, 'bienvenue');
|
|
elementsColliteGround.body.gravity.y = 150;
|
|
elementsColliteGround.body.bounce.y = 0.7;
|
|
break;
|
|
case "Infos" :
|
|
content = [
|
|
"",
|
|
"~# Rouland Quentin",
|
|
"~# 21 ans, Célibataire",
|
|
"~# Permis B",
|
|
"~# Apt. 26, 18 rue de Cherbourg, 31300 Toulouse",
|
|
"~# quentin.rouland@laposte.net",
|
|
"~# 06 88 39 44 57"
|
|
]
|
|
lineDelay = [200, 600, 600, 600, 600, 600]
|
|
termText();
|
|
elementsColliteGrounds = game.add.group();
|
|
elementsColliteGrounds.enableBody = true;
|
|
cv = elementsColliteGrounds.create(400, -100, 'cv');
|
|
cv.scale.set(0.1,0.1);
|
|
cv.body.bounce.y = 0.6;
|
|
initDude(775, 470 - 48);
|
|
break;
|
|
case "Personnalites":
|
|
content = [
|
|
"",
|
|
"~# Autonome",
|
|
"~# Ponctuel",
|
|
"~# Responsable",
|
|
"~# Calme",
|
|
]
|
|
lineDelay = [200, 600, 600, 600, 600, 600]
|
|
termText();
|
|
//initDude(200,game.world.height - 52);
|
|
|
|
e1 = game.add.sprite(475, 225, 'perso');
|
|
e1.scale.setTo(0.5,0.5);
|
|
e1.anchor.setTo(0.5,0.5);
|
|
|
|
break;
|
|
case "Centres d\'Interet":
|
|
content = [
|
|
"",
|
|
"~# Programmation, Linux, Open Source",
|
|
"~# Saxophone",
|
|
"~# Jeux Video",
|
|
]
|
|
lineDelay = [200, 400, 2500]
|
|
termText();
|
|
//initDude(200,game.world.height - 52);
|
|
elementsColliteGrounds = game.add.group();
|
|
elementsColliteGrounds.enableBody = true;
|
|
|
|
|
|
e1 = elementsColliteGrounds.create(520, -2000, 'mario');
|
|
e1.body.bounce.y = 0.2;
|
|
e1.scale.setTo(0.8,0.8);
|
|
e1.body.gravity.y = 150;
|
|
|
|
|
|
e2 = elementsColliteGrounds.create(210, -500, 'tuxsax');
|
|
e2.scale.setTo(0.5,0.5);
|
|
e2.body.bounce.y = 0.4;
|
|
e2.body.gravity.y = 150;
|
|
break;
|
|
case "Competences":
|
|
content = [
|
|
"",
|
|
"~# Analyse et Conception : Merise, UML",
|
|
"~# Langages : C, C++, Java, Python, Haskell, XML, Latex",
|
|
"PHP, SQL (MySQL/PostgreSQL), HTML / Javascript / CSS",
|
|
"~# Système Exploitation : Linux (Arch/Debian/CentOS), Windows",
|
|
"~# Langue : Anglais maîtrise convenable",
|
|
]
|
|
lineDelay = [200, 600, 600, 600, 600]
|
|
termText();
|
|
|
|
elementsColliteGrounds = game.add.group();
|
|
elementsColliteGrounds.enableBody = true;
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(580, -1000, 'c');
|
|
elementsColliteGround.body.gravity.y = 60;
|
|
elementsColliteGround.body.bounce.y = 0.2;
|
|
elementsColliteGround.scale.setTo(0.3,0.3);
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(526, -800, 'java');
|
|
elementsColliteGround.body.gravity.y = 60;
|
|
elementsColliteGround.body.bounce.y = 0.2;
|
|
elementsColliteGround.scale.setTo(0.4,0.4);
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(506, -600, 'python');
|
|
elementsColliteGround.body.gravity.y = 60;
|
|
elementsColliteGround.body.bounce.y = 0.2;
|
|
elementsColliteGround.scale.setTo(0.4,0.4);
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(210, -2000, 'linux');
|
|
elementsColliteGround.body.gravity.y = 40;
|
|
elementsColliteGround.body.bounce.y = 0.2;
|
|
elementsColliteGround.scale.setTo(0.5,0.5);
|
|
|
|
var elementsColliteGround = elementsColliteGrounds.create(210, -150, 'uml');
|
|
elementsColliteGround.body.gravity.y = 70;
|
|
elementsColliteGround.body.bounce.y = 0.2;
|
|
elementsColliteGround.scale.setTo(0.5,0.5);
|
|
|
|
break;
|
|
case "Itineraire":
|
|
content = [
|
|
"",
|
|
"~# 2013-14 (6 mois), MI Blagnac (31)",
|
|
"Chef de projet tuteuré, respect de la vie privé",
|
|
"Mise en place d'un serveur proxy de contrôle d'accès à une caméra",
|
|
"(python/html/js/css/debian)",
|
|
"",
|
|
"nope",
|
|
"~# 2014 (3 mois), Panacée des Plantes (47)",
|
|
"Stage fin DUT informatique",
|
|
"Implémentation de nouvelles fonctionnalités sur un site de e-commerce",
|
|
"(php/html/js/css)",
|
|
"",
|
|
"nope",
|
|
"~# 2015 (4 mois), Freescale (31)",
|
|
"2015 (4 mois) Stage fin L3 MIASHS Informatique",
|
|
"Création d'un service web de traitement et de publication statistiques",
|
|
"de données de tests",
|
|
"(python/html/js/css)",
|
|
"",
|
|
"nope",
|
|
"~# 2015-2017 (2 ans), Engie Ineo (31)",
|
|
"Alternance Master ICE (en cours)",
|
|
"Alternance Développeur Informatique",
|
|
"(python/système CentOS/C++/Qt)",
|
|
"",
|
|
"nope"
|
|
]
|
|
lineDelay = [200, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000]
|
|
termText();
|
|
elementsColliteGrounds = game.add.group();
|
|
elementsColliteGrounds.enableBody = true;
|
|
|
|
e1 = elementsColliteGrounds.create(225, -400, 'iut');
|
|
e1.scale.setTo(0.2,0.2);
|
|
e1.body.velocity.y = 150;
|
|
|
|
e2 = elementsColliteGrounds.create(325, -2500, 'pnc');
|
|
e2.scale.setTo(0.2,0.2);
|
|
e2.body.velocity.y = 150;
|
|
|
|
|
|
e3 = elementsColliteGrounds.create(425, -4500, 'freescale');
|
|
e3.scale.setTo(0.2,0.2);
|
|
e3.body.velocity.y = 150;
|
|
|
|
|
|
e4 = elementsColliteGrounds.create(525, -6500, 'ineo');
|
|
e4.scale.setTo(0.2,0.2);
|
|
e4.body.velocity.y = 150;
|
|
|
|
//initDude(475, 470 - 48);
|
|
dude.animations.play('right');
|
|
break;
|
|
case "Attentes":
|
|
content = [
|
|
"",
|
|
"~# Obtenir un Master ICE",
|
|
"~# Travailler en tant que développeur logiciel",
|
|
"~# Devenir un expert technique dans le domaine du dévelopement logiciel "
|
|
]
|
|
lineDelay = [200, 600, 600, 600]
|
|
termText();
|
|
|
|
e1 = game.add.sprite(500, 100, 'master');
|
|
e1.scale.setTo(0.5,0.5);
|
|
e1.anchor.setTo(0.5,0.5);
|
|
|
|
|
|
e2 = game.add.sprite(500, 250, 'dl');
|
|
e2.scale.setTo(0.5,0.5);
|
|
e2.anchor.setTo(0.5,0.5);
|
|
|
|
|
|
e3 = game.add.sprite(500, 400, 'expert');
|
|
e3.scale.setTo(0.5,0.5);
|
|
e3.anchor.setTo(0.5,0.5);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function makeButton(name, x, y) {
|
|
var button = game.add.button(x, y, 'button', click, this, 0, 1, 2);
|
|
button.name = name;
|
|
button.scale.set(2, 1.5);
|
|
button.smoothed = false;
|
|
|
|
var police = game.add.bitmapText(x, y + 7, 'nokia', name, 16);
|
|
police.x += (button.width / 2) - (police.textWidth / 2);
|
|
}
|
|
|
|
function makeButtonHref(name, x, y, href) {
|
|
var button = game.add.button(x, y, 'button', function() {
|
|
// open in the same window (like clicking a link)
|
|
//window.location.href = "http://www.google.com";
|
|
// open in a new window instead (this will likely be blocked by popup blockers though)
|
|
window.open(href, "_blank");
|
|
},
|
|
this, 0, 1, 2);
|
|
button.name = name;
|
|
button.scale.set(2, 1.5);
|
|
button.smoothed = false;
|
|
|
|
var police = game.add.bitmapText(x, y + 7, 'nokia', name, 16);
|
|
police.x += (button.width / 2) - (police.textWidth / 2);
|
|
}
|
|
|
|
function click(button) {
|
|
state = button.name;
|
|
start();
|
|
}
|
|
|
|
function termText() {
|
|
text.text = "";
|
|
nextLine();
|
|
}
|
|
|
|
function nextLine() {
|
|
if (lineIndex === content.length){ return; }
|
|
line = content[lineIndex].split(' ');
|
|
wordIndex = 0;
|
|
game.time.events.repeat(wordDelay, line.length, nextWord, this);
|
|
lineIndex++;
|
|
}
|
|
|
|
function nextWord() {
|
|
if(line[wordIndex] != undefined) {
|
|
console.log(line[wordIndex])
|
|
if(line[wordIndex] == "nope") {
|
|
initTerm();
|
|
}
|
|
else {
|
|
text.text = text.text.concat(line[wordIndex] + " ");
|
|
}
|
|
}
|
|
wordIndex++;
|
|
if (wordIndex === line.length)
|
|
{
|
|
text.text = text.text.concat("\n");
|
|
timeEvents.push(game.time.events.add(lineDelay.shift(), nextLine, this));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|