flammrock.github.io/fogofwarexample.html at master · Flammrock/flammrock.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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fog Of War</title>
  </head>
  <body style="background:#08f;">

    <script type="text/javascript">

      var mouse = {x:0,y:0};

      window.addEventListener('load',function() {
        var game = new Game(500,500);
        window.onmousemove = function(event) {
          var rect = game.canvas.getBoundingClientRect();
          mouse.x = event.clientX - rect.left;
          mouse.y = event.clientY - rect.top;
        }
      });

      class FogOfWar {

        constructor(game) {

          this.game = game; // game est un instancier de la classe Game

          // On créé un simple canvas
          this.canvas = document.createElement('canvas');

          // On fais en sorte qu'il soit de la même taille que le canvas de notre jeu
          this.canvas.width = this.game.canvas.width;
          this.canvas.height = this.game.canvas.height;

          // On récupère le contexte 2D
          this.ctx = this.canvas.getContext('2d');

          // On colorie le tout en Noir
          this.ctx.fillStyle = '#000000';
          this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);

          // Et on passe en mode destination-out
          this.ctx.globalCompositeOperation = 'destination-out';

          // On créé un autre canvas pour y stocker les zones d'ombres
          this.shadow = document.createElement('canvas');
          this.shadow.width = this.game.canvas.width;
          this.shadow.height = this.game.canvas.height;
          this.shadow_ctx = this.shadow.getContext('2d');
          this.shadow_ctx.fillStyle = 'rgba(0,0,0,0.5)';
          this.shadow_ctx.fillRect(0, 0, this.shadow.width, this.shadow.height);

        }

        // Une simple méthode pour explorer le "Fog Of War"
        explore(x,y,radius) {

          // on dessine juste un cercle
          this.ctx.beginPath();
          this.ctx.lineWidth = 0;
          this.ctx.arc(x,y,radius,0,2*Math.PI,false);
          this.ctx.fill();

          // On dessine juste un cercle en mode destination-out
          this.shadow_ctx.save();
          this.shadow_ctx.globalCompositeOperation = 'destination-out';
          this.shadow_ctx.beginPath();
          this.shadow_ctx.arc(
            x,
            y,
            radius,
            0,
            2*Math.PI,
            false
          );
          this.shadow_ctx.fillStyle = '#000000';
          this.shadow_ctx.fill();
          this.shadow_ctx.restore();

        }

        clearVisibility() {

          // On efface tout
          this.shadow_ctx.clearRect(0,0,this.shadow.width,this.shadow.height);

          // Et On dessine tout en Noir transparent
          this.shadow_ctx.fillStyle = 'rgba(0,0,0,0.5)';
          this.shadow_ctx.fillRect(0,0,this.shadow.width,this.shadow.height);

        }

        // Une fonction update appelé par le jeu
        update() {

          // On dessine d'abord notre masque
          this.game.ctx.drawImage(this.canvas,0,0);

          // Puis on dessine les zones déjà exploré par le joueur
          this.game.ctx.drawImage(this.shadow,0,0);

        }

      }

      class Game {

        constructor(width, height) {

          this.canvas = document.createElement('canvas');
          this.canvas.width = width || 300;
          this.canvas.height = height || 300;

          this.ctx = this.canvas.getContext('2d');

          document.body.appendChild(this.canvas);

          this.fogOfWar = new FogOfWar(this);


          this.background = new Image();
          this.background.ready = false;
          this.background.onload = function() {
            this.ready = true;
          };
          this.background.src = 'http://www.ludumdare.com/compo/wp-content/uploads/2010/06/jolle-minild19-shot01.png';


          this.update();

        }

        update() {

          var _this = this;

          this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

          if (this.background.ready) this.ctx.drawImage(this.background,0,0,this.canvas.width,this.canvas.height);

          this.fogOfWar.clearVisibility();

          this.fogOfWar.explore(mouse.x,mouse.y,50);

          this.fogOfWar.update();

          window.requestAnimationFrame(function(){_this.update()});

        }

      }

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