nbinteract-tutorial/cells.html at master · EmmaPoliakova/nbinteract-tutorial · 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
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
<html>
<head>

</head>

<body onload='draw()'>
    <div id=container>
      <canvas id='canvas' width='500' height='500' onclick="drawCoords(event)"></canvas>
    </div>

    <p id='drawCoords'></p>


  <script>

  var forest = createArray(25, 25)
  console.log(forest);

  function draw() {

      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var context = canvas.getContext('2d');

        for(var x=0.5;x<500;x+=20) {
          context.moveTo(x,0);
          context.lineTo(x,500);
        }

        for(var y=0.5; y<500; y+=20) {
          context.moveTo(0,y);
          context.lineTo(500,y);

      }

      context.strokeStyle='grey';
      context.stroke();

      context.moveTo(0,500);
      context.lineTo(500,500);
      context.stroke();

      context.moveTo(500,0);
      context.lineTo(500,500);
      context.stroke();
    }

  }

function drawCoords(event) {
    var x = event.clientX -8;
    var y = event.clientY - 8;
    var numx = ~~(x / 20);
    var numy = ~~(y / 20);
    var coords = "X coordinates: " + x + ", Y coordinates: " + y;

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    if (forest[numx][numy]==1){
      context.fillStyle = "white";
      forest[numx][numy] = 0;
    }
    else {
      context.fillStyle = "green";
      forest[numx][numy] = 1;
    }

    context.beginPath();
    context.fillRect(numx*20+1, numy*20+1, 19, 19);


    document.getElementById('drawCoords').innerHTML = coords;
  }

function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args);
    }

    return arr;
}

  </script>
</body>
</html>