commit b564e77aab120708a5f56b6316e0bf4be993fc92 · treybastian.com/winterVibesJS

+12 -4

src/config.js

···

       3
       3
        
       export const CANVAS_HEIGHT = 180;

     

       4
       4
        
       

     

       5
       5
        
       // number of collisions required to shift the snowlevel up

     

       6
       6
       -
       export const FLOOR_RAISE_THRESHOLD = 100;

     

       6
       6
       +
       export const FLOOR_RAISE_THRESHOLD = 4;

     

       7
       7
       +
       

     

       8
       8
       +
       // how many sections the floor is divided into

     

       9
       9
       +
       export const FLOOR_SICE_COUNT = 16;

     

       7
       10
        
       

     

       8
       11
        
       // number of snowflakes to render

     

       9
       9
       -
       export const MAX_PARTICAL_COUNT = 200;

     

       12
       12
       +
       export const MAX_PARTICAL_COUNT = 30;

     

       13
       13
       +
       

     

       14
       14
       +
       export const MAX_FLOOR_HEIGHT = 10;

     

       10
       15
        
       

     

       11
       16
        
       // minimum size of snowflake

     

       12
       17
        
       export const MIN_SIZE = 1;

     
···

       15
       20
        
       export const MAX_SIZE = 4;

     

       16
       21
        
       

     

       17
       22
        
       // maximum speed of a falling snowflake

     

       18
       18
       -
       export const MAX_SPEED = 0.1;

     

       23
       23
       +
       export const MAX_SPEED = 0.07;

     

       19
       24
        
       

     

       20
       25
        
       // minimum speed of a snowflake falling

     

       21
       21
       -
       export const MIN_SPEED = 0.08;

     

       26
       26
       +
       export const MIN_SPEED = 0.04;

     

       27
       27
       +
       

     

       28
       28
       +
       // speed of the plow

     

       29
       29
       +
       export const PLOW_SPEED = 0.1;

+44 -9

src/main.js

···

       1
       1
        
       import "./style.css";

     

       2
       2
       -
       import { CANVAS_HEIGHT, CANVAS_WIDTH, MAX_PARTICAL_COUNT } from "./config";

     

       2
       2
       +
       import {

     

       3
       3
       +
         CANVAS_HEIGHT,

     

       4
       4
       +
         CANVAS_WIDTH,

     

       5
       5
       +
         FLOOR_SICE_COUNT,

     

       6
       6
       +
         MAX_FLOOR_HEIGHT,

     

       7
       7
       +
         MAX_PARTICAL_COUNT,

     

       8
       8
       +
       } from "./config";

     

       3
       9
        
       import { createSnowflake, drawSnowflake, moveSnowflake } from "./snowflake";

     

       4
       10
        
       import {

     

       11
       11
       +
         accumulateSnow,

     

       5
       12
        
         checkCollision,

     

       6
       13
        
         createSnowAccumulator,

     

       7
       7
       -
         drawSnowAccumulator,

     

       14
       14
       +
         drawSnowAccumulators,

     

       8
       15
        
       } from "./snow_accumulator";

     

       9
       16
        
       

     

       10
       17
        
       /**

     
···

       13
       20
        
       const snowFlakes = [];

     

       14
       21
        
       

     

       15
       22
        
       /**

     

       16
       16
       -
        * @type SnowAccumulator

     

       23
       23
       +
        * @type SnowAccumulator[]

     

       17
       24
        
        */

     

       18
       18
       -
       const floor = createSnowAccumulator(CANVAS_HEIGHT);

     

       25
       25
       +
       const floor = [];

     

       19
       26
        
       

     

       27
       27
       +
       const sectionSize = CANVAS_WIDTH / FLOOR_SICE_COUNT;

     

       20
       28
        
       /**

     

       21
       29
        
        * @type {HTMLCanvasElement}

     

       22
       30
        
        */

     
···

       29
       37
        
       

     

       30
       38
        
       let lastSpawn = 0;

     

       31
       39
        
       let lastFrame = 0;

     

       32
       32
       -
       let fps = 0;

     

       40
       40
       +
       

     

       41
       41
       +
       let isPlowing = false;

     

       33
       42
        
       

     

       34
       43
        
       window.onload = init;

     

       35
       44
        
       

     
···

       41
       50
        
         canvas.width = CANVAS_WIDTH;

     

       42
       51
        
         canvas.height = CANVAS_HEIGHT;

     

       43
       52
        
       

     

       53
       53
       +
         for (let i = 0; i < FLOOR_SICE_COUNT; i++) {

     

       54
       54
       +
           floor.push(

     

       55
       55
       +
             createSnowAccumulator(i * sectionSize, CANVAS_HEIGHT, sectionSize),

     

       56
       56
       +
           );

     

       57
       57
       +
         }

     

       58
       58
       +
       

     

       44
       59
        
         window.requestAnimationFrame(gameLoop);

     

       45
       60
        
       }

     

       46
       61
        
       

     
···

       49
       64
        
        */

     

       50
       65
        
       function gameLoop(time) {

     

       51
       66
        
         const delta = time - lastFrame;

     

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

     

       53
       67
        
       

     

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

     

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

     
···

       60
       74
        
       

     

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

     

       62
       76
        
           moveSnowflake(flake, delta);

     

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

     

       77
       77
       +
           const floorIdx = Math.floor(flake.x / sectionSize);

     

       78
       78
       +
       

     

       79
       79
       +
           if (checkCollision(floor[floorIdx], flake)) {

     

       80
       80
       +
             if (!isPlowing) {

     

       81
       81
       +
               accumulateSnow(floor[floorIdx], flake);

     

       82
       82
       +
             }

     

       64
       83
        
             snowFlakes[idx] = createSnowflake();

     

       65
       84
        
           }

     

       66
       85
        
           drawSnowflake(flake, ctx);

     

       67
       86
        
         });

     

       68
       87
        
       

     

       69
       69
       -
         drawSnowAccumulator(ctx, floor);

     

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

     

       88
       88
       +
         const avgHeight =

     

       89
       89
       +
           floor.reduce((acc, sa) => acc + sa.height, 0) / floor.length;

     

       90
       90
       +
       

     

       91
       91
       +
         if (avgHeight > MAX_FLOOR_HEIGHT) {

     

       92
       92
       +
           isPlowing = true;

     

       93
       93
       +
         }

     

       94
       94
       +
       

     

       95
       95
       +
         if (isPlowing) {

     

       96
       96
       +
           // plow the snow and reset the accumulators

     

       97
       97
       +
           floor.forEach((sa) => {

     

       98
       98
       +
             sa.height = 0;

     

       99
       99
       +
             sa.accumulator = 0;

     

       100
       100
       +
           });

     

       101
       101
       +
           isPlowing = false;

     

       102
       102
       +
         }

     

       103
       103
       +
       

     

       104
       104
       +
         drawSnowAccumulators(ctx, floor);

     

       105
       105
       +
       

     

       71
       106
        
         lastFrame = time;

     

       72
       107
        
         window.requestAnimationFrame(gameLoop);

     

       73
       108
        
       }

src/plow.js

···

       1
       1
       +
       export function spawnPlow(direction) {

     

       2
       2
       +
         return {

     

       3
       3
       +
           x: 0,

     

       4
       4
       +
           y: 0,

     

       5
       5
       +
           speed: 0.1,

     

       6
       6
       +
         };

     

       7
       7
       +
       }

+32 -10

src/snow_accumulator.js

···

       2
       2
        
       

     

       3
       3
        
       /**

     

       4
       4
        
        * @param {number} y

     

       5
       5
       +
        * @param {number} x

     

       6
       6
       +
        * @param {number} width

     

       5
       7
        
        * @returns {SnowAccumulator}

     

       6
       8
        
        */

     

       7
       7
       -
       export function createSnowAccumulator(y) {

     

       9
       9
       +
       export function createSnowAccumulator(x, y, width, height = 0) {

     

       8
       10
        
         return {

     

       9
       11
        
           accumulator: 0,

     

       10
       12
        
           y,

     

       13
       13
       +
           x,

     

       14
       14
       +
           width,

     

       15
       15
       +
           height,

     

       11
       16
        
         };

     

       12
       17
        
       }

     

       13
       18
        
       

     
···

       17
       22
        
        * @param {number} item.y

     

       18
       23
        
        */

     

       19
       24
        
       export function checkCollision(sa, { y }) {

     

       20
       20
       -
         if (y >= sa.y) {

     

       21
       21
       -
           sa.accumulator++;

     

       22
       22
       -
       

     

       23
       23
       -
           if (sa.accumulator % FLOOR_RAISE_THRESHOLD == 0) {

     

       24
       24
       -
             sa.y -= 1;

     

       25
       25
       -
           }

     

       25
       25
       +
         if (y >= sa.y - sa.height) {

     

       26
       26
        
           return true;

     

       27
       27
        
         }

     

       28
       28
       +
       

     

       28
       29
        
         return false;

     

       29
       30
        
       }

     

       30
       31
        
       

     

       31
       32
        
       /**

     

       32
       32
       -
        * @param {CanvasRenderingContext2D} ctx

     

       33
       33
        
        * @param {SnowAccumulator} sa

     

       34
       34
       +
        * @param {Object} item

     

       35
       35
       +
        * @param {number} item.size

     

       34
       36
        
        */

     

       35
       35
       -
       export function drawSnowAccumulator(ctx, sa) {

     

       37
       37
       +
       export function accumulateSnow(sa, { size }) {

     

       38
       38
       +
         sa.accumulator += size;

     

       39
       39
       +
       

     

       40
       40
       +
         if (sa.accumulator % FLOOR_RAISE_THRESHOLD == 0) {

     

       41
       41
       +
           sa.height += 1;

     

       42
       42
       +
         }

     

       43
       43
       +
       }

     

       44
       44
       +
       

     

       45
       45
       +
       /**

     

       46
       46
       +
        * @param {CanvasRenderingContext2D} ctx

     

       47
       47
       +
        * @param {SnowAccumulator[]} accumulators

     

       48
       48
       +
        */

     

       49
       49
       +
       export function drawSnowAccumulators(ctx, accumulators) {

     

       50
       50
       +
         const points = accumulators.map((sa) => [sa.x, sa.y - sa.height]);

     

       51
       51
       +
         const avgHeight =

     

       52
       52
       +
           accumulators.reduce((acc, sa) => acc + sa.height, 0) / accumulators.length;

     

       53
       53
       +
         const noramlized = points.map(([x, y]) => [x, y - avgHeight]);

     

       54
       54
       +
       

     

       36
       55
        
         ctx.beginPath();

     

       37
       37
       -
         ctx.rect(0, sa.y, CANVAS_WIDTH, CANVAS_HEIGHT - sa.y);

     

       56
       56
       +
         noramlized.forEach(([x, y]) => ctx.lineTo(x, y));

     

       57
       57
       +
         ctx.lineTo(CANVAS_WIDTH, noramlized[noramlized.length - 1][1]);

     

       58
       58
       +
         ctx.lineTo(CANVAS_WIDTH, CANVAS_HEIGHT);

     

       59
       59
       +
         ctx.lineTo(0, CANVAS_HEIGHT);

     

       38
       60
        
         ctx.fillStyle = "#fff";

     

       39
       61
        
         ctx.fill();

     

       40
       62
        
       }

src/types.d.ts

···

       10
       10
        
         type SnowAccumulator = {

     

       11
       11
        
           accumulator: number;

     

       12
       12
        
           y: number;

     

       13
       13
       +
           height: number;

     

       14
       14
       +
           x: number;

     

       15
       15
       +
           width: number;

     

       16
       16
       +
         };

     

       17
       17
       +
       

     

       18
       18
       +
         type Plow = {

     

       19
       19
       +
           left: boolean;

     

       13
       20
        
         };

     

       14
       21
        
       }