Vega Platformer

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 400,
  "data": [
    {
      "name": "wandb",
      "values": [
        {"x": 5, "y": 30, "color": "red"},
        {"x": 6, "y": 30, "color": "red"},
        {"x": 7, "y": 30, "color": "red"},
        {"x": 8, "y": 30, "color": "red"},
        {"x": 9, "y": 30, "color": "red"},
        {"x": 10, "y": 30, "color": "red"},
        {"x": 15, "y": 50, "color": "red"},
        {"x": 16, "y": 50, "color": "red"},
        {"x": 17, "y": 50, "color": "red"},
        {"x": 18, "y": 50, "color": "red"},
        {"x": 19, "y": 50, "color": "red"},
        {"x": 20, "y": 50, "color": "red"},
        {"x": 25, "y": 40, "color": "red"},
        {"x": 26, "y": 40, "color": "red"},
        {"x": 27, "y": 40, "color": "red"},
        {"x": 28, "y": 40, "color": "red"},
        {"x": 29, "y": 40, "color": "red"},
        {"x": 30, "y": 40, "color": "red"},
        {"x": 31, "y": 40, "color": "red"},
        {"x": 32, "y": 40, "color": "red"},
        {"x": 33, "y": 40, "color": "red"},
        {"x": 34, "y": 40, "color": "red"},
        {"x": 35, "y": 40, "color": "red"},
        {"x": 36, "y": 40, "color": "red"},
        {"x": 37, "y": 40, "color": "red"},
        {"x": 38, "y": 40, "color": "red"},
        {"x": 39, "y": 40, "color": "red"},
        {"x": 40, "y": 40, "color": "red"},
        {"x": 51, "y": 40, "color": "red"},
        {"x": 62, "y": 40, "color": "red"},
        {"x": 73, "y": 40, "color": "red"},
        {"x": 84, "y": 40, "color": "red"},
        {"x": 95, "y": 40, "color": "red"},
        {"x": 106, "y": 40, "color": "red"},
        {"x": 117, "y": 40, "color": "red"},
        {"x": 128, "y": 40, "color": "red"},
        {"x": 139, "y": 40, "color": "red"},
        {"x": 150, "y": 40, "color": "red"},
        {"x": 36, "y": 39, "color": "red"},
        {"x": 36, "y": 38, "color": "red"},
        {"x": 36, "y": 37, "color": "red"},
        {"x": 36, "y": 36, "color": "red"},
        {"x": 36, "y": 35, "color": "red"},
        {"x": 36, "y": 34, "color": "red"},
        {"x": 36, "y": 33, "color": "red"},
        {"x": 127, "y": 127, "color": "red"},
        {"x": 227, "y": 127, "color": "red"}
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "datum.x + '-' + datum.y",
          "as": "key",
          "initonly": true
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "pixels",
      "type": "linear",
      "domain": [0, 128],
      "range": {"signal": "[0, 400]"}
    }
  ],
  "signals": [
    {"name": "test", "update": "[0, containerSize()[1], height]"},
    {
      "name": "frame",
      "init": "0",
      "on": [
        {"events": {"type": "timer", "throttle": 17}, "update": "frame + 1"}
      ]
    },
    {
      "name": "lastFrameOnGround",
      "value": -99,
      "update": "playerOnGround ? frame : lastFrameOnGround"
    },
    {
      "name": "lastFrameDashing",
      "value": -99,
      "update": "dashing ? frame : lastFrameDashing"
    },
    {
      "name": "playerCanJump",
      "update": "frame - lastFrameOnGround < 5 && yVelocity >= 0"
    },
    {
      "name": "playerCanDash",
      "value": true,
      "update": "dashing ? false : playerOnGround ? true : playerCanDash"
    },
    {
      "name": "collidingBottom",
      "update": "indata('wandb', 'key', rx + '-' + (ry+2)) || indata('wandb', 'key', (rx+1) + '-' + (ry+2)) || indata('wandb', 'key', (rx+2) + '-' + (ry+2)) || indata('wandb', 'key', (rx+3) + '-' + (ry+2)) || indata('wandb', 'key', rx + '-' + (ry+3)) || indata('wandb', 'key', (rx+1) + '-' + (ry+3)) || indata('wandb', 'key', (rx+2) + '-' + (ry+3)) || indata('wandb', 'key', (rx+3) + '-' + (ry+3))"
    },
    {
      "name": "playerOnGround",
      "update": "collidingBottom || indata('wandb', 'key', rx + '-' + (ry+4)) || indata('wandb', 'key', (rx+1) + '-' + (ry+4)) || indata('wandb', 'key', (rx+2) + '-' + (ry+4)) || indata('wandb', 'key', (rx+3) + '-' + (ry+4))"
    },
    {
      "name": "collidingLeft",
      "update": "indata('wandb', 'key', rx + '-' + (ry+0)) || indata('wandb', 'key', rx + '-' + (ry+1)) || indata('wandb', 'key', rx + '-' + (ry+2))"
    },
    {
      "name": "collidingRight",
      "update": "indata('wandb', 'key', (rx+3) + '-' + (ry+0)) || indata('wandb', 'key', (rx+3) + '-' + (ry+1)) || indata('wandb', 'key', (rx+3) + '-' + (ry+2))"
    },
    {
      "name": "wallOnLeft",
      "update": "collidingLeft || indata('wandb', 'key', ((rx-1) + '-' + (ry+0))) || indata('wandb', 'key', ((rx-1) + '-' + (ry+1))) || indata('wandb', 'key', ((rx-1) + '-' + (ry+2)))"
    },
    {
      "name": "wallOnRight",
      "update": "collidingRight || indata('wandb', 'key', ((rx+4) + '-' + (ry+0))) || indata('wandb', 'key', ((rx+4) + '-' + (ry+1))) || indata('wandb', 'key', ((rx+4) + '-' + (ry+2)))"
    },
    {
      "name": "xVelocity",
      "update": "max(min(keyRight ? dashing ? 2 : max(1, xVelocity-.04) : keyLeft ? (dashing ? -2 : min(-1, xVelocity + .04)) : 0, wallOnRight ? 0 : 999), wallOnLeft ? 0 : -999)"
    },
    {
      "name": "yVelocity",
      "value": 0,
      "on": [
        {
          "events": {"type": "timer", "throttle": 17},
          "update": "dashing ? (keyJump ? -1.5 : -.6) :jumping ? -2 : playerOnGround ? min(0, yVelocity) : min(2.5, yVelocity + .15)"
        }
      ]
    },
    {
      "name": "playerX",
      "value": 5,
      "on": [
        {
          "events": {"type": "timer", "throttle": 17},
          "update": "(collidingRight && !collidingLeft) ? round(playerX - 1) : (collidingLeft && !collidingRight) ? round(playerX + 1) : playerX + xVelocity"
        }
      ]
    },
    {
      "name": "playerY",
      "init": 15,
      "on": [
        {
          "events": {"type": "timer", "throttle": 17},
          "update": "(collidingBottom && !(collidingRight ^ collidingLeft)) ? round(playerY + yVelocity - 1) : playerY + yVelocity"
        }
      ]
    },
    {
      "name": "jumping",
      "on": [{"events": {"type": "timer", "throttle": 17}, "update": "playerCanJump && keyJump"}]
    },
    {
      "name": "dashing",
      "on": [{"events": {"type": "timer", "throttle": 17}, "update": "playerCanDash && keyDash"}]
    },
    {"name": "rx", "update": "round(playerX)"},
    {"name": "ry", "update": "round(playerY)"},
    {"name": "scrollX", "update": "max(playerX - 32, 0)"},
    {
      "name": "keys",
      "value": "",
      "on": [
        {
          "events": "window:keydown",
          "update": "indexof(keys, event.code) > -1 ? keys : keys + event.code + ','"
        },
        {
          "events": "window:keyup",
          "update": "replace(keys, event.code + ',', '')"
        }
      ]
    },
    {
      "name": "keyLeft",
      "value": false,
      "update": "indexof(keys, 'KeyA') > -1 || indexof(keys, 'ArrowLeft') > -1"
    },
    {
      "name": "keyRight",
      "value": false,
      "update": "indexof(keys, 'KeyD') > -1 || indexof(keys, 'ArrowRight') > -1"
    },
    {
      "name": "keyJump",
      "value": false,
      "update": "indexof(keys, 'KeyW') > -1 || indexof(keys, 'ArrowUp') > -1"
    },
    {
      "name": "keyDash",
      "value": false,
      "update": "indexof(keys, 'KeyZ') > -1 || indexof(keys, 'ShiftLeft') > -1 || indexof(keys, 'ShiftRight') > -1"
    }
  ],
  "marks": [
    {
      "type": "group",
      "name": "everything",
      "clip": true,
      "encode": {"update": {"x": {"scale": "pixels", "signal": "-scrollX"}}},
      "marks": [
        {
          "type": "group",
          "encode": {
            "update": {
              "x": {"scale": "pixels", "signal": "playerX"},
              "y": {"scale": "pixels", "signal": "playerY"}
            }
          },
          "marks": [
            {
              "type": "rect",
              "name": "trailingGhost",
              "encode": {
                "update": {
                  "x": {"scale": "pixels", "signal": "-xVelocity*2"},
                  "y": {"scale": "pixels", "signal": "-yVelocity*2"},
                  "fill": {"value": "cyan"},
                  "fillOpacity": {
                    "signal": "max(0, (lastFrameDashing + 20 - frame) / 20)"
                  },
                  "width": {"scale": "pixels", "signal": "4"},
                  "height": {"scale": "pixels", "signal": "4"}
                }
              }
            },
            {
              "type": "rect",
              "name": "player",
              "encode": {
                "update": {
                  "fill": {"signal": "playerCanDash ? 'blue' : 'cyan'"},
                  "width": {"scale": "pixels", "signal": "4"},
                  "height": {"scale": "pixels", "signal": "4"}
                }
              }
            }
          ]
        },
        {
          "type": "rect",
          "name": "terrainBlocks",
          "from": {"data": "wandb"},
          "encode": {
            "update": {
              "fill": {"field": "color"},
              "x": {"scale": "pixels", "field": "x"},
              "y": {"scale": "pixels", "field": "y"},
              "width": {"scale": "pixels", "signal": "1"},
              "height": {"scale": "pixels", "signal": "1"}
            }
          }
        }
      ]
    }
  ]
}