commit 622990fcb3a7b091363ea858969c478a93b0d13c · treybastian.com/winterVibesJS

-1

javascript.svg

···

       1
       1
       -
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

+2 -5

src/config.js

···

       15
       15
        
       export const MAX_SIZE = 4;

     

       16
       16
        
       

     

       17
       17
        
       // maximum speed of a falling snowflake

     

       18
       18
       -
       export const MAX_SPEED = 1;

     

       18
       18
       +
       export const MAX_SPEED = 0.1;

     

       19
       19
        
       

     

       20
       20
        
       // minimum speed of a snowflake falling

     

       21
       21
       -
       export const MIN_SPEED = 0.5;

     

       22
       22
       -
       

     

       23
       23
       -
       // threshold for how fast snowflakes can go and have horizontal movement

     

       24
       24
       -
       export const SWAY_THRESHOLD = 0.8;

     

       21
       21
       +
       export const MIN_SPEED = 0.08;

+18 -14

src/main.js

···

       8
       8
        
       } from "./snow_accumulator";

     

       9
       9
        
       

     

       10
       10
        
       /**

     

       11
       11
       +
        * @type{Array.<Snowflake>}

     

       12
       12
       +
        */

     

       13
       13
       +
       const snowFlakes = [];

     

       14
       14
       +
       

     

       15
       15
       +
       /**

     

       16
       16
       +
        * @type SnowAccumulator

     

       17
       17
       +
        */

     

       18
       18
       +
       const floor = createSnowAccumulator(CANVAS_HEIGHT);

     

       19
       19
       +
       

     

       20
       20
       +
       /**

     

       11
       21
        
        * @type {HTMLCanvasElement}

     

       12
       22
        
        */

     

       13
       23
        
       let canvas;

     
···

       17
       27
        
        */

     

       18
       28
        
       let ctx;

     

       19
       29
        
       

     

       20
       20
       -
       /**

     

       21
       21
       -
        * @type{Array.<Snowflake>}

     

       22
       22
       -
        */

     

       23
       23
       -
       const snowFlakes = [];

     

       24
       24
       -
       

     

       25
       30
        
       let lastSpawn = 0;

     

       26
       26
       -
       let floor = createSnowAccumulator(CANVAS_HEIGHT);

     

       27
       27
       -
       

     

       28
       31
        
       let lastFrame = 0;

     

       29
       32
        
       let fps = 0;

     

       30
       33
        
       

     
···

       42
       45
        
       }

     

       43
       46
        
       

     

       44
       47
        
       /**

     

       45
       45
       -
        * @param delta {DOMHighResTimeStamp}

     

       48
       48
       +
        * @param time {DOMHighResTimeStamp}

     

       46
       49
        
        */

     

       47
       47
       -
       function gameLoop(delta) {

     

       48
       48
       -
         fps = Math.round(1 / ((delta - lastFrame) / 1000));

     

       50
       50
       +
       function gameLoop(time) {

     

       51
       51
       +
         const delta = time - lastFrame;

     

       52
       52
       +
         fps = Math.round(1 / (delta / 1000));

     

       53
       53
       +
       

     

       49
       54
        
         ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

     

       50
       50
       -
         if (delta - lastSpawn > 500 && snowFlakes.length < MAX_PARTICAL_COUNT) {

     

       55
       55
       +
         if (time - lastSpawn > 500 && snowFlakes.length < MAX_PARTICAL_COUNT) {

     

       51
       56
        
           for (let i = 0; i < Math.floor(Math.random() * 2); i++) {

     

       52
       57
        
             snowFlakes.push(createSnowflake());

     

       53
       58
        
           }

     

       54
       59
        
         }

     

       55
       60
        
       

     

       56
       61
        
         snowFlakes.forEach((flake, idx) => {

     

       57
       57
       -
           moveSnowflake(flake);

     

       62
       62
       +
           moveSnowflake(flake, delta);

     

       58
       63
        
           if (checkCollision(floor, flake)) {

     

       59
       64
        
             snowFlakes[idx] = createSnowflake();

     

       60
       65
        
           }

     
···

       63
       68
        
       

     

       64
       69
        
         drawSnowAccumulator(ctx, floor);

     

       65
       70
        
         ctx.fillText("FPS: " + fps, 10, 30);

     

       66
       66
       -
         lastFrame = delta;

     

       67
       67
       -
       

     

       71
       71
       +
         lastFrame = time;

     

       68
       72
        
         window.requestAnimationFrame(gameLoop);

     

       69
       73
        
       }

+3 -12

src/snowflake.js

···

       4
       4
        
         MAX_SPEED,

     

       5
       5
        
         MIN_SIZE,

     

       6
       6
        
         MIN_SPEED,

     

       7
       7
       -
         SWAY_THRESHOLD,

     

       8
       7
        
       } from "./config";

     

       9
       8
        
       

     

       10
       9
        
       /**

     
···

       35
       34
        
       

     

       36
       35
        
       /**

     

       37
       36
        
        * @param {Snowflake} snowflake

     

       37
       37
       +
        * @param {number} delta

     

       38
       38
        
        */

     

       39
       39
       -
       export function moveSnowflake(snowflake) {

     

       40
       40
       -
         snowflake.y += snowflake.speed;

     

       41
       41
       -
         const sway = Math.random() < 0.5 && snowflake.speed < SWAY_THRESHOLD;

     

       42
       42
       -
         if (sway) {

     

       43
       43
       -
           const direction = Math.random() < 0.5;

     

       44
       44
       -
           if (direction) {

     

       45
       45
       -
             snowflake.x += (snowflake.speed * 5) / 10;

     

       46
       46
       -
           } else {

     

       47
       47
       -
             snowflake.x -= (snowflake.speed * 5) / 10;

     

       48
       48
       -
           }

     

       49
       49
       -
         }

     

       39
       39
       +
       export function moveSnowflake(snowflake, delta) {

     

       40
       40
       +
         snowflake.y += snowflake.speed * delta;

     

       50
       41
        
       }