wizardcarter.github.io/spaceinvaders.html at master · WizardCarter/wizardcarter.github.io · 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
<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="painter" width="800" height="600" style="border: 5px solid black"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      console.log("Started!");
      var canvas = document.getElementById("painter");
      var WIDTH = canvas.width;
      var HEIGHT = canvas.height;
      var c = canvas.getContext("2d");

      class Rectangle {
        var width;
        var height;
        var x;
        var y;
        var color;

        constructor(x, y, width, height) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
        }

        function draw() {
          c.fillStyle = color;
          c.fillRect(this.x, this.y, this.width, this.height);
        }
      }

      var cmTID;

      function update() {

      }

      function draw() {
        update();
        clearTimeout(cmTID);
        cmTID = setTimeout(draw, 100);
        console.log("Draw Function called");
      }

      draw();
    </script>
  </body>
</html>