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

@ -1,22 +1,110 @@
function createEtLogique(x, y, id) { function createEtLogique(x, y,id) {
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function () { imageObj.onload = function () {
var yoda = new Konva.Image({ var et = new Konva.Image({
x: x, x: x,
y: y, y: y,
image: imageObj, image: imageObj,
width: 100, width: 100,
height: 50, height: 50,
id: "pd", id: id,
}); });
layer.add(yoda); layer.add(et);
layer.batchDraw(); layer.batchDraw();
}; };
imageObj.src = 'img/logiqueet.png'; 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) { function createLine(points, id) {
@ -28,57 +116,74 @@ function createLine(points, id) {
lineJoin: 'round', lineJoin: 'round',
id: id, id: id,
}); });
return line layer.add(line);
} }
function initLayer() { function createSwitch(num,id,x,y){
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';
var rect1 = new Konva.Rect({ var rect1 = new Konva.Rect({
x: 20, x: x,
y: 20, y: y,
width: 100, width: 100,
height: 50, height: 50,
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
id: "rect", id: id,
}); });
layer.add(rect1); layer.add(rect1);
var simpleText = new Konva.Text({ var simpleText = new Konva.Text({
x: 20, x: x,
y: 20, y: y,
text: '0', text: '0',
fontSize: 30, fontSize: 30,
fontFamily: 'Calibri', fontFamily: 'Calibri',
fill: 'black', fill: 'black',
id: "text", id: "text"+num,
}); });
layer.add(simpleText); layer.add(simpleText);
rect1.on('click', function () { rect1.on('click', function () {
var et = stage.findOne("#text"); var et = stage.findOne("#text"+num);
var line = stage.findOne("#line"); var line = stage.findOne("#line"+num);
var text = et.text() == '1' ? '0' : '1'; var text = et.text() == '1' ? '0' : '1';
var colorline = et.text() == '1' ? 'black' : 'blue'; var colorline = et.text() == '1' ? 'black' : 'blue';
line.stroke(colorline); line.stroke(colorline);
et.text(text); et.text(text);
layer.draw(); 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