travail sur la mise en place simple des portes et des elements du jeu

master
pisouvigne 5 years ago
parent 9c98b4d8ff
commit c652a78604

14
TODO

@ -0,0 +1,14 @@
Func.Js:
✔ Creation du createSwitch @done(20-05-30 12:43)
Permettre la création des switch de base
☐ Creation du createLogique
Permettre de créer n'importe quelle forme de porte logique et de l'afficher dans des coordonnés précises
☐ Creation du createFinal
Permettre de créer la sortie final, l'ampoule pour l'instant
☐ Creation du createLink
Permettre de créer les liens entre les portes et de dessiner les lignes
de :
fdezf

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
@ -39,15 +38,6 @@
var switchs = [], lines = [], logiques = [];
var logique = {
idown : "logique1",
id1 : "line1",
id2 : "line2",
id3 : "line3",
}
logiques.push(logique);
var layer = new Konva.Layer();
var stage = new Konva.Stage({
@ -55,22 +45,18 @@
width: window.innerWidth / 2,
height: window.innerHeight / 2,
});
stage.add(layer);
initLayer();
var etlogique = {
entre1: createEtLogique(300, 50, "logique1"),
entre2: "200",
sortie: "500",
}
createEtLogique(300, 50, "logique1");
let line = createLine([120, 45, 300, 66], "line");
layer.add(line);
line = createLine([400, 75, 500, 75], "line");
layer.add(line);
stage.add(layer);
</script>
createSwitch(1,"et",20,20);
createSwitch(2,"et2",20,150);
createLink(stage.findOne("#et2"),findLogique("logique1"));
createLink(stage.findOne("#et"),findLogique("logique1"));
</script>
</body>
</html>

@ -1,22 +1,110 @@
function createEtLogique(x, y, id) {
function createEtLogique(x, y,id) {
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Konva.Image({
var et = new Konva.Image({
x: x,
y: y,
image: imageObj,
width: 100,
height: 50,
id: "pd",
id: id,
});
layer.add(yoda);
layer.add(et);
layer.batchDraw();
};
imageObj.src = 'img/logiqueet.png';
imageObj.id = id;
var logique = {
name : id,
x : x,
y : y,
type : "et",
id1 : null,
id2 : null,
id3 : null,
}
logiques.push(logique);
}
function findLogique(logiqueId){
let elem = null;
logiques.forEach(function(element) {
if(element.name === logiqueId) {
elem = element;
}
});
return elem;
}
function checkLogiqueLines(logiqueId,lineId){
let logique = findLogique(logiqueId);
switch(lineId){
case "id1" :
if (lineId.id1 == null) return false;
return true;
break;
case "id2" :
if (lineId.id2 == null) return false;
return true;
break;
case "id3" :
if (lineId.id3 == null) return false;
return true;
}
}
function whatIsElement(element){
if(findLogique(element.name) == null){
return "switch";
} else {
return "logique";
}
}
return imageObj;
function setLine(logiqueElement,lineId,lineName){
logiques.forEach(function(element) {
if(element.name === logiqueElement.name) {
element.forEach(function(elem){
if(elem == lineId){
elem = lineName;
}
});
}
});
}
function createLink(entre,sortie){
//entre est une porte logique
switch(whatIsElement(entre)){
case "switch" :
switch(whatIsElement(sortie)){
case "logique" :
if(!checkLogiqueLines(sortie.name,"id2")){
let switchMidX = entre.getX() + entre.getWidth();
let switchMidY = entre.getY() + entre.getHeight()/2;
let logiqueMidX = sortie.x;
let logiqueMidY = sortie.y + (50/3)*2;
createLine([switchMidX,switchMidY,logiqueMidX,logiqueMidY],"line2");
setLine(sortie,"id2","line2");
return;
}
if(!checkLogiqueLines(sortie.name,"id1")){
let switchMidX = entre.getX() + entre.getWidth();
let switchMidY = entre.getY() + entre.getHeight()/2;
let logiqueMidX = sortie.x;
let logiqueMidY = sortie.y + (50/3)*3;
createLine([switchMidX,switchMidY,logiqueMidX,logiqueMidY],"line1");
setLine(sortie,"id1","line1");
return;
}
}
}
}
function createLine(points, id) {
@ -28,57 +116,74 @@ function createLine(points, id) {
lineJoin: 'round',
id: id,
});
return line
layer.add(line);
}
function initLayer() {
var imageObj2 = new Image();
imageObj2.onload = function () {
var yoda = new Konva.Image({
x: 500,
y: 50,
image: imageObj2,
width: 50,
height: 50,
id: "et",
});
layer.add(yoda);
layer.batchDraw();
};
imageObj2.src = 'img/idea_white.png';
function createSwitch(num,id,x,y){
var rect1 = new Konva.Rect({
x: 20,
y: 20,
x: x,
y: y,
width: 100,
height: 50,
stroke: 'black',
strokeWidth: 4,
id: "rect",
id: id,
});
layer.add(rect1);
var simpleText = new Konva.Text({
x: 20,
y: 20,
x: x,
y: y,
text: '0',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'black',
id: "text",
id: "text"+num,
});
layer.add(simpleText);
rect1.on('click', function () {
var et = stage.findOne("#text");
var line = stage.findOne("#line");
var et = stage.findOne("#text"+num);
var line = stage.findOne("#line"+num);
var text = et.text() == '1' ? '0' : '1';
var colorline = et.text() == '1' ? 'black' : 'blue';
line.stroke(colorline);
et.text(text);
layer.draw();
});
}
function isElementExisting(elementId){
if(stage.findOne("#"+elementId) != null){
return true;
}
return false;
}
function checkLineSwitch(switchId){
if(stage.findOne("#"+switchId) != null){
return true;
}
return false;
}
function initLayer() {
var imageObj2 = new Image();
imageObj2.onload = function () {
var yoda = new Konva.Image({
x: 500,
y: 50,
image: imageObj2,
width: 50,
height: 50,
id: "et",
});
layer.add(yoda);
layer.batchDraw();
};
imageObj2.src = 'img/idea_white.png';
}
Loading…
Cancel
Save