SNT

Cours de SNT
git clone git://git.vgx.fr/SNT
Log | Files | Refs

trouve-couleur.html (2997B)

      1 <canvas id="trouve-couleur" width="300" height="150"></canvas>
      2 <script type="text/javascript">
      3     var canvas = document.getElementById('trouve-couleur');
      4     var ctx = canvas.getContext('2d');
      5     var score = 0;
      6     var win = false;
      7 
      8     function float8_to_val(num) {
      9         let val = Math.round(num) * 32;
     10         if (val == 256) {
     11             return 255;
     12         }
     13         return val
     14     }
     15 
     16     function new_color() {
     17         return 'rgb('
     18                + float8_to_val(Math.random() * 8) + ','
     19                + float8_to_val(Math.random() * 8) + ','
     20                + float8_to_val(Math.random() * 8) + ')';
     21     }
     22 
     23     var target = new_color();
     24 
     25     var r=0;
     26     var g=0;
     27     var b=0;
     28 
     29     var color = 'rgb(0,0,0)';
     30 
     31     function update_color() {
     32         color = 'rgb(' + r + ',' + g + ',' + b + ')';
     33     }
     34 
     35     function draw_rect(x,y,w,h,c) {
     36         ctx.beginPath();
     37         ctx.fillStyle = c;
     38         ctx.rect(x,y,w,h)
     39         ctx.fill();
     40         ctx.stroke();
     41     }
     42     
     43     function draw() {
     44         ctx.clearRect(0, 0, canvas.width, canvas.height);
     45 
     46         ctx.strokeStyle = 'rgb(255,255,255)';
     47         ctx.font = '20px sans'
     48         
     49         draw_rect(10, 10, 90, 100, target);
     50 
     51         draw_rect(100, 10, 90, 100, color);
     52 
     53         draw_rect(210, 10, 80, 30, 'rgb(0,0,0)');
     54         draw_rect(210, 10, (r * 5) / 16, 30, 'rgb(' + r + ',0,0)');
     55         ctx.fillStyle = 'rgb(255,255,255)';
     56         ctx.fillText('R: ' + r, 220, 30);
     57         
     58         draw_rect(210, 60, 80, 30, 'rgb(0,0,0)');
     59         draw_rect(210, 60, (g * 5) / 16, 30, 'rgb(0,' + g + ',0)');
     60         ctx.fillStyle = 'rgb(255,255,255)';
     61         ctx.fillText('V: ' + g, 220, 82);
     62         
     63         draw_rect(210, 110, 80, 30, 'rgb(0,0,0)');
     64         draw_rect(210, 110, (b * 5) / 16, 30, 'rgb(0,0,' + b + ')');
     65         ctx.fillStyle = 'rgb(255,255,255)';
     66         ctx.fillText('B: ' + b, 220, 132);
     67 
     68         ctx.fillStyle = 'rgb(0,0,0)';
     69         ctx.fillText(score + '/3', 130, 135);
     70     }
     71 
     72     draw();
     73 
     74     function x2col(x) {
     75         return float8_to_val((x-210) / 10);
     76     }
     77 
     78     function handle_click(e) {
     79         let x = e.clientX - canvas.offsetLeft;
     80         let y = e.clientY - canvas.offsetTop;
     81 
     82         if (win) {
     83             win = false;
     84             target = new_color();
     85             draw();
     86         }
     87 
     88         if (x >= 210 && x < 290) {
     89             if (y >= 10 && y < 40) {
     90                 r = x2col(x);
     91                 update_color();
     92             } else if (y >= 60 && y < 90) {
     93                 g = x2col(x);
     94                 update_color();
     95             } else if (y >= 110 && y < 140){
     96                 b = x2col(x);
     97                 update_color();
     98             }
     99             
    100             if (target == color) {
    101             	score += 1;
    102                 draw();
    103             	ctx.fillStyle = 'rgb(0,0,0)';
    104             	ctx.fillText('OK', 40, 135);
    105             	win = true;
    106             } else {
    107                 draw();
    108             }
    109         }
    110     }
    111 
    112     canvas.addEventListener('click', handle_click);
    113     
    114 </script>
    115 
    116