pascal.lafourcade
/
makeittrue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correction de nombreux bugs, éviter plusieurs croisements de fils, petite popup pour regarder le schéma une fois réussi

Browse Source
master
pisouvigne 5 years ago
parent 67df059791
commit a72b29a811
10 changed files with 409 additions and 149 deletions
Show Stats Download Patch File Download Diff File

21
site/vue/css/style.css
Unescape View File

@ -8,6 +8,10 @@
src: url(../font/dys.otf);
}
:root {
--cool-color: #fe8a71;
}
* {
transition: .01s;
}
@ -385,6 +389,7 @@ hr {
background-color: lightcoral;
cursor: pointer;
}
.input-color-container {
position: relative;
overflow: hidden;
@ -393,6 +398,7 @@ hr {
border: solid 2px #ddd;
border-radius: 40px;
}
input[type=color] {
position: absolute;
right: -8px;
@ -406,7 +412,22 @@ input[type=color]{
display: flex;
justify-content: center;
}
.colomn_line_input {
margin-right: 25px;
margin-left: 25px;
}
#button_next_level {
height: 50px;
width: 150px;
transition: 0.5s;
}
#button_next_level:hover {
cursor: pointer;
}
#show_stage {
margin: 0 20px 0 20px;
}

35
site/vue/index.html
Unescape View File

@ -12,6 +12,21 @@
<body id="body" class="background">
<!--Play Page-->
<div id="playPage">
<div id="success" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background success_modal_body" align=center>
<span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
<h1 class="txt dys" id="successTitle"></h1>
<hr id="hr">
<p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a></p>
<div id="show_stage" class="border"></div><br>
<button class="border dys background color" id="button_next_level" onmouseover="hoverButton()"
onclick="closeModal('success');nextLevel();">Niveau suivant</button><br><br>
<p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
id="success_check_input" onclick="successCheck();" checked></p>
</div>
</div>
</div>
<div id="firstTimeet" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
@ -49,7 +64,8 @@
<br><br>
<p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p>
<br><br>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
id="info_check_input" onclick="showInfo();"></p>
</div>
</div>
</div>
@ -90,7 +106,8 @@
<br><br>
<p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p>
<br><br>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
<p class="dys info_check" align=right>Ne plus afficher les aides <input type="checkbox"
id="info_check_input" onclick="showInfo();"></p>
</div>
</div>
</div>
@ -118,12 +135,14 @@
<br><br>
<p><img src="img/not_test.png" class="margin-right"><img src="img/not_test.png"></p>
<br><br>
<p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox" id="info_check_input" onclick="showInfo();"></p>
<p class="dys info_check" align=right><a class="txt" id="close_helps"></a><input type="checkbox"
id="info_check_input" onclick="showInfo();"></p>
</div>
</div>
</div>
<div class="menu border">
<div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<div class="timer_show dys border"><span class="timer_txt"></span></div>
<p id="modeDeJeu" class="txt dys"></p>
@ -268,11 +287,14 @@
<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 class="dys"><a class="dys">Vous avez fait un temps total de </a><a class="dys" id="TempsTotGameOver">40</a> s</p>
<p><a class="dys">Vous avez fait un score total de </a><a class="dys"
id="scoreTotGameOver">140</a></p>
<p class="dys"><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>
<p class="dys">Entrez votre pseudo : <input type="text" class="border background color"><button
class="border background">Valider</button></p>
<br>
<hr id="hr">
<br>
@ -358,6 +380,7 @@
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<script src="js/const.js"></script>
<script src="js/lang.js"></script>

7
site/vue/js/const.js
Unescape View File

@ -19,6 +19,7 @@ var colorLineInnactive = "black";
var colorLineActive = "#4CFEFE";//FFF033
const lineStroke = 4;
const pourcentageBreak = 15;
const tension = 0.3;
//switch
const SwitchHeight = 25;
@ -51,3 +52,9 @@ var windowHeight = 0;
var mobile = false;
var allowedInfoPorte = true;
var double = false;
var click = 0;
var successPanel = true;

7
site/vue/js/createElement.js
Unescape View File

@ -32,6 +32,7 @@ function createSwitch(id, x, y) {
id: id,
x: x,
y: y,
id3: [],
};
switchsInfo.push(switche);
switchsInfoCopy.push(switche);
@ -62,6 +63,7 @@ function createLine(points, id) {
stroke: colorLineInnactive,
strokeWidth: lineStroke,
id: id,
tension: tension,
});
layer.add(line);
}
@ -91,13 +93,14 @@ function createLink(entre, sortie) {
setLine(sortie, "id1", "line" + lineId);
let truc = entre.x;
entre.id3 = "line" + lineId;
getSwitchById(entre.id()).id3.push("line" + lineId);
break;
case "id2":
createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
setLine(sortie, "id2", "line" + lineId);
entre.id3 = "line" + lineId;
getSwitchById(entre.id()).id3.push("line" + lineId);
break;
}
}

154
site/vue/js/func.js
Unescape View File

@ -50,6 +50,10 @@ function setColor(color) {
document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + whiteColor;
});
document.querySelectorAll(".color").forEach(function (element) {
element.style.color = whiteColor;
});
} else {
document.body.style.color = blackColor;
@ -65,11 +69,27 @@ function setColor(color) {
document.querySelectorAll(".border").forEach(function (element) {
element.style.border = "5px solid" + blackColor;
});
document.querySelectorAll(".color").forEach(function (element) {
element.style.color = blackColor;
});
}
//fun
document.querySelector(".secret").style.color = "#fe8a71";
}
document.querySelector("#button_next_level").onmouseover = function () { mouseOver() };
document.querySelector("#button_next_level").onmouseout = function () { mouseOut() };
function mouseOver() {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.backgroundColor;
}
function mouseOut() {
document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.borderColor;
}
function setLang(newLang) {
var textToChange = document.querySelectorAll(".txt");
if (newLang === "fr") {
@ -156,6 +176,71 @@ function checkAllSortieLogique() {
});
}
function getSwitchById(switchId) {
let switche;
switchsInfoCopy.forEach(function (element) {
if (element.id == switchId)
switche = element;
});
return switche;
}
function checkEntreCroisement(logiqueId) {
let croisement = false;
let logique = findLogique(logiqueId);
if (logique.id1 != null && logique.id2 != null) {
if (stage.findOne("#" + logique.id1).points()[1] > stage.findOne("#" + logique.id2).points()[1]) {
if (getSwitchFromLine(logique.id1) != null && getSwitchFromLine(logique.id2) != null) {
let switch1 = getSwitchFromLine(logique.id1).id;
let switch2 = getSwitchFromLine(logique.id2).id;
removeLine(logique.id1);
removeLine(logique.id2);
logique.id1 = null;
logique.id2 = null;
createLink(stage.findOne("#" + switch1), logique);
createLink(stage.findOne("#" + switch2), logique);
} else if (getLogiqueFromLine(logique.id1) != null && getLogiqueFromLine(logique.id2) != null) {
console.log("blem la ");
let logique1 = getLogiqueFromLine(logique.id1);
let logique2 = getLogiqueFromLine(logique.id2);
removeLine(logique.id1);
removeLine(logique.id2);
logique.id1 = null;
logique.id2 = null;
createLink(logique1, logique);
createLink(logique2, logique);
}
else {
console.log("wait");
}
croisement = true;
}
}
return croisement;
}
function getLogiqueFromLine(lineId) {
var logique = null;
logiques.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) logique = element;
})
});
return logique;
}
function getSwitchFromLine(lineId) {
var switche = null;
switchsInfoCopy.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) switche = element;
});
});
return switche;
}
function checkSortieLogique(logiqueId) {
let logique = findLogique(logiqueId);
logiques.forEach(function (element, index) {
@ -226,6 +311,21 @@ function checkSortieLogique(logiqueId) {
});
}
function isLineCollapsing() {
var isCollapsing = false;
if (stage.findOne("#s2") != undefined && stage.findOne("#s2") != null && stage.findOne("#s1") != undefined && stage.findOne("#s1") != null) {
var distance = stage.findOne("#s2").getY() - stage.findOne("#s1").getY();
switchsInfoCopy.forEach(function (element) {
element.id3.forEach(function (line) {
if (Math.abs(element.y - stage.findOne("#" + line).points()[7]) > distance) {
isCollapsing = true;
}
})
});
}
return isCollapsing;
}
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
@ -244,22 +344,70 @@ function checkLineSwitch(switchId) {
return false;
}
function activeSwitch(idSwitch) {
getSwitchById(idSwitch);
var switche = getSwitchById(idSwitch);
changeSwitchColor(switche.id);
switche.id3.forEach(function (element) {
changeLineColor(element);
});
}
function checkIfEnd() {
var ter = true;
endLines.forEach(function (element) {
if (stage.findOne("#line" + element).stroke() == colorLineInnactive) {
ter = false;
}
});
return ter;
}
function checkEnd() {
let ter = true;
endLines.forEach(function (element) {
if (stage.findOne("#line" + element).stroke() == "black") {
if (stage.findOne("#line" + element).stroke() == colorLineInnactive) {
ter = false;
}
});
if (ter && !isTuto) {
setTimeout(() => { nextLevel(); }, 100);
setTimeout(() => { success(); }, 100);
}
}
function success() {
timeTot = timeTot + timer.getTimeValues().seconds;
timer.stop();
stage.findOne("#end").fill("yellow");
layer.draw();
if (successPanel) {
openModal("success");
document.querySelector("#click_number").innerHTML = click;
var previewStage = new Konva.Stage({
container: 'show_stage',
width: window.innerWidth / 1.5,
height: window.innerHeight / 2.5,
scaleX: 1 / 1.5,
scaleY: 1 / 1.5
});
let previewLayer = layer.clone({ hitGraphEnabled: false });
previewStage.add(previewLayer);
previewLayer.batchDraw();
} else {
setTimeout(() => { nextLevel(); }, 1000);
}
}
function successCheck() {
if (document.querySelector("#success_check_input").checked === true) successPanel = true;
else successPanel = false;
}
function nextLevel() {
niveauActuel++;
timeTot = timeTot + timer.getTimeValues().seconds;
launchGameOne();
}

11
site/vue/js/init.js
Unescape View File

@ -1,9 +1,10 @@
function initAllSwitch() {
switchs.forEach(function (element) {
let switche = stage.findOne("#" + element);
switche.on('click touchstart', function () {
changeSwitchColor(switche.id());
changeLineColor(switche.id3);
click++;
activeSwitch(switche.id());
checkAllSortieLogique();
layer.draw();
checkEnd();
@ -16,13 +17,10 @@ function initAllSwitch() {
});
//faire le random de l'inversion de switch
if (getRandomArbitrary(0, 3) == 1) {
changeSwitchColor(switche.id());
changeLineColor(switche.id3);
activeSwitch(switche.id());
}
});
}
function initLayer() {
@ -48,7 +46,6 @@ function initEnd() {
listeLogique.sort(compareLogiqueForEnd);
end.position = countLogique;
end.let = countLogique;
console.log(listeLogique);
listeLogique.forEach(function (element) {
createLink(element, end);
});

2
site/vue/js/lang.js
Unescape View File

@ -30,6 +30,8 @@ const lang = {
reset_cache_message: "Toutes les données ont été supprimées.<br><br><br> La page va automatiquement se rafraichir dans 3s ...",
reset: "Reset",
close_helps: "Ne plus afficher les aides",
successTitle: "Niveau réussi !",
successInfo: "Vous avez réussi en ",
},
en: {

21
site/vue/js/logique.js
Unescape View File

@ -20,19 +20,32 @@ function giveSwitchYWithLineId(lineId){
function removeLineFromSwitch(lineId) {
switchsInfoCopy.forEach(function (element) {
stage.findOne("#"+element.id).id3.forEach(function(element){
if(element == lineId){
ax = stage.findOne("#"+element.id).id3.indexOf(lineId);
stage.findOne("#"+element.id).id3.splice(ax, 1);
element.id3.forEach(function (line) {
if (line == lineId) {
ax = element.id3.indexOf(lineId);
element.id3.splice(ax, 1);
}
});
});
}
function removeLineFromLogique(lineId) {
logiques.forEach(function (element) {
element.id3.forEach(function (line) {
if (line == lineId) {
ax = element.id3.indexOf(lineId);
element.id3.splice(ax, 1);
}
});
});
}
function removeLine(lineId) {
//remove from switch
if (getSwitchFromLine(lineId) != null)
removeLineFromSwitch(lineId);
else
removeLineFromLogique(lineId);
let line = stage.findOne("#" + lineId);
line.destroy();

61
site/vue/js/main.js
Unescape View File

@ -45,6 +45,9 @@ function tutoCreateLayer() {
initEnd();
}
width = (window.innerWidth - window.innerWidth / 100 * 10);
height = window.innerHeight / 1.5;
function resetAllTabs(save) {
if (!save) {
logiques = [];
@ -52,23 +55,27 @@ function resetAllTabs(save) {
numberPerColonne = [];
liveColonneNumber = [];
timeEnd = 5;
switchsInfoCopy = [];
numberOfSwitch = 0;
colonneTot = 0;
}
switchs = [], lineCount = [], lines = [], endLines = [], end, switchsInfo = [], lineRemove = [];
width = (window.innerWidth - window.innerWidth / 100 * 10);
height = window.innerHeight / 1.5;
switchs = [], lineCount = [], lines = [], endLines = [], end, switchsInfo = [], lineRemove = [], switchsInfoCopy = [];
layer.destroyChildren();
stage.draw();
}
function gameOne() {
document.querySelector("#play_container").style.maxHeight = window.innerHeight / 1.5 + "px";
createGameOne(niveauActuel);
click = 0;
while (checkIfEnd() || isLineCollapsing()) {
resetAllTabs(false);
createGameOne(niveauActuel);
}
//console.log(stage);
//gameData = new GameData(height,width,2,10,"mode1",false,"play_container");
//gameData.createGame();
@ -85,6 +92,7 @@ function createGameOne(niveau) {
var isOuNonAllowed = false;
var isNotAllowed = false;
var isOuAllowed = false;
double = false;
var firstTime = [];
switch (niveauActuel) {
case 1:
@ -133,6 +141,7 @@ function createGameOne(niveau) {
numberColonne1 = 4;
numberColonne2 = 1;
isNotAllowed = true;
double = true;
timeEnd = 20;
break;
case 10:
@ -218,6 +227,13 @@ function createGameOne(niveau) {
logiques.forEach(function (element) {
createLinkAuto(element.name);
});
initEndGame();
}
function initEndGame() {
calculNombreSwitch();
switchCreator(numberOfSwitch);
@ -225,14 +241,17 @@ function createGameOne(niveau) {
createAllLinkSwitch();
initAllSwitch();
logiques.forEach(function (element) {
checkEntreCroisement(element.name);
});
createEnd();
initEnd();
initTimer();
checkAllSortieLogique();
}
function resetCache() {
@ -242,7 +261,17 @@ function resetCache(){
window.addEventListener('resize', saveStage);
function getSwitchState() {
var stateSwitch = new Array();
switchsInfoCopy.forEach(function (element) {
if (stage.findOne("#" + element.id).fill() == colorSwitchActiveBackground) stateSwitch.push(1);
else stateSwitch.push(0);
});
return stateSwitch;
}
function saveStage() {
var oldSwitch = getSwitchState();
resetAllTabs(true);
if (isTuto) {
createStage("setting_container");
@ -266,15 +295,21 @@ function saveStage() {
logiques.forEach(function (element) {
createLinkAuto(element.name);
});
calculNombreSwitch();
switchCreator(numberOfSwitch);
createAllLinkSwitch();
initAllSwitch();
createEnd();
initEnd();
initEndGame();
for (let i = 0; i < oldSwitch.length; i++) {
let id = i + 1;
if (oldSwitch[i] == 1) {
if (stage.findOne("#s" + id).fill() == colorSwitchInnactiveBackground)
activeSwitch("s" + id);
} else {
if (stage.findOne("#s" + id).fill() == colorSwitchActiveBackground)
activeSwitch("s" + id);
}
}
checkAllSortieLogique();
}
function showInfo() {

11
site/vue/txt
Unescape View File

@ -0,0 +1,11 @@
Au depart j'avais une idée assez flou du jeu que j'allais réaliser, j'ai d'abord commencer par imaginer fonctionnement, en m'inspirant de l'application mobile Make It True.
J'ai par la suite essayé de réaliser des schéma simple et des circuit court afin de comprendre comment j'allais pouvoir réaliser des circuits plus complexe et comment j'allais m'organiser.
Une fois la réalisation des circuit faites, je devais me pencher sur un mécanisme de fonctionnement, le programme allez devoir créer des niveaux par lui même, et qui soit jouable sur n'importe qu'elle résolution d'écrans.
J'ai d'abord commencer par m'imaginer une grille, composer de lignes et de colonnes, chaque colonne correspond à chaque étapes. la première etant les intérupteur et la derniere la fin/l'objectif.
des portes logiques de même colonne ne peuvent pas êtres connecté les uns vers les autres.
Par la suite, j'ai eu des soucis, le générateur fonctionnent, je n'avais pas pensé a certains problèmes, comme le fait que les niveaux pouvaient être déjà terminé, ou bien que les fils se croisent.
Pour le croisement des fils j'ai découpé cela en plusieurs étapes.
Premierement, pour le choix d'accrochage, il choisit par défault la porte logique qui se rapproche le plus de son Y.
Mais même avec ceci il restait des problèmes de connection et de fil qui se croisaient, comme quand les distances étaient les mêmes pour 2 portes,
Pour cela j'ai tout simplement créer un converteur qui inverse les 2 entrees.
Write Preview
Loading…
Cancel
Save