I have to build a simulated OS for my college class. I'm making it pretty simple, nothing too fancy and am using HTML5 Canvas. So far I have the icons on a black background and have made them draggable. I want to know how I can make it so when you click on an icon a box appears (just like a real OS) and then closes by clicking on the 'x'. I also want to be able to drag any icon into the trash bin and it disappears. I understand there are click/mouse events, but I don't know how to implement them into the code I have setup. Here's the code:
Attachment 33567
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'canvas',
width: 1910,
height: 995,
});
var BGlayer = new Kinetic.Layer();
var firstLayer = new Kinetic.Layer();
stage.add(BGlayer);
stage.add(firstLayer);
var bgRect = new Kinetic.Rect({
x:0,
y:0,
width:1910,
height: 995,
fill: 'black'
});
BGlayer.add(bgRect);
BGlayer.draw();
//icon1
var icon1 = new Image();
icon1.onload = function() {
var icon1KJS = new Kinetic.Image({
x:70,
y:100,
image: icon1,
width: 100,
height: 100,
draggable: true
});
firstLayer.add(icon1KJS);
firstLayer.draw();
};
icon1.src =
'http://s14.postimg.org/gdhut7d8d/002_24.png';
//icon2
var icon2 = new Image();
icon2.onload = function() {
var icon2KJS = new Kinetic.Image({
x:70,
y:300,
image: icon2,
width: 100,
height: 100,
draggable: true
});
firstLayer.add(icon2KJS);
firstLayer.draw();
};
icon2.src =
'http://s7.postimg.org/4vny60wav/002_26.png';
//icon3
var icon3 = new Image();
icon3.onload = function() {
var icon3KJS = new Kinetic.Image({
x:70,
y:500,
image: icon3,
width: 100,
height: 100,
draggable: true
});
firstLayer.add(icon3KJS);
firstLayer.draw();
};
icon3.src =
'http://s28.postimg.org/ut86fftbd/002_18.png';
//garbage
var garbage = new Image();
garbage.onload = function() {
var garbageKJS = new Kinetic.Image({
x:1700,
y:800,
image: garbage,
width: 100,
height: 100,
draggable: true
});
firstLayer.add(garbageKJS);
firstLayer.draw();
};
garbage.src =
'http://s22.postimg.org/vajw4tizx/002_15.png';
//icon4
var icon4 = new Image();
icon4.onload = function() {
var icon4KJS = new Kinetic.Image({
x:70,
y:700,
image: icon4,
width: 100,
height: 100,
draggable: true
});
firstLayer.add(icon4KJS);
firstLayer.draw();
};
icon4.src =
'http://s2.postimg.org/41pzcka1x/002_43.png';
</script>
</body>
</html>
