commit 5a52e5e3aa06560833ccc6230d55279df4135ea9 · treybastian.com/winterVibesJS

assets/snowplow.aseprite

This is a binary file and will not be displayed.

+65

assets/snowplow.json

···

       1
       1
       +
       { "frames": [

     

       2
       2
       +
          {

     

       3
       3
       +
           "filename": "snowplow 0.aseprite",

     

       4
       4
       +
           "frame": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       5
       5
       +
           "rotated": false,

     

       6
       6
       +
           "trimmed": false,

     

       7
       7
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       8
       8
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       9
       9
       +
           "duration": 100

     

       10
       10
       +
          },

     

       11
       11
       +
          {

     

       12
       12
       +
           "filename": "snowplow 1.aseprite",

     

       13
       13
       +
           "frame": { "x": 45, "y": 0, "w": 44, "h": 28 },

     

       14
       14
       +
           "rotated": false,

     

       15
       15
       +
           "trimmed": false,

     

       16
       16
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       17
       17
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       18
       18
       +
           "duration": 100

     

       19
       19
       +
          },

     

       20
       20
       +
          {

     

       21
       21
       +
           "filename": "snowplow 2.aseprite",

     

       22
       22
       +
           "frame": { "x": 90, "y": 0, "w": 44, "h": 28 },

     

       23
       23
       +
           "rotated": false,

     

       24
       24
       +
           "trimmed": false,

     

       25
       25
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       26
       26
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       27
       27
       +
           "duration": 100

     

       28
       28
       +
          },

     

       29
       29
       +
          {

     

       30
       30
       +
           "filename": "snowplow 3.aseprite",

     

       31
       31
       +
           "frame": { "x": 0, "y": 29, "w": 44, "h": 28 },

     

       32
       32
       +
           "rotated": false,

     

       33
       33
       +
           "trimmed": false,

     

       34
       34
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       35
       35
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       36
       36
       +
           "duration": 100

     

       37
       37
       +
          },

     

       38
       38
       +
          {

     

       39
       39
       +
           "filename": "snowplow 4.aseprite",

     

       40
       40
       +
           "frame": { "x": 45, "y": 29, "w": 44, "h": 28 },

     

       41
       41
       +
           "rotated": false,

     

       42
       42
       +
           "trimmed": false,

     

       43
       43
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       44
       44
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       45
       45
       +
           "duration": 100

     

       46
       46
       +
          },

     

       47
       47
       +
          {

     

       48
       48
       +
           "filename": "snowplow 5.aseprite",

     

       49
       49
       +
           "frame": { "x": 90, "y": 29, "w": 44, "h": 28 },

     

       50
       50
       +
           "rotated": false,

     

       51
       51
       +
           "trimmed": false,

     

       52
       52
       +
           "spriteSourceSize": { "x": 0, "y": 0, "w": 44, "h": 28 },

     

       53
       53
       +
           "sourceSize": { "w": 44, "h": 28 },

     

       54
       54
       +
           "duration": 100

     

       55
       55
       +
          }

     

       56
       56
       +
        ],

     

       57
       57
       +
        "meta": {

     

       58
       58
       +
         "app": "https://www.aseprite.org/",

     

       59
       59
       +
         "version": "1.3.10.1-x64",

     

       60
       60
       +
         "image": "snowplow.png",

     

       61
       61
       +
         "format": "RGBA8888",

     

       62
       62
       +
         "size": { "w": 134, "h": 57 },

     

       63
       63
       +
         "scale": "1"

     

       64
       64
       +
        }

     

       65
       65
       +
       }

assets/snowplow.png

This is a binary file and will not be displayed.

assets/sprite_sheet.png

This is a binary file and will not be displayed.

+8 -6

src/config.js

···

       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

     

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

     

       5
       5
       +
         { name: "ch", value: 180 }, // 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

     

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

     

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

     

       13
       13
       +
         { name: "plws", value: 1 }, // plow scale

     

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

     

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

     

       15
       16
        
       ];

     
···

       38
       39
        
             minSpeed: parseFloat(urlParams.get("snmnspd")),

     

       39
       40
        
           },

     

       40
       41
        
           plow: {

     

       41
       41
       -
             speed: parseFloat(urlParams.get("pspd")),

     

       42
       42
       +
             speed: parseFloat(urlParams.get("plwspd")),

     

       42
       43
        
             // @ts-ignore -- I dunno how to get ts / jsdoc to be ok with this

     

       43
       43
       -
             direction: urlParams.get("pd"),

     

       44
       44
       +
             direction: urlParams.get("plwd"),

     

       45
       45
       +
             scale: parseFloat(urlParams.get("plws")),

     

       44
       46
        
           },

     

       45
       47
        
           groundAccumulator: {

     

       46
       48
        
             max: parseInt(urlParams.get("gamax")),

+1 -1

src/main.js

···

       98
       98
        
         if (isPlowing) {

     

       99
       99
        
           plow ??= createPlow();

     

       100
       100
        
           movePlow(plow, delta);

     

       101
       101
       -
           drawPlow(plow, ctx);

     

       101
       101
       +
           drawPlow(plow, ctx, time);

     

       102
       102
        
           if (plowDone(plow)) {

     

       103
       103
        
             isPlowing = false;

     

       104
       104
        
             plow = null;

+12 -8

src/plow.js

···

       1
       1
       +
       import config from "../vite.config.js";

     

       1
       2
        
       import Config from "./config.js";

     

       2
       2
       -
       import { drawSprite } from "./sprites.js";

     

       3
       3
       +
       import { drawSprite, loadSprite } from "./sprite.js";

     

       3
       4
        
       

     

       5
       5
       +
       const SPRITE = await loadSprite("snowplow");

     

       4
       6
        
       /**

     

       5
       7
        
        * @returns {Plow}

     

       6
       8
        
        */

     

       7
       9
        
       export function createPlow() {

     

       8
       10
        
         return {

     

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

     

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

     

       11
       11
       +
           x:

     

       12
       12
       +
             Config.plow.direction === "left"

     

       13
       13
       +
               ? Config.canvas.width

     

       14
       14
       +
               : SPRITE.width * Config.plow.scale,

     

       15
       15
       +
           y: Config.canvas.height - SPRITE.height * Config.plow.scale,

     

       11
       16
        
           speed: Config.plow.speed,

     

       12
       17
        
           direction: Config.plow.direction,

     

       13
       13
       -
           height: 56,

     

       14
       14
       -
           width: 88,

     

       15
       18
        
         };

     

       16
       19
        
       }

     

       17
       20
        
       

     
···

       30
       33
        
       /**

     

       31
       34
        
        * @param {Plow} plow

     

       32
       35
        
        * @param {CanvasRenderingContext2D} ctx

     

       36
       36
       +
        * @param {DOMHighResTimeStamp} timestamp

     

       33
       37
        
        */

     

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

     

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

     

       38
       38
       +
       export function drawPlow(plow, ctx, timestamp) {

     

       39
       39
       +
         drawSprite(ctx, SPRITE, plow.x, plow.y, Config.plow.scale, timestamp);

     

       36
       40
        
       }

     

       37
       41
        
       

     

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

     

       39
       43
        
       export function plowDone(plow) {

     

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

     

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

     

       45
       45
       +
           ? plow.x + SPRITE.width * Config.plow.scale < 0

     

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

     

       43
       47
        
       }

+1 -1

src/snow_accumulator.js

···

       84
       84
        
         });

     

       85
       85
        
         plow &&

     

       86
       86
        
           normalized.length > 0 &&

     

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

     

       87
       87
       +
           ctx.lineTo(plow.x + 2, 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]);

+53

src/sprite.js

···

       1
       1
       +
       /**

     

       2
       2
       +
        * @param {string} slug

     

       3
       3
       +
        * @returns {Promise<Sprite>}

     

       4
       4
       +
        */

     

       5
       5
       +
       export async function loadSprite(slug) {

     

       6
       6
       +
         const image = new Image();

     

       7
       7
       +
         image.src = `./assets/${slug}.png`;

     

       8
       8
       +
       

     

       9
       9
       +
         const { frames } = await fetch(`./assets/${slug}.json`).then((res) =>

     

       10
       10
       +
           res.json(),

     

       11
       11
       +
         );

     

       12
       12
       +
         return {

     

       13
       13
       +
           image,

     

       14
       14
       +
           width: frames[0].frame.w,

     

       15
       15
       +
           height: frames[0].frame.h,

     

       16
       16
       +
           currentFrame: -1,

     

       17
       17
       +
           lastUpdate: 0,

     

       18
       18
       +
           frames: frames.map(({ frame: { x, y }, duration }) => ({

     

       19
       19
       +
             x,

     

       20
       20
       +
             y,

     

       21
       21
       +
             duration,

     

       22
       22
       +
           })),

     

       23
       23
       +
         };

     

       24
       24
       +
       }

     

       25
       25
       +
       

     

       26
       26
       +
       /**

     

       27
       27
       +
        * @param {CanvasRenderingContext2D} ctx

     

       28
       28
       +
        * @param {Sprite} sprite

     

       29
       29
       +
        * @param {number} x

     

       30
       30
       +
        * @param {number} y

     

       31
       31
       +
        * @param {DOMHighResTimeStamp} timestamp

     

       32
       32
       +
        */

     

       33
       33
       +
       export function drawSprite(ctx, sprite, x, y, scale, timestamp) {

     

       34
       34
       +
         if (

     

       35
       35
       +
           sprite.currentFrame === -1 ||

     

       36
       36
       +
           timestamp - sprite.lastUpdate > sprite.frames[sprite.currentFrame].duration

     

       37
       37
       +
         ) {

     

       38
       38
       +
           sprite.currentFrame = (sprite.currentFrame + 1) % sprite.frames.length;

     

       39
       39
       +
           sprite.lastUpdate = timestamp;

     

       40
       40
       +
         }

     

       41
       41
       +
         const frame = sprite.frames[sprite.currentFrame];

     

       42
       42
       +
         ctx.drawImage(

     

       43
       43
       +
           sprite.image,

     

       44
       44
       +
           frame.x,

     

       45
       45
       +
           frame.y,

     

       46
       46
       +
           sprite.width,

     

       47
       47
       +
           sprite.height,

     

       48
       48
       +
           x,

     

       49
       49
       +
           y,

     

       50
       50
       +
           sprite.width * scale,

     

       51
       51
       +
           sprite.height * scale,

     

       52
       52
       +
         );

     

       53
       53
       +
       }

-12

src/sprites.js

···

       1
       1
       -
       function loadSpriteSheet() {

     

       2
       2
       -
         const image = new Image();

     

       3
       3
       -
         image.src = "./assets/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;

+19 -4

src/types.d.ts

···

       1
       1
        
       export {};

     

       2
       2
        
       declare global {

     

       3
       3
       +
         type PlowDirection = "left" | "right" | "random";

     

       3
       4
        
         type Config = {

     

       4
       5
        
           version: number;

     

       5
       6
        
           canvas: {

     
···

       19
       20
        
           };

     

       20
       21
        
           plow: {

     

       21
       22
        
             speed: number;

     

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

     

       23
       23
       +
             direction: PlowDirection;

     

       24
       24
       +
             scale: number;

     

       23
       25
        
           };

     

       24
       26
        
         };

     

       25
       27
        
       

     

       28
       28
       +
         type SpriteFrame = {

     

       29
       29
       +
           x: number;

     

       30
       30
       +
           y: number;

     

       31
       31
       +
           duration: number;

     

       32
       32
       +
         };

     

       33
       33
       +
       

     

       34
       34
       +
         type Sprite = {

     

       35
       35
       +
           image: HTMLImageElement;

     

       36
       36
       +
           width: number;

     

       37
       37
       +
           height: number;

     

       38
       38
       +
           lastUpdate: number;

     

       39
       39
       +
           currentFrame: number;

     

       40
       40
       +
           frames: SpriteFrame[];

     

       41
       41
       +
         };

     

       42
       42
       +
       

     

       26
       43
        
         type Snowflake = {

     

       27
       44
        
           x: number;

     

       28
       45
        
           y: number;

     
···

       42
       59
        
           speed: number;

     

       43
       60
        
           x: number;

     

       44
       61
        
           y: number;

     

       45
       45
       -
           height: number;

     

       46
       46
       -
           width: number;

     

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

     

       62
       62
       +
           direction: PlowDirection;

     

       48
       63
        
         };

     

       49
       64
        
       }