amélioration de la popup de fin, et calcul du temps total/score total/niveau max ...

master
pisouvigne 5 years ago
parent c28d06ceff
commit 12fbe7944a

@ -230,7 +230,6 @@ hr{
height: 30vh; height: 30vh;
width: 90%; width: 90%;
} }
.close{ .close{
position: absolute; position: absolute;
right:33px; right:33px;
@ -254,3 +253,18 @@ hr{
cursor: pointer; cursor: pointer;
color:#fe8a71; color:#fe8a71;
} }
#niveauGameOver{
color:#fe8a71;
}
#scoreTotGameOver{
color:#fe8a71;
}
#TempsTotGameOver{
color:#fe8a71;
}
.timer_bar{
height: 15px;
max-width: 95%;
margin:2%;
transition: 1.5s;
}

@ -22,7 +22,7 @@
<a class="txt dys" id="playSelection">Je veux jouer a </a> <a class="txt dys" id="playSelection">Je veux jouer a </a>
<select id="jeu-select" class="background"> <select id="jeu-select" class="background">
<option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option> <option value="aleatoire" class="txt background dys" id="mode1">Aleatoire</option>
<option value="perso" class="txt background dys" id="mode2">Niveau Perso</option> <option value="perso" class="txt background dys" id="mode2"></option>
</select> </select>
</div> </div>
</li> </li>
@ -80,7 +80,7 @@
<h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1> <h1 align=center class="txt dys" id="scoreTitle">Tableau des scores</h1>
<hr id="hr"> <hr id="hr">
<div class="scoreOne border" align=center> <div class="scoreOne border" align=center>
<p class="dys">Mode de jeu 1</p> <p class="dys txt" id="mode1">Aleatoire</p>
<hr id="hr"> <hr id="hr">
<p class="dys">Pseudo | Score</p> <p class="dys">Pseudo | Score</p>
<p class="dys">Pseudo | Score</p> <p class="dys">Pseudo | Score</p>
@ -88,7 +88,7 @@
<p class="dys">Pseudo | Score</p> <p class="dys">Pseudo | Score</p>
</div> </div>
<div class="scoreTwo border" align=center> <div class="scoreTwo border" align=center>
<p class="dys">Mode de jeu 2</p> <p class="dys txt" id="mode2">Cameleon</p>
<hr id="hr"> <hr id="hr">
<p class="dys">Pseudo | Score</p> <p class="dys">Pseudo | Score</p>
<p class="dys">Pseudo | Score</p> <p class="dys">Pseudo | Score</p>
@ -98,63 +98,108 @@
</div> </div>
</div> </div>
</div> </div>
<div id="gameOver" class="modal">
<div class="modal-content score-content">
<div class="modal-body border background">
<span class="close" onclick="closeModal('gameOver')">&times;</span>
<h1 align=center class="txt dys" id="gameOverTitle">Game Over</h1>
<hr id="hr">
<br><br>
<div align=center>
<p><a class="dys">Vous avez fait un score total de </a><a class="dys" id="scoreTotGameOver">140</a></p>
<p><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
<p><a class="dys">Niveau max : </a><a class="dys" id="niveauGameOver"></a></p>
<hr id="hr">
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button class="border background">Valider</button></p>
</div>
</div>
</div>
</div>
<div id="infoModal" class="modal"> <div id="infoModal" class="modal">
<div class="modal-content info-content"> <div class="modal-content info-content">
<div class="modal-body border background" align=center> <div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('infoModal')">&times;</span> <span class="close" onclick="closeModal('infoModal')">&times;</span>
<h1 class="txt dys" id="infoTitle">Tableau des scores</h1> <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
<hr id="hr"> <hr id="hr">
<p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus. Morbi <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus.
Morbi
imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat
facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend porta. facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend
porta.
Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum
sapien. sapien.
Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper urna Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper
sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices urna
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor. Aenean sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices
posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor.
Aenean
imperdiet hendrerit arcu, vel faucibus mauris porttitor quis. imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec
laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia. Sed laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia.
Sed
sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare
elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a augue elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit at augue
aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit
at
risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec
finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue. Interdum et finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
Interdum et
malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor. malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis
porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et leo porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada tincidunt, leo
ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
tincidunt,
sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra
vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo. Aenean vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo.
Aenean
quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio
efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies lobortis, efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
lobortis,
odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie
sollicitudin. sollicitudin.
Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis tortor, Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et est. tortor,
vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et
est.
Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut
iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum
varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis malesuada varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel finibus malesuada
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam aliquam. eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel
finibus
mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
aliquam.
Vivamus maximus justo eu fermentum hendrerit.</p> Vivamus maximus justo eu fermentum hendrerit.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--Play Page--> <!--Play Page-->
<div id="playPage"> <div id="playPage">
<div class="menu border" align=center> <div class="menu border">
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a> <div align=center>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p> <a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="niveau" class="txt dys">Niveau 14</p> <p id="modeDeJeu" class="txt dys">Mode de jeu</p>
<p id="temps" class="txt dys">Temps :</p> <p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
</div><br> <p class="dys"><a id="temps" class="txt">Temps : </a><a id="timer">0 s</a><a id="timerend">0 s</a></p>
</div>
<div class="timer_bar border">
</div>
</div>
<br>
<div id="play_container" class="border"> <div id="play_container" class="border">
</div> </div>
@ -165,6 +210,7 @@
<script src="js/lang.js"></script> <script src="js/lang.js"></script>
<script src="js/func.js"></script> <script src="js/func.js"></script>
<script src="js/createElement.js"></script> <script src="js/createElement.js"></script>
<script src="js/easytimer.min.js"></script>
<script src="js/logique.js"></script> <script src="js/logique.js"></script>
<script src="js/init.js"></script> <script src="js/init.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>

@ -65,7 +65,7 @@
<a onclick="reset()" style="cursor:pointer;">Click</a> <a onclick="reset()" style="cursor:pointer;">Click</a>
<script> <script>
var mobile = false; var mobile = false;
var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = []; var switchs = new Array(), lineCount = new Array(), logiques = new Array(),lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];
var niveauActuel = localStorage.getItem("niveau"); var niveauActuel = localStorage.getItem("niveau");
if(niveauActuel == null){ if(niveauActuel == null){
@ -99,8 +99,24 @@
checkAllSortieLogique(); checkAllSortieLogique();
function reset(){ function reset(){
console.log("reset"); clearArray(switchs);
switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = []; clearArray(lineCount);
clearArray(logiques);
console.log(logiques);
clearArray(lines);
clearArray(endLines);
clearArray(switchsInfo);
clearArray(switchsInfoCopy);
clearArray(lineRemove);
timeEnd = 70;
//switch
numberOfSwitch = 0;
//grid
colonneTot = 0;
numberPerColonne = [];
liveColonneNumber = [];
stage = new Konva.Stage({ stage = new Konva.Stage({
container: 'play-container', container: 'play-container',
/*rotation: -90, /*rotation: -90,
@ -109,9 +125,11 @@
width: width, width: width,
height: height, height: height,
}); });
layer.destroyChildren(); layer.destroyChildren();
stage.add(layer); stage.add(layer);
initLayer(); initLayer();
creatorRandomPyramid(); creatorRandomPyramid();

@ -28,7 +28,8 @@ var colorSwitchInnactiveBackground = "red";
var colorSwitchActiveBackground = "green"; var colorSwitchActiveBackground = "green";
//timer //timer
var timeEnd = 70; var timeEnd = 10;
var timeTot = 0;
//switch //switch
var numberOfSwitch = 0; var numberOfSwitch = 0;
@ -37,3 +38,7 @@ var numberOfSwitch = 0;
var colonneTot = 4; var colonneTot = 4;
var numberPerColonne = []; var numberPerColonne = [];
var liveColonneNumber = []; var liveColonneNumber = [];
var niveauActuel = 1;
var isTuto = true;

@ -41,7 +41,6 @@ function setColor(color) {
element.style.backgroundColor = blackColor; element.style.backgroundColor = blackColor;
}); });
document.body.style.color = whiteColor; document.body.style.color = whiteColor;
document.getElementById("setting_int").style.color = whiteColor; document.getElementById("setting_int").style.color = whiteColor;
var hr = document.querySelectorAll("#hr"); var hr = document.querySelectorAll("#hr");
hr.forEach(function (item) { hr.forEach(function (item) {
@ -244,11 +243,16 @@ function checkEnd() {
} }
}); });
if (ter) { if (ter && !isTuto) {
setTimeout(() => { localStorage.setItem("niveau", parseInt(niveauActuel) + 1); document.location.reload(true); }, 100); setTimeout(() => { nextLevel(); }, 100);
} }
} }
function nextLevel(){
niveauActuel++;
timeTot = timeTot + timer.getTimeValues().seconds;
launchGameOne();
}
function calculNombreSwitch() { function calculNombreSwitch() {
var entrelibre = 0; var entrelibre = 0;
@ -354,14 +358,30 @@ function changeAllLineColorInActive(color){
} }
function play(){ function play(){
console.log("oui"); niveauActuel = 1;
document.querySelector("#mainPage").style.display = 'none'; document.querySelector("#mainPage").style.display = 'none';
document.querySelector("#playPage").style.display = 'block'; document.querySelector("#playPage").style.display = 'block';
timeTot = 0;
launchGameOne();
}
function launchGameOne(){
document.querySelector(".niveau").innerHTML = niveauActuel;
timer.stop();
timer.reset();
resetAllTabs(); resetAllTabs();
gameOne(); gameOne();
} }
function clearArray(arr){
while(arr.length > 0) {
arr.pop();
}
return arr.splice(0,arr.length);
}
function closeGame(){ function closeGame(){
timer.stop();
document.querySelector("#mainPage").style.display = 'block'; document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none'; document.querySelector("#playPage").style.display = 'none';
resetAllTabs(); resetAllTabs();

@ -4,7 +4,7 @@ const lang = {
settingTitle: "Parametres", settingTitle: "Parametres",
playSelection: "Je veux jouer a", playSelection: "Je veux jouer a",
mode1: "Aleatoire", mode1: "Aleatoire",
mode2: "Niveau Perso", mode2: "Cameleon",
themeDark: "Theme Dark :", themeDark: "Theme Dark :",
retour: "Retour", retour: "Retour",
dysfont: "Dyslexie :", dysfont: "Dyslexie :",
@ -15,17 +15,19 @@ const lang = {
inactive_switch_setting : "Couleur switchs innactif : ", inactive_switch_setting : "Couleur switchs innactif : ",
scoreTitle: "Tableau des scores", scoreTitle: "Tableau des scores",
infoTitle: "Comment jouer ?", infoTitle: "Comment jouer ?",
gameOverTitle: "Perdu",
inactive_end_setting: "Couleur fin : ", inactive_end_setting: "Couleur fin : ",
modeDeJeu : "Mode de jeu", modeDeJeu : "Mode de jeu",
niveau : "Niveau 24", niveau : "Niveau ",
temps: "Temps : ", temps: "Temps : ",
}, },
en: { en: {
titleGame: "Make It True", titleGame: "Make It True",
settingTitle: "Settings", settingTitle: "Settings",
playSelection: "I want to play ", playSelection: "I want to play ",
mode1: "Random", mode1: "Random",
mode2: "Perso Level", mode2: "Chameleon",
themeDark: "Dark Theme :", themeDark: "Dark Theme :",
retour: "Back", retour: "Back",
dysfont:"Dyslexia :", dysfont:"Dyslexia :",
@ -38,7 +40,8 @@ const lang = {
infoTitle: "How to play ?", infoTitle: "How to play ?",
inactive_end_setting: "End color : ", inactive_end_setting: "End color : ",
modeDeJeu : "Gamemode", modeDeJeu : "Gamemode",
niveau : "Level 24", niveau : "Level ",
temps: "Time : ", temps: "Time : ",
gameOverTitle: "Game Over",
} }
} }

@ -18,6 +18,7 @@ var layer = new Konva.Layer();
tutoCreateLayer(); tutoCreateLayer();
function tutoCreateLayer() { function tutoCreateLayer() {
isTuto = true;
width = window.innerWidth - window.innerWidth / 100 * 30; width = window.innerWidth - window.innerWidth / 100 * 30;
stage = new Konva.Stage({ stage = new Konva.Stage({
container: 'setting_container', container: 'setting_container',
@ -47,11 +48,19 @@ function resetAllTabs() {
switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = []; switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
width = window.innerWidth - window.innerWidth / 100 * 10; width = window.innerWidth - window.innerWidth / 100 * 10;
height = window.innerHeight /1.5; height = window.innerHeight /1.5;
timeEnd = 5;
numberOfSwitch = 0;
colonneTot = 0;
numberPerColonne = [];
liveColonneNumber = [];
layer.destroyChildren(); layer.destroyChildren();
} }
function gameOne() { function gameOne() {
isTuto = false;
stage = new Konva.Stage({ stage = new Konva.Stage({
container: 'play_container', container: 'play_container',
/*rotation: -90, /*rotation: -90,
@ -61,7 +70,7 @@ function gameOne() {
height: height, height: height,
}); });
stage.add(layer); stage.add(layer);
initTimer();
colonneTot = 2; colonneTot = 2;
numberPerColonne = [2,1]; numberPerColonne = [2,1];
var logiqueCount = 0; var logiqueCount = 0;
@ -69,9 +78,28 @@ function gameOne() {
for (let i = 0; i < colonneTot; i++) { for (let i = 0; i < colonneTot; i++) {
liveColonneNumber.push([]); liveColonneNumber.push([]);
} }
insertLogiqueColonne("logique1", "et", 0); for (let i = 0; i < colonneTot; i++) {
insertLogiqueColonne("logique2", "et", 0); for (let j = 0; j < numberPerColonne[i]; j++) {
insertLogiqueColonne("logique3", "et", 1); logiqueCount++;
let type = null;
switch (getRandomArbitrary(0, 4)) {
case 0:
type = "et";
break;
case 1:
type = "ou";
break;
case 2:
type = "etnon";
break;
case 3:
type = "nonou";
break;
}
insertLogiqueColonne("logique" + logiqueCount, type, i);
}
}
logiques.forEach(function (element) { logiques.forEach(function (element) {
createLinkAuto(element.name); createLinkAuto(element.name);
}); });

@ -1,35 +1,38 @@
function initTimer(){ function initTimer() {
/*var TimerElem = document.getElementById("progressBar"); var TimerElem = document.querySelector(".timer_bar");
TimerElem.style.width = "0%"; TimerElem.style.width = "0%";
let seconds = timeEnd; let seconds = timeEnd;
let minutes = 0; document.getElementById("timerend").innerHTML = " / " + seconds + " s";
while(seconds - 60 > 0){
minutes++;
seconds = seconds - 60;
}
document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";*/
} }
function move() { function move() {
var lapsPerSecond = 100/timeEnd; var lapsPerSecond = 100 / timeEnd;
var TimerElem = document.getElementById("progressBar"); var TimerElem = document.querySelector(".timer_bar");
TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%"; TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond) + "%";
} }
var timer = new easytimer.Timer(); var timer = new easytimer.Timer();
timer.start(); timer.start();
timer.addEventListener('secondsUpdated', function (e) { timer.addEventListener('secondsUpdated', function (e) {
if(timer.getTimeValues().seconds <= timeEnd){ if (timer.getTimeValues().seconds <= timeEnd) {
document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s"; document.getElementById("timer").innerHTML = timer.getTimeValues().seconds.toString() + " s";
move(); move();
}else{ } else {
endTime(); timeTot = timeTot + timer.getTimeValues().seconds;
timer.stop(); endTime();
} timer.stop();
}); }
function endTime(){ });
var modal = document.getElementById("myModal"); function endTime() {
modal.style.display = "block"; if(!isTuto){
} document.querySelector("#mainPage").style.display = 'block';
document.querySelector("#playPage").style.display = 'none';
document.querySelector("#scoreTotGameOver").innerHTML = (niveauActuel * (50 / timeTot)).toFixed(2);
document.querySelector("#niveauGameOver").innerHTML = niveauActuel;
document.querySelector("#TempsTotGameOver").innerHTML = timeTot;
openModal('gameOver');
}
}
Loading…
Cancel
Save