master
pisouvigne 5 years ago
parent 28c6e09bf9
commit ec67becd4c

@ -199,6 +199,7 @@ function switchCreator(number){
}
function insertLogiqueColonne(nomLogique, TypeLogique, colonne){
console.log(TypeLogique);
var X = stage.width() / (colonneTot+1) * (colonne+1);
//calcul position Y
if(numberPerColonne[colonne] == 1){

@ -140,7 +140,7 @@ i:hover {
.modal {
display: none;
position: fixed;
z-index: 1;
z-index: 100;
padding-top: 2%;
left: 0;
top: 0;
@ -248,6 +248,28 @@ hr{
color:red;
cursor: pointer;
}
.margin-right{
margin-right: 5%;
}
.margin-global{
margin-left: 2%;
margin-right: 2%;
}
.veriteTable{
border-collapse: collapse;
border-radius: 15px;
overflow: hidden;
text-align: center;
width: 30%;
}
.veriteTable th{
height: 3em;
}
.veriteTable td{
height: 2em;
}
#playPage{
display: none;
flex-direction: column;

@ -10,6 +10,104 @@
</head>
<body id="body" class="background">
<!--Play Page-->
<div id="playPage">
<div id="firstTimeet" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeet');timer.start()">&times;</span>
<h1 class="txt dys" id="infoFirstTimeEt"></h1>
<hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeEtInfo1"></p>
<table class="veriteTable dys">
<tr>
<th class="border">a</th>
<th class="border">b</td>
<th class="border">S</th>
</tr>
<tr>
<td class="border">0</td>
<td class="border">0</td>
<td class="border">0</td>
</tr>
<tr>
<td class="border">0</td>
<td class="border">1</td>
<td class="border">0</td>
</tr>
<tr>
<td class="border">1</td>
<td class="border">0</td>
<td class="border">0</td>
</tr>
<tr>
<td class="border">1</td>
<td class="border">1</td>
<td class="border">1</td>
</tr>
</table>
<br><br>
<p><img src="img/and_test.png" class="margin-right"><img src="img/and_test.png"></p>
<br><br>
</div>
</div>
</div>
<div id="firstTimeou" class="modal">
<div class="modal-content info-content">
<div class="modal-body border background" align=center>
<span class="close" onclick="closeModal('firstTimeou');timer.start()">&times;</span>
<h1 class="txt dys" id="infoFirstTimeOu"></h1>
<hr id="hr">
<p class="dys txt margin-global" id="infoFirstTimeOuInfo1"></p>
<table class="veriteTable dys">
<tr>
<th class="border">a</th>
<th class="border">b</td>
<th class="border">S</th>
</tr>
<tr>
<td class="border">0</td>
<td class="border">0</td>
<td class="border">0</td>
</tr>
<tr>
<td class="border">0</td>
<td class="border">1</td>
<td class="border">1</td>
</tr>
<tr>
<td class="border">1</td>
<td class="border">0</td>
<td class="border">1</td>
</tr>
<tr>
<td class="border">1</td>
<td class="border">1</td>
<td class="border">1</td>
</tr>
</table>
<br><br>
<p><img src="img/or_test.png" class="margin-right"><img src="img/or_test.png"></p>
<br><br>
</div>
</div>
</div>
<div class="menu border">
<div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p>
<p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
<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>
</div>
<!--Main Page-->
<div id="mainPage">
<div id="menu">
@ -49,7 +147,7 @@
<input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
<p>
<a class="txt dys" id="dysfont">DYSLEXIE</a>
<input id="dyscheckbox" type="checkbox" onclick="dysFont()"></p>
<input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
<br>
<br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
<img onclick="setLang('en')" class="img_usa" src="img/usa.png" /><br><br>
@ -192,30 +290,15 @@
</div>
</div>
</div>
<!--Play Page-->
<div id="playPage">
<div class="menu border">
<div align=center>
<a onclick="closeGame();"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<p id="modeDeJeu" class="txt dys">Mode de jeu</p>
<p><a id="niveau" class="txt dys">Niveau </a><a class="dys niveau">1</a></p>
<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>
</div>
</body>
<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>
<script src="js/func.js"></script>
<script src="js/class.js"></script>
<script src="js/createElement.js"></script>
<script src="js/easytimer.min.js"></script>
<script src="js/logique.js"></script>

@ -1,33 +1,173 @@
class gameData {
constructor(hauteur, largeur) {
this.hauteur = hauteur;
this.largeur = largeur;
class GameData {
hauteur;
largeur;
timeEnd;
numberColonne1;
numberColonne2;
isEtNonAllowed;
isOuNonAllowed;
niveau;
isTuto;
mode;
container;
colonneTot;
constructor(hauteur, largeur, colonneTot, timeEnd, mode, isTuto, container) {
this.hauteur = hauteur;
this.largeur = largeur;
this.timeEnd = timeEnd;
this.numberColonne1 = 2;
this.numberColonne2 = 1;
this.isEtNonAllowed = false;
this.isOuNonAllowed = false;
this.niveau = 1;
this.mode = mode;
this.isTuto = isTuto;
this.container = container;
this.colonneTot = colonneTot;
}
createStageCanvas() {
stage = new Konva.Stage({
container: this.container,
/*rotation: -90,
x: 20,
y: 1000,*/
width: this.hauteur,
height: this.largeur,
});
stage.add(layer);
}
generateRandomDoor() {
numberPerColonne = [this.numberColonne1, this.numberColonne2];
var logiqueCount = 0;
for (let i = 0; i < this.colonneTot; i++) {
liveColonneNumber.push([]);
}
for (let i = 0; i < this.colonneTot; i++) {
for (let j = 0; j < numberPerColonne[i]; j++) {
logiqueCount++;
let type = null;
switch (getRandomArbitrary(0, 4)) {
case 0:
type = "et";
break;
case 1:
type = "ou";
break;
case 2:
if (this.isEtNonAllowed) {
type = "etnon";
} else {
type = "et";
}
break;
case 3:
if (this.isOuNonAllowed) {
type = "nonou";
} else {
type = "et";
}
break;
}
insertLogiqueColonne("logique" + logiqueCount, type, i);
}
}
logiques.forEach(function (element) {
createLinkAuto(element.name);
});
}
setDifficulty(niveau) {
switch (niveau) {
case 1:
case 2:
timeEnd = 5;
break;
case 3:
case 4:
timeEnd = 4;
break;
case 5:
timeEnd = 3;
break;
case 6:
case 7:
case 8:
isEtNonAllowed = true;
timeEnd = 5;
numberColonne1 = 3;
break;
case 9:
case 10:
case 11:
isEtNonAllowed = true;
timeEnd = 4;
numberColonne1 = 3;
break;
case 12:
case 13:
case 14:
isEtNonAllowed = true;
isOuNonAllowed = true;
timeEnd = 4;
numberColonne1 = 3;
break;
default:
isEtNonAllowed = true;
isOuNonAllowed = true;
timeEnd = 3;
numberColonne1 = 4;
break;
}
}
createGame(){
this.setDifficulty(this.niveau);
initTimer();
this.createStageCanvas();
this.generateRandomDoor();
calculNombreSwitch();
switchCreator(numberOfSwitch);
console.log(stage);
createAllLinkSwitch();
initAllSwitch();
createEnd();
initEnd();
checkAllSortieLogique();
}
}
function createSwitch(id, x, y) {
var switche = {
id : id,
x : x,
y : y,
};
switchsInfo.push(switche);
switchsInfoCopy.push(switche);
switchs.push(id);
var num = lineCount.length;
lineCount.push(1);
var rect1 = new Konva.Rect({
x: x,
y: y,
width: SwitchWidth,
height: SwitchHeight,
stroke: colorSwitchBorder,
fill: colorSwitchInnactiveBackground,
strokeWidth: 4,
id: id,
id3: null,
});
layer.add(rect1);
}
var switche = {
id: id,
x: x,
y: y,
};
switchsInfo.push(switche);
switchsInfoCopy.push(switche);
switchs.push(id);
var num = lineCount.length;
lineCount.push(1);
var rect1 = new Konva.Rect({
x: x,
y: y,
width: SwitchWidth,
height: SwitchHeight,
stroke: colorSwitchBorder,
fill: colorSwitchInnactiveBackground,
strokeWidth: 4,
id: id,
id3: null,
});
layer.add(rect1);
}

@ -136,6 +136,7 @@ function createEnd() {
}
}
function createLogique(x, y, id, type) {
console.log(layer);
var imageObj = new Image();
imageObj.onload = function () {
var et = new Konva.Image({

@ -20,6 +20,10 @@ const lang = {
modeDeJeu : "Mode de jeu",
niveau : "Niveau ",
temps: "Temps : ",
infoFirstTimeEt: "Porte \"et\"",
infoFirstTimeEtInfo1: "L'opérateur ET renvoie VRAI seulement si ses deux entrées sont à 1.<br><br><br> Voici la table de vérité :",
infoFirstTimeOu: "Porte \"ou\"",
infoFirstTimeOuInfo1: "L'opérateur OU renvoie VRAI si au moins une entrés est à 1.<br><br><br> Voici la table de vérité :",
},
en: {

@ -8,7 +8,7 @@ function initAll() {
var mobile = false;
var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
var width = window.innerWidth - window.innerWidth / 100 * 30;
var height = window.innerHeight /2.5;
var height = window.innerHeight / 2.5;
var stage = new Konva.Stage({
container: 'setting_container',
width: width,
@ -20,7 +20,7 @@ tutoCreateLayer();
function tutoCreateLayer() {
isTuto = true;
width = window.innerWidth - window.innerWidth / 100 * 30;
height = window.innerHeight /2.5;
height = window.innerHeight / 2.5;
stage = new Konva.Stage({
container: 'setting_container',
width: width,
@ -48,7 +48,7 @@ function tutoCreateLayer() {
function resetAllTabs() {
switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
width = window.innerWidth - window.innerWidth / 100 * 10;
height = window.innerHeight /1.5;
height = window.innerHeight / 1.5;
timeEnd = 5;
numberOfSwitch = 0;
@ -62,35 +62,75 @@ function resetAllTabs() {
function gameOne() {
createGameOne(niveauActuel);
//console.log(stage);
//gameData = new GameData(height,width,2,10,"mode1",false,"play_container");
//gameData.createGame();
//checkAllSortieLogique();
}
function createGameOne(niveau){
function createGameOne(niveau) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight ;
windowHeight = window.innerHeight;
var numberColonne1 = 2;
var numberColonne2 = 1;
var isEtNonAllowed = false;
var isOuNonAllowed = false;
switch(niveau){
var isOuAllowed = false;
var firstTime = [];
switch (9) {
case 1:
firstTime.push("et");
break;
case 2:
numberColonne1 = 2;
numberColonne2 = 0;
timeEnd = 5;
break;
case 3:
numberColonne1 = 2;
numberColonne2 = 1;
timeEnd = 5;
break;
case 4:
timeEnd = 4;
numberColonne1 = 4;
numberColonne2 = 1;
timeEnd = 5;
break;
//Fin premiere serie
case 5:
timeEnd = 3;
firstTime.push("ou");
numberColonne1 = 1;
numberColonne2 = 0;
isOuAllowed = true;
timeEnd = 5;
break;
case 6:
numberColonne1 = 2;
numberColonne2 = 0;
isOuAllowed = true;
timeEnd = 5;
break;
case 7:
case 8:
isEtNonAllowed = true;
numberColonne1 = 2;
numberColonne2 = 1;
isOuAllowed = true;
timeEnd = 5;
break;
case 8:
numberColonne1 = 3;
numberColonne2 = 1;
isOuAllowed = true;
timeEnd = 5;
break;
case 9:
numberColonne1 = 5;
numberColonne2 = 1;
isOuAllowed = true;
timeEnd = 400;
break;
case 10:
case 11:
isEtNonAllowed = true;
@ -115,51 +155,54 @@ function createGameOne(niveau){
isTuto = false;
stage = new Konva.Stage({
container: 'play_container',
/*rotation: -90,
x: 20,
y: 1000,*/
width: width,
height: height,
});
stage.add(layer);
initTimer();
colonneTot = 2;
numberPerColonne = [numberColonne1,numberColonne2];
numberPerColonne = [numberColonne1, numberColonne2];
var logiqueCount = 0;
for (let i = 0; i < colonneTot; i++) {
if (firstTime.length > 0) {
numberColonne1 = 1;
numberColonne2 = 0;
liveColonneNumber.push([]);
}
for (let i = 0; i < colonneTot; i++) {
for (let j = 0; j < numberPerColonne[i]; j++) {
logiqueCount++;
let type = null;
switch (getRandomArbitrary(0, 4)) {
case 0:
type = "et";
break;
case 1:
type = "ou";
break;
case 2:
if(isEtNonAllowed){
type = "etnon";
}else{
timeEnd = 5;
insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
openModal('firstTime' + firstTime[0]);
timer.pause();
} else {
for (let i = 0; i < colonneTot; i++) {
liveColonneNumber.push([]);
}
for (let i = 0; i < colonneTot; i++) {
for (let j = 0; j < numberPerColonne[i]; j++) {
logiqueCount++;
let type = null;
let x = 1;
if(isOuAllowed) x++;
if(isEtNonAllowed) x++;
if(isOuNonAllowed) x++;
let numberRandom = getRandomArbitrary(0, x);
switch (numberRandom) {
case 0:
type = "et";
}
break;
case 3:
if(isOuNonAllowed){
break;
case 1:
type = "ou";
break;
case 2:
type = "etnon";
break;
case 3:
type = "nonou";
}else{
type = "et";
}
break;
break;
}
insertLogiqueColonne("logique" + logiqueCount, type, i);
}
insertLogiqueColonne("logique" + logiqueCount, type, i);
}
}
logiques.forEach(function (element) {
createLinkAuto(element.name);
});
@ -170,28 +213,29 @@ function createGameOne(niveau){
initAllSwitch();
createEnd();
initEnd();
console.log(layer.scaleX());
initTimer();
checkAllSortieLogique();
}
window.addEventListener('resize', changeStage);
function changeStage(){
if(window.innerWidth <= 900){
function changeStage() {
if (window.innerWidth <= 900) {
console.log("mobile");
if(!mobile){
if (!mobile) {
stage.rotate(90);
stage.x(stage.getX() + stage.height());
mobile = true;
}
}else{
} else {
stage.scaleX(window.innerWidth / windowWidth);
console.log(document.querySelector("#play_container").offsetHeight);
stage.scaleY(window.innerHeight / windowHeight);
}
stage.draw();
}

@ -0,0 +1,32 @@
ctrl + enter to add
alt+d to set done
Responsive :
☐ enlever les borders au format mobile
☐ Faire en sorte que le canvas se réajuste
`Piste`
Faire en sorte que le canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise)
Suite :
☐ Changer de direction lorsqu'on atteint un certain format
`Piste`
Quand la largeur est inférieur à la hauteur ???
En dessous d'un certains nombre de pixels ??? Attention aux téléphone haute résolution
Paramètres :
Choix du types de porte :
☐ Refaire les portes dans le canvas avec un rectangle qui a à l'intérieur du text ou une image
☐ Ajouter au menu des paramètres la possibilité de choisir entre les 2 types de portes
☐ Mettre tout les types de portes dans la prévisualisation
Jeu :
☐ Refaire entièrement le "not" pour éviter la fuite de mémoire
☐ Ajouter la possibilité qu'une sortie puisse acceuillir plusieurs lignes
`Piste`
Remplacer l'id3 par une liste d'id3 qu'on parcourerait
☐ Faire en sorte que les portes d'une colonne autres que la 1ere n'ai que des lignes qui viennent de porte et non des switchs
UI/UX :
☐ Trouver une police d'écriture bien pour le jeu
☐ Corriger les fautes d'orthographes
☐ Faire la traduction en anglais
Loading…
Cancel
Save