commit 8bb5fd0ef5ac243703a907f0265afbdfd29736db · treybastian.com/winterVibesJS

+60 -25

src/config.js

···

       1
       1
       -
       // canvas size - I chose these sizes for 16:9 aspect ratio and really pixely

     

       2
       2
       -
       export const CANVAS_WIDTH = 320;

     

       3
       3
       -
       export const CANVAS_HEIGHT = 180;

     

       1
       1
       +
       // default configuration values

     

       2
       2
       +
       const PARAM_DEFAULTS = [

     

       3
       3
       +
         { name: "v", value: 1 }, // version

     

       4
       4
       +
         { name: "cw", value: 640 }, // canvas width

     

       5
       5
       +
         { name: "ch", value: 360 }, // canvas height

     

       6
       6
       +
         { name: "smx", value: 40 }, // snow max

     

       7
       7
       +
         { name: "smnsz", value: 1 }, // snow min size

     

       8
       8
       +
         { name: "smxsz", value: 4 }, // snow max size

     

       9
       9
       +
         { name: "smxspd", value: 0.07 }, // snow max speed

     

       10
       10
       +
         { name: "snmnspd", value: 0.04 }, // snow min speed

     

       11
       11
       +
         { name: "pspd", value: 0.1 }, // plow speed

     

       12
       12
       +
         { name: "pd", value: "left" }, // plow direction

     

       13
       13
       +
         { name: "gamax", value: 4 }, // ground accumulator max

     

       14
       14
       +
         { name: "gas", value: 10 }, // ground accumulatior slices

     

       15
       15
       +
       ];

     

       4
       16
        
       

     

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

     

       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;

     

       10
       10
       -
       

     

       11
       11
       -
       // number of snowflakes to render

     

       12
       12
       -
       export const MAX_PARTICAL_COUNT = 30;

     

       13
       13
       -
       

     

       14
       14
       -
       export const MAX_FLOOR_HEIGHT = 10;

     

       15
       15
       -
       

     

       16
       16
       -
       // minimum size of snowflake

     

       17
       17
       -
       export const MIN_SIZE = 1;

     

       18
       18
       -
       

     

       19
       19
       -
       // maximum size of snowflake

     

       20
       20
       -
       export const MAX_SIZE = 4;

     

       17
       17
       +
       /**

     

       18
       18
       +
        * @returns {Config} configuration object

     

       19
       19
       +
        * gets configuration from query parameters or defaults

     

       20
       20
       +
        */

     

       21
       21
       +
       function getConfiguration() {

     

       22
       22
       +
         const urlParams = new URLSearchParams(window.location.search);

     

       23
       23
       +
         if (PARAM_DEFAULTS.some(({ name }) => !urlParams.has(name))) {

     

       24
       24
       +
           setParamsAndRefresh(PARAM_DEFAULTS);

     

       25
       25
       +
         }

     

       26
       26
       +
         return {

     

       27
       27
       +
           version: parseInt(urlParams.get("v")),

     

       28
       28
       +
           canvas: {

     

       29
       29
       +
             width: parseInt(urlParams.get("cw")),

     

       30
       30
       +
             height: parseInt(urlParams.get("ch")),

     

       31
       31
       +
           },

     

       32
       32
       +
           snow: {

     

       33
       33
       +
             max: parseInt(urlParams.get("smx")),

     

       34
       34
       +
             minSize: parseInt(urlParams.get("smnsz")),

     

       35
       35
       +
             maxSize: parseInt(urlParams.get("smxsz")),

     

       36
       36
       +
             maxSpeed: parseFloat(urlParams.get("smxspd")),

     

       37
       37
       +
             minSpeed: parseFloat(urlParams.get("snmnspd")),

     

       38
       38
       +
           },

     

       39
       39
       +
           plow: {

     

       40
       40
       +
             speed: parseFloat(urlParams.get("pspd")),

     

       41
       41
       +
             // @ts-ignore -- I dunno how to get ts / jsdoc to be ok with this

     

       42
       42
       +
             direction: urlParams.get("pd"),

     

       43
       43
       +
           },

     

       44
       44
       +
           groundAccumulator: {

     

       45
       45
       +
             max: parseInt(urlParams.get("gamax")),

     

       46
       46
       +
             slices: parseInt(urlParams.get("gas")),

     

       47
       47
       +
           },

     

       48
       48
       +
         };

     

       49
       49
       +
       }

     

       21
       50
        
       

     

       22
       22
       -
       // maximum speed of a falling snowflake

     

       23
       23
       -
       export const MAX_SPEED = 0.07;

     

       51
       51
       +
       /**

     

       52
       52
       +
        * @param {Array<{name: string, value: any}>} params

     

       53
       53
       +
        */

     

       54
       54
       +
       export function setParamsAndRefresh(params) {

     

       55
       55
       +
         const urlParams = new URLSearchParams(window.location.search);

     

       56
       56
       +
         params.forEach(({ name, value }) => {

     

       57
       57
       +
           urlParams.set(name, value);

     

       58
       58
       +
         });

     

       59
       59
       +
         window.location.search = urlParams.toString();

     

       60
       60
       +
       }

     

       24
       61
        
       

     

       25
       25
       -
       // minimum speed of a snowflake falling

     

       26
       26
       -
       export const MIN_SPEED = 0.04;

     

       62
       62
       +
       const config = getConfiguration();

     

       27
       63
        
       

     

       28
       28
       -
       // speed of the plow

     

       29
       29
       -
       export const PLOW_SPEED = 0.1;

     

       64
       64
       +
       export default config;

+9 -15

src/main.js

···

       1
       1
        
       import "./style.css";

     

       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";

     

       2
       2
       +
       import Config from "./config";

     

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

     

       10
       4
        
       import {

     

       11
       5
        
         accumulateSnow,

     
···

       24
       18
        
        */

     

       25
       19
        
       const floor = [];

     

       26
       20
        
       

     

       27
       27
       -
       const sectionSize = CANVAS_WIDTH / FLOOR_SICE_COUNT;

     

       21
       21
       +
       const sectionSize = Config.canvas.width / Config.groundAccumulator.slices;

     

       28
       22
        
       /**

     

       29
       23
        
        * @type {HTMLCanvasElement}

     

       30
       24
        
        */

     
···

       47
       41
        
         canvas = document.getElementById("main");

     

       48
       42
        
       

     

       49
       43
        
         ctx = canvas.getContext("2d");

     

       50
       50
       -
         canvas.width = CANVAS_WIDTH;

     

       51
       51
       -
         canvas.height = CANVAS_HEIGHT;

     

       44
       44
       +
         canvas.width = Config.canvas.width;

     

       45
       45
       +
         canvas.height = Config.canvas.height;

     

       52
       46
        
       

     

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

     

       47
       47
       +
         for (let i = 0; i < Config.groundAccumulator.slices; i++) {

     

       54
       48
        
           floor.push(

     

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

     

       49
       49
       +
             createSnowAccumulator(i * sectionSize, Config.canvas.height, sectionSize),

     

       56
       50
        
           );

     

       57
       51
        
         }

     

       58
       52
        
       

     
···

       65
       59
        
       function gameLoop(time) {

     

       66
       60
        
         const delta = time - lastFrame;

     

       67
       61
        
       

     

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

     

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

     

       62
       62
       +
         ctx.clearRect(0, 0, Config.canvas.width, Config.canvas.height);

     

       63
       63
       +
         if (time - lastSpawn > 500 && snowFlakes.length < Config.snow.max) {

     

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

     

       71
       65
        
             snowFlakes.push(createSnowflake());

     

       72
       66
        
           }

     
···

       88
       82
        
         const avgHeight =

     

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

     

       90
       84
        
       

     

       91
       91
       -
         if (avgHeight > MAX_FLOOR_HEIGHT) {

     

       85
       85
       +
         if (avgHeight > Config.groundAccumulator.max) {

     

       92
       86
        
           isPlowing = true;

     

       93
       87
        
         }

     

       94
       88

+5 -5

src/snow_accumulator.js

···

       1
       1
       -
       import { CANVAS_HEIGHT, CANVAS_WIDTH, FLOOR_RAISE_THRESHOLD } from "./config";

     

       1
       1
       +
       import Config from "./config";

     

       2
       2
        
       

     

       3
       3
        
       /**

     

       4
       4
        
        * @param {number} y

     
···

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

     

       38
       38
        
         sa.accumulator += size;

     

       39
       39
        
       

     

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

     

       40
       40
       +
         if (sa.accumulator % Config.groundAccumulator.max == 0) {

     

       41
       41
        
           sa.height += 1;

     

       42
       42
        
         }

     

       43
       43
        
       }

     
···

       54
       54
        
       

     

       55
       55
        
         ctx.beginPath();

     

       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);

     

       57
       57
       +
         ctx.lineTo(Config.canvas.width, noramlized[noramlized.length - 1][1]);

     

       58
       58
       +
         ctx.lineTo(Config.canvas.width, Config.canvas.height);

     

       59
       59
       +
         ctx.lineTo(0, Config.canvas.height);

     

       60
       60
        
         ctx.fillStyle = "#fff";

     

       61
       61
        
         ctx.fill();

     

       62
       62
        
       }

+9 -10

src/snowflake.js

···

       1
       1
       -
       import {

     

       2
       2
       -
         CANVAS_WIDTH,

     

       3
       3
       -
         MAX_SIZE,

     

       4
       4
       -
         MAX_SPEED,

     

       5
       5
       -
         MIN_SIZE,

     

       6
       6
       -
         MIN_SPEED,

     

       7
       7
       -
       } from "./config";

     

       1
       1
       +
       import Config from "./config";

     

       8
       2
        
       

     

       9
       3
        
       /**

     

       10
       4
        
        * @returns {Snowflake}

     

       11
       5
        
        */

     

       12
       6
        
       export function createSnowflake() {

     

       13
       7
        
         return {

     

       14
       14
       -
           x: Math.floor(Math.random() * CANVAS_WIDTH),

     

       8
       8
       +
           x: Math.floor(Math.random() * Config.canvas.width),

     

       15
       9
        
           y: -1,

     

       16
       16
       -
           speed: Math.random() * (MIN_SPEED - MAX_SPEED) + MAX_SPEED,

     

       17
       17
       -
           size: Math.floor(Math.random() * (MIN_SIZE - MAX_SIZE) + MAX_SIZE),

     

       10
       10
       +
           speed:

     

       11
       11
       +
             Math.random() * (Config.snow.minSpeed - Config.snow.maxSpeed) +

     

       12
       12
       +
             Config.snow.maxSpeed,

     

       13
       13
       +
           size: Math.floor(

     

       14
       14
       +
             Math.random() * (Config.snow.minSize - Config.snow.maxSize) +

     

       15
       15
       +
               Config.snow.maxSize,

     

       16
       16
       +
           ),

     

       18
       17
        
         };

     

       19
       18
        
       }

     

       20
       19

+23

src/types.d.ts

···

       1
       1
        
       export {};

     

       2
       2
        
       declare global {

     

       3
       3
       +
         type Config = {

     

       4
       4
       +
           version: number;

     

       5
       5
       +
           canvas: {

     

       6
       6
       +
             width: number;

     

       7
       7
       +
             height: number;

     

       8
       8
       +
           };

     

       9
       9
       +
           snow: {

     

       10
       10
       +
             max: number;

     

       11
       11
       +
             minSize: number;

     

       12
       12
       +
             maxSize: number;

     

       13
       13
       +
             minSpeed: number;

     

       14
       14
       +
             maxSpeed: number;

     

       15
       15
       +
           };

     

       16
       16
       +
           groundAccumulator: {

     

       17
       17
       +
             max: number;

     

       18
       18
       +
             slices: number;

     

       19
       19
       +
           };

     

       20
       20
       +
           plow: {

     

       21
       21
       +
             speed: number;

     

       22
       22
       +
             direction: "left" | "right";

     

       23
       23
       +
           };

     

       24
       24
       +
         };

     

       25
       25
       +
       

     

       3
       26
        
         type Snowflake = {

     

       4
       27
        
           x: number;

     

       5
       28
        
           y: number;