commit c41d36d8378c5dbf260f33549cb9a48cc2a3d4ec · treybastian.com/winterVibesJS

public/sprite_sheet.png

This is a binary file and will not be displayed.

+2 -1

src/config.js

···

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

     

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

     

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

     

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

     

       15
        
       ];

     

       16
        
       

     

       17
        
       /**

     
···

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

     

       24
        
           setParamsAndRefresh(PARAM_DEFAULTS);

     

       25
        
         }

     

       0
        
       
     

       26
        
         return {

     

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

     

       28
        
           canvas: {

···

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

     

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

     

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

     

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

     

       15
        
       ];

     

       16
        
       

     

       17
        
       /**

     
···

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

     

       24
        
           setParamsAndRefresh(PARAM_DEFAULTS);

     

       25
        
         }

     

       26
       +
       

     

       27
        
         return {

     

       28
        
           version: parseInt(urlParams.get("v")),

     

       29
        
           canvas: {

+21 -10

src/main.js

···

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

     

       4
        
       import {

     

       5
        
         accumulateSnow,

     

       6
       -
         checkCollision,

     

       7
        
         createSnowAccumulator,

     

       8
        
         drawSnowAccumulators,

     

       0
        
       
     

       0
        
       
     

       9
        
       } from "./snow_accumulator";

     

       0
        
       
     

       10
        
       

     

       11
        
       /**

     

       12
        
        * @type{Array.<Snowflake>}

     
···

       29
        
        */

     

       30
        
       let ctx;

     

       31
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       32
        
       let lastSpawn = 0;

     

       33
        
       let lastFrame = 0;

     

       34
        
       

     
···

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

     

       44
        
         canvas.width = Config.canvas.width;

     

       45
        
         canvas.height = Config.canvas.height;

     

       0
        
       
     

       46
        
       

     

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

     

       48
        
           floor.push(

     
···

       70
        
           moveSnowflake(flake, delta);

     

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

     

       72
        
       

     

       73
       -
           if (checkCollision(floor[floorIdx], flake)) {

     

       74
        
             if (!isPlowing) {

     

       75
        
               accumulateSnow(floor[floorIdx], flake);

     

       76
        
             }

     
···

       86
        
           isPlowing = true;

     

       87
        
         }

     

       88
        
       

     

       0
        
       
     

       0
        
       
     

       89
        
         if (isPlowing) {

     

       90
       -
           // plow the snow and reset the accumulators

     

       91
       -
           floor.forEach((sa) => {

     

       92
       -
             sa.height = 0;

     

       93
       -
             sa.accumulator = 0;

     

       94
       -
           });

     

       95
       -
           isPlowing = false;

     

       0
        
       
     

       0
        
       
     

       96
        
         }

     

       97
       -
       

     

       98
       -
         drawSnowAccumulators(ctx, floor);

     

       99
        
       

     

       100
        
         lastFrame = time;

     

       101
        
         window.requestAnimationFrame(gameLoop);

···

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

     

       4
        
       import {

     

       5
        
         accumulateSnow,

     

       6
       +
         snowAccumulatorCollisionY,

     

       7
        
         createSnowAccumulator,

     

       8
        
         drawSnowAccumulators,

     

       9
       +
         resetSnowAccumulator,

     

       10
       +
         snowAccumulatorCollisionX,

     

       11
        
       } from "./snow_accumulator";

     

       12
       +
       import { createPlow, drawPlow, movePlow, plowDone } from "./plow";

     

       13
        
       

     

       14
        
       /**

     

       15
        
        * @type{Array.<Snowflake>}

     
···

       32
        
        */

     

       33
        
       let ctx;

     

       34
        
       

     

       35
       +
       /**

     

       36
       +
        * @type {Plow}

     

       37
       +
        */

     

       38
       +
       let plow;

     

       39
       +
       

     

       40
        
       let lastSpawn = 0;

     

       41
        
       let lastFrame = 0;

     

       42
        
       

     
···

       51
        
         ctx = canvas.getContext("2d");

     

       52
        
         canvas.width = Config.canvas.width;

     

       53
        
         canvas.height = Config.canvas.height;

     

       54
       +
         ctx.imageSmoothingEnabled = false;

     

       55
        
       

     

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

     

       57
        
           floor.push(

     
···

       79
        
           moveSnowflake(flake, delta);

     

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

     

       81
        
       

     

       82
       +
           if (snowAccumulatorCollisionY(floor[floorIdx], flake)) {

     

       83
        
             if (!isPlowing) {

     

       84
        
               accumulateSnow(floor[floorIdx], flake);

     

       85
        
             }

     
···

       95
        
           isPlowing = true;

     

       96
        
         }

     

       97
        
       

     

       98
       +
         drawSnowAccumulators(ctx, floor, plow);

     

       99
       +
       

     

       100
        
         if (isPlowing) {

     

       101
       +
           plow ??= createPlow();

     

       102
       +
           movePlow(plow, delta);

     

       103
       +
           drawPlow(plow, ctx);

     

       104
       +
           if (plowDone(plow)) {

     

       105
       +
             isPlowing = false;

     

       106
       +
             plow = null;

     

       107
       +
             floor.forEach((sa) => resetSnowAccumulator(sa));

     

       108
       +
           }

     

       109
        
         }

     

       0
        
       
     

       0
        
       
     

       110
        
       

     

       111
        
         lastFrame = time;

     

       112
        
         window.requestAnimationFrame(gameLoop);

+40 -4

src/plow.js

···

       1
       -
       export function spawnPlow(direction) {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       2
        
         return {

     

       3
       -
           x: 0,

     

       4
       -
           y: 0,

     

       5
       -
           speed: 0.1,

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       6
        
         };

     

       7
        
       }

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       1
       +
       import Config from "./config";

     

       2
       +
       import { drawSprite } from "./sprites";

     

       3
       +
       

     

       4
       +
       /**

     

       5
       +
        * @returns {Plow}

     

       6
       +
        */

     

       7
       +
       export function createPlow() {

     

       8
        
         return {

     

       9
       +
           x: Config.plow.direction === "left" ? Config.canvas.width : -88,

     

       10
       +
           y: Config.canvas.height - 56,

     

       11
       +
           speed: Config.plow.speed,

     

       12
       +
           direction: Config.plow.direction,

     

       13
       +
           height: 56,

     

       14
       +
           width: 88,

     

       15
        
         };

     

       16
        
       }

     

       17
       +
       

     

       18
       +
       /**

     

       19
       +
        * @param {Plow} plow

     

       20
       +
        * @param {number} delta

     

       21
       +
        */

     

       22
       +
       export function movePlow(plow, delta) {

     

       23
       +
         if (plow.direction === "left") {

     

       24
       +
           plow.x -= plow.speed * delta;

     

       25
       +
         } else {

     

       26
       +
           plow.x += plow.speed * delta;

     

       27
       +
         }

     

       28
       +
       }

     

       29
       +
       

     

       30
       +
       /**

     

       31
       +
        * @param {Plow} plow

     

       32
       +
        * @param {CanvasRenderingContext2D} ctx

     

       33
       +
        */

     

       34
       +
       export function drawPlow(plow, ctx) {

     

       35
       +
         drawSprite(ctx, 0, 0, 44, 28, plow.x, plow.y, plow.width, plow.height);

     

       36
       +
       }

     

       37
       +
       

     

       38
       +
       /** @param {Plow} plow */

     

       39
       +
       export function plowDone(plow) {

     

       40
       +
         return plow.direction === "left"

     

       41
       +
           ? plow.x + plow.width < 0

     

       42
       +
           : plow.x > Config.canvas.width;

     

       43
       +
       }

+38 -5

src/snow_accumulator.js

···

       20
        
        * @param {SnowAccumulator} sa

     

       21
        
        * @param {Object} item

     

       22
        
        * @param {number} item.y

     

       0
        
       
     

       23
        
        */

     

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

     

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

     

       26
        
           return true;

     

       27
        
         }

     
···

       32
        
       /**

     

       33
        
        * @param {SnowAccumulator} sa

     

       34
        
        * @param {Object} item

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       35
        
        * @param {number} item.size

     

       36
        
        */

     

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

     
···

       43
        
       }

     

       44
        
       

     

       45
        
       /**

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       46
        
        * @param {CanvasRenderingContext2D} ctx

     

       47
        
        * @param {SnowAccumulator[]} accumulators

     

       0
        
       
     

       48
        
        */

     

       49
       -
       export function drawSnowAccumulators(ctx, accumulators) {

     

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

     

       51
        
         const avgHeight =

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       54
        
       

     

       55
        
         ctx.beginPath();

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

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

     

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

     

       60
        
         ctx.fillStyle = "#fff";

···

       20
        
        * @param {SnowAccumulator} sa

     

       21
        
        * @param {Object} item

     

       22
        
        * @param {number} item.y

     

       23
       +
        * @returns {boolean}

     

       24
        
        */

     

       25
       +
       export function snowAccumulatorCollisionY(sa, { y }) {

     

       26
        
         if (y >= sa.y - sa.height) {

     

       27
        
           return true;

     

       28
        
         }

     
···

       33
        
       /**

     

       34
        
        * @param {SnowAccumulator} sa

     

       35
        
        * @param {Object} item

     

       36
       +
        * @param {number} item.x

     

       37
       +
        * @returns {boolean}

     

       38
       +
        */

     

       39
       +
       export function snowAccumulatorCollisionX(sa, { x }) {

     

       40
       +
         if (x >= sa.x && x <= sa.x + sa.width) {

     

       41
       +
           return true;

     

       42
       +
         }

     

       43
       +
       

     

       44
       +
         return false;

     

       45
       +
       }

     

       46
       +
       

     

       47
       +
       /**

     

       48
       +
        * @param {SnowAccumulator} sa

     

       49
       +
        * @param {Object} item

     

       50
        
        * @param {number} item.size

     

       51
        
        */

     

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

     
···

       58
        
       }

     

       59
        
       

     

       60
        
       /**

     

       61
       +
        * @param {SnowAccumulator} sa

     

       62
       +
        */

     

       63
       +
       export function resetSnowAccumulator(sa) {

     

       64
       +
         sa.accumulator = 0;

     

       65
       +
         sa.height = 0;

     

       66
       +
       }

     

       67
       +
       

     

       68
       +
       /**

     

       69
        
        * @param {CanvasRenderingContext2D} ctx

     

       70
        
        * @param {SnowAccumulator[]} accumulators

     

       71
       +
        * @param {Plow} plow

     

       72
        
        */

     

       73
       +
       export function drawSnowAccumulators(ctx, accumulators, plow) {

     

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

     

       75
        
         const avgHeight =

     

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

     

       77
       +
         const normalized = points

     

       78
       +
           .map(([x, y]) => [x, y - avgHeight])

     

       79
       +
           .filter(([x]) => !(plow && plow.direction === "left" && x >= plow.x));

     

       80
        
       

     

       81
        
         ctx.beginPath();

     

       82
       +
         normalized.forEach(([x, y]) => {

     

       83
       +
           ctx.lineTo(x, y);

     

       84
       +
         });

     

       85
       +
         plow &&

     

       86
       +
           normalized.length > 0 &&

     

       87
       +
           ctx.lineTo(plow.x, normalized[normalized.length - 1][1]);

     

       88
       +
         plow && ctx.lineTo(plow.x, Config.canvas.height);

     

       89
       +
         !plow &&

     

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

     

       91
        
         ctx.lineTo(Config.canvas.width, Config.canvas.height);

     

       92
        
         ctx.lineTo(0, Config.canvas.height);

     

       93
        
         ctx.fillStyle = "#fff";

+12

src/sprites.js

···

       1
       +
       function loadSpriteSheet() {

     

       2
       +
         const image = new Image();

     

       3
       +
         image.src = "./sprite_sheet.png";

     

       4
       +
         return image;

     

       5
       +
       }

     

       6
       +
       const sheet = loadSpriteSheet();

     

       7
       +
       

     

       8
       +
       export function drawSprite(ctx, x, y, width, height, dx, dy, dWidth, dHeight) {

     

       9
       +
         ctx.drawImage(sheet, x, y, width, height, dx, dy, dWidth, dHeight);

     

       10
       +
       }

     

       11
       +
       

     

       12
       +
       export default sheet;

+7 -2

src/types.d.ts

···

       19
        
           };

     

       20
        
           plow: {

     

       21
        
             speed: number;

     

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

     

       23
        
           };

     

       24
        
         };

     

       25
        
       

     
···

       39
        
         };

     

       40
        
       

     

       41
        
         type Plow = {

     

       42
       -
           left: boolean;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       43
        
         };

     

       44
        
       }

···

       19
        
           };

     

       20
        
           plow: {

     

       21
        
             speed: number;

     

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

     

       23
        
           };

     

       24
        
         };

     

       25
        
       

     
···

       39
        
         };

     

       40
        
       

     

       41
        
         type Plow = {

     

       42
       +
           speed: number;

     

       43
       +
           x: number;

     

       44
       +
           y: number;

     

       45
       +
           height: number;

     

       46
       +
           width: number;

     

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

     

       48
        
         };

     

       49
        
       }