git @ Cat's Eye Technologies yoob.js / master eg / sprite-manager.html
master

Tree @master (Download .tar.gz)

sprite-manager.html @master — raw · history · blame 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>yoob.SpriteManager Demo</title>
  <style>
#canvas { border: 1px solid blue; }
  </style>
</head>
<body>

<h1>yoob.SpriteManager Demo</h1>

<canvas id="canvas" width="600" height="400">
Your browser doesn't support displaying an HTML5 canvas.
</canvas>

</body>
<script src="../src/yoob/sprite-manager.js"></script>
<script type="text/javascript">
  var c = document.getElementById('canvas');
  var manager = new yoob.SpriteManager();
  manager.init({
      canvas: c
  });

  var addDraggable = function(x, y, w, h, style) {
      var d = new yoob.Sprite();
      d.init({
          x: x,
          y: y,
          width: w,
          height: h,
          isDraggable: true
      });
      d.draw = function(ctx) {
          ctx.shadowOffsetX = 10;
          ctx.shadowOffsetY = 10;
          ctx.shadowBlur = 15;
          ctx.shadowColor = "black";

          var x = this.getLeftX();
          var y = this.getTopY();
          var w = this.getWidth();
          var h = this.getHeight();
          if (this.selected) {
              var max = w > h ? w : h;
              var gradient = ctx.createLinearGradient(x, y, x + max, y + max);
              gradient.addColorStop(0, this.style);
              gradient.addColorStop(0.5, "white");
              gradient.addColorStop(1, this.style);
              ctx.fillStyle = gradient;
          } else {
              ctx.fillStyle = this.style;
          }
          ctx.fillRect(x, y, w, h);

          ctx.lineWidth = 1;
          ctx.strokeStyle = "black";
          ctx.shadowColor = "transparent";
          ctx.strokeRect(x, y, w, h);
      };
      d.style = style;
      d.ongrab = function() {
          manager.moveToFront(this);
      };
      d.ondrop = function() {
          if (this.getX() > canvas.width - this.getWidth()) {
              manager.removeSprite(this);
          }
      };
      manager.addSprite(d);
  };

  var addClickable = function(x, y, w, h, text) {
      var d = new yoob.Sprite();
      d.init({
          x: x,
          y: y,
          width: w,
          height: h,
          isClickable: true
      });
      d.draw = function(ctx) {
          ctx.fillStyle = "blue";
          ctx.beginPath();
          ctx.arc(
              this.getX(), this.getY(), this.getWidth() / 2,
              0, 2 * Math.PI, false
          );
          ctx.fill();
          ctx.strokeStyle = "black";
          ctx.lineWidth = 2;
          ctx.stroke();
      };
      d.containsPoint = function(x, y) {
          var r = this.getWidth() / 2;
          var dx = x - this.getX();
          var dy = y - this.getY();
          var dist = dx * dx + dy * dy;
          return dist < r * r;
      };
      d.onclick = function() {
          alert("You clicked " + text);
      };
      manager.addSprite(d);
  };

  addDraggable(100, 100, 60, 60, "green");
  addDraggable(200, 100, 100, 40, "red");
  addDraggable(100, 200, 50, 90, "yellow");
  
  addClickable(200, 200, 80, 80, "blue circle");

  interval_id = setInterval(function() {
      var ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, c.width, c.height);
      manager.draw(ctx);
  }, 20);
</script>