带有画布的模拟操作系统

Question

我必须为我的大学课程建立一个模拟操作系统。我让它变得非常简单，没什么太花哨的，而且我正在使用HTML5 Canvas。

到目前为止，我在黑色背景上有图标，并使它们可以拖动。我想知道如何实现这一点，当你点击图标时出现一个方框（就像一个真实的操作系统），然后通过点击＆＃39; x＆＃39;来关闭。

我还希望能够将任何图标拖入垃圾箱，它就会消失。我知道有点击/鼠标事件，但我不知道如何在我设置的代码中实现它们。

以下是代码：

＆＃13;

＆＃13;

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';

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<div id="canvas"></div>

＆＃13;

＆＃13;

＆＃13;