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

     

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

     

       15
       15
        
       ];

     

       16
       16
        
       

     

       17
       17
        
       /**

     
···

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

     

       24
       24
        
           setParamsAndRefresh(PARAM_DEFAULTS);

     

       25
       25
        
         }

     

       26
       26
       +
       

     

       26
       27
        
         return {

     

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

     

       28
       29
        
           canvas: {

+21 -10

src/main.js

···

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

     

       4
       4
        
       import {

     

       5
       5
        
         accumulateSnow,

     

       6
       6
       -
         checkCollision,

     

       6
       6
       +
         snowAccumulatorCollisionY,

     

       7
       7
        
         createSnowAccumulator,

     

       8
       8
        
         drawSnowAccumulators,

     

       9
       9
       +
         resetSnowAccumulator,

     

       10
       10
       +
         snowAccumulatorCollisionX,

     

       9
       11
        
       } from "./snow_accumulator";

     

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

     

       10
       13
        
       

     

       11
       14
        
       /**

     

       12
       15
        
        * @type{Array.<Snowflake>}

     
···

       29
       32
        
        */

     

       30
       33
        
       let ctx;

     

       31
       34
        
       

     

       35
       35
       +
       /**

     

       36
       36
       +
        * @type {Plow}

     

       37
       37
       +
        */

     

       38
       38
       +
       let plow;

     

       39
       39
       +
       

     

       32
       40
        
       let lastSpawn = 0;

     

       33
       41
        
       let lastFrame = 0;

     

       34
       42
        
       

     
···

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

     

       44
       52
        
         canvas.width = Config.canvas.width;

     

       45
       53
        
         canvas.height = Config.canvas.height;

     

       54
       54
       +
         ctx.imageSmoothingEnabled = false;

     

       46
       55
        
       

     

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

     

       48
       57
        
           floor.push(

     
···

       70
       79
        
           moveSnowflake(flake, delta);

     

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

     

       72
       81
        
       

     

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

     

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

     

       74
       83
        
             if (!isPlowing) {

     

       75
       84
        
               accumulateSnow(floor[floorIdx], flake);

     

       76
       85
        
             }

     
···

       86
       95
        
           isPlowing = true;

     

       87
       96
        
         }

     

       88
       97
        
       

     

       98
       98
       +
         drawSnowAccumulators(ctx, floor, plow);

     

       99
       99
       +
       

     

       89
       100
        
         if (isPlowing) {

     

       90
       90
       -
           // plow the snow and reset the accumulators

     

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

     

       92
       92
       -
             sa.height = 0;

     

       93
       93
       -
             sa.accumulator = 0;

     

       94
       94
       -
           });

     

       95
       95
       -
           isPlowing = false;

     

       101
       101
       +
           plow ??= createPlow();

     

       102
       102
       +
           movePlow(plow, delta);

     

       103
       103
       +
           drawPlow(plow, ctx);

     

       104
       104
       +
           if (plowDone(plow)) {

     

       105
       105
       +
             isPlowing = false;

     

       106
       106
       +
             plow = null;

     

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

     

       108
       108
       +
           }

     

       96
       109
        
         }

     

       97
       97
       -
       

     

       98
       98
       -
         drawSnowAccumulators(ctx, floor);

     

       99
       110
        
       

     

       100
       111
        
         lastFrame = time;

     

       101
       112
        
         window.requestAnimationFrame(gameLoop);

+40 -4

src/plow.js

···

       1
       1
       -
       export function spawnPlow(direction) {

     

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

     

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

     

       3
       3
       +
       

     

       4
       4
       +
       /**

     

       5
       5
       +
        * @returns {Plow}

     

       6
       6
       +
        */

     

       7
       7
       +
       export function createPlow() {

     

       2
       8
        
         return {

     

       3
       3
       -
           x: 0,

     

       4
       4
       -
           y: 0,

     

       5
       5
       -
           speed: 0.1,

     

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

     

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

     

       11
       11
       +
           speed: Config.plow.speed,

     

       12
       12
       +
           direction: Config.plow.direction,

     

       13
       13
       +
           height: 56,

     

       14
       14
       +
           width: 88,

     

       6
       15
        
         };

     

       7
       16
        
       }

     

       17
       17
       +
       

     

       18
       18
       +
       /**

     

       19
       19
       +
        * @param {Plow} plow

     

       20
       20
       +
        * @param {number} delta

     

       21
       21
       +
        */

     

       22
       22
       +
       export function movePlow(plow, delta) {

     

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

     

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

     

       25
       25
       +
         } else {

     

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

     

       27
       27
       +
         }

     

       28
       28
       +
       }

     

       29
       29
       +
       

     

       30
       30
       +
       /**

     

       31
       31
       +
        * @param {Plow} plow

     

       32
       32
       +
        * @param {CanvasRenderingContext2D} ctx

     

       33
       33
       +
        */

     

       34
       34
       +
       export function drawPlow(plow, ctx) {

     

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

     

       36
       36
       +
       }

     

       37
       37
       +
       

     

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

     

       39
       39
       +
       export function plowDone(plow) {

     

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

     

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

     

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

     

       43
       43
       +
       }

+38 -5

src/snow_accumulator.js

···

       20
       20
        
        * @param {SnowAccumulator} sa

     

       21
       21
        
        * @param {Object} item

     

       22
       22
        
        * @param {number} item.y

     

       23
       23
       +
        * @returns {boolean}

     

       23
       24
        
        */

     

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

     

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

     

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

     

       26
       27
        
           return true;

     

       27
       28
        
         }

     
···

       32
       33
        
       /**

     

       33
       34
        
        * @param {SnowAccumulator} sa

     

       34
       35
        
        * @param {Object} item

     

       36
       36
       +
        * @param {number} item.x

     

       37
       37
       +
        * @returns {boolean}

     

       38
       38
       +
        */

     

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

     

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

     

       41
       41
       +
           return true;

     

       42
       42
       +
         }

     

       43
       43
       +
       

     

       44
       44
       +
         return false;

     

       45
       45
       +
       }

     

       46
       46
       +
       

     

       47
       47
       +
       /**

     

       48
       48
       +
        * @param {SnowAccumulator} sa

     

       49
       49
       +
        * @param {Object} item

     

       35
       50
        
        * @param {number} item.size

     

       36
       51
        
        */

     

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

     
···

       43
       58
        
       }

     

       44
       59
        
       

     

       45
       60
        
       /**

     

       61
       61
       +
        * @param {SnowAccumulator} sa

     

       62
       62
       +
        */

     

       63
       63
       +
       export function resetSnowAccumulator(sa) {

     

       64
       64
       +
         sa.accumulator = 0;

     

       65
       65
       +
         sa.height = 0;

     

       66
       66
       +
       }

     

       67
       67
       +
       

     

       68
       68
       +
       /**

     

       46
       69
        
        * @param {CanvasRenderingContext2D} ctx

     

       47
       70
        
        * @param {SnowAccumulator[]} accumulators

     

       71
       71
       +
        * @param {Plow} plow

     

       48
       72
        
        */

     

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

     

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

     

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

     

       51
       75
        
         const avgHeight =

     

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

     

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

     

       77
       77
       +
         const normalized = points

     

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

     

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

     

       54
       80
        
       

     

       55
       81
        
         ctx.beginPath();

     

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

     

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

     

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

     

       83
       83
       +
           ctx.lineTo(x, y);

     

       84
       84
       +
         });

     

       85
       85
       +
         plow &&

     

       86
       86
       +
           normalized.length > 0 &&

     

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

     

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

     

       89
       89
       +
         !plow &&

     

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

     

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

     

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

     

       60
       93
        
         ctx.fillStyle = "#fff";

+12

src/sprites.js

···

       1
       1
       +
       function loadSpriteSheet() {

     

       2
       2
       +
         const image = new Image();

     

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

     

       4
       4
       +
         return image;

     

       5
       5
       +
       }

     

       6
       6
       +
       const sheet = loadSpriteSheet();

     

       7
       7
       +
       

     

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

     

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

     

       10
       10
       +
       }

     

       11
       11
       +
       

     

       12
       12
       +
       export default sheet;

+7 -2

src/types.d.ts

···

       19
       19
        
           };

     

       20
       20
        
           plow: {

     

       21
       21
        
             speed: number;

     

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

     

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

     

       23
       23
        
           };

     

       24
       24
        
         };

     

       25
       25
        
       

     
···

       39
       39
        
         };

     

       40
       40
        
       

     

       41
       41
        
         type Plow = {

     

       42
       42
       -
           left: boolean;

     

       42
       42
       +
           speed: number;

     

       43
       43
       +
           x: number;

     

       44
       44
       +
           y: number;

     

       45
       45
       +
           height: number;

     

       46
       46
       +
           width: number;

     

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

     

       43
       48
        
         };

     

       44
       49
        
       }