Pulse/testingAnimations.html at master · JasonDykstra/Pulse · GitHub

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
<canvas id="canvas" width="800" height="600"></canvas>

<script type="text/javascript" src="js/vector.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var sheetSource = "images/Explosions.png"

  var rectX = 300;
  var rectY = 233;


  let information = {
    src: sheetSource,
    sheetWidth: 200,
    sheetHeight: 300,
    spriteWidth: 100,
    spriteHeight: 100,
    numSprites: 5
  }


  var mySheetObj1 = new Animation("none", new Vector(rectX, rectY), information, 5, 3, true);


  function clearBackground(){
    context.fillStyle = "rgb(50, 50, 50)";
    context.fillRect(0, 0, canvas.width, canvas.height);
  }

  function run(){
    clearBackground();
    mySheetObj1.update();
    mySheetObj1.draw(context);
    context.fillStyle = "yellow";
    context.fillRect(rectX, rectY, 5, 5);

    context.strokeStyle = "yellow";
    context.strokeRect(rectX - mySheetObj1.spriteWidth/2, rectY - mySheetObj1.spriteHeight/2, mySheetObj1.spriteWidth, mySheetObj1.spriteHeight);
    context.strokeRect(mySheetObj1.coordinates.x - mySheetObj1.spriteWidth * mySheetObj1.scale / 2, mySheetObj1.coordinates.y - mySheetObj1.spriteHeight * mySheetObj1.scale / 2, mySheetObj1.spriteWidth * mySheetObj1.scale, mySheetObj1.spriteHeight * mySheetObj1.scale);


  }

  setInterval(run, 1000/30);

</script>