From 931c55567f4126a425e5c3f99de7df5b5d3937aa Mon Sep 17 00:00:00 2001 From: Idrees Hassan Date: Thu, 19 Dec 2024 21:03:31 -0500 Subject: [PATCH] Add animations --- birb.js | 302 +++++++++++++++++++++++++++++++---------------------- index.html | 2 +- 2 files changed, 176 insertions(+), 128 deletions(-) diff --git a/birb.js b/birb.js index 4d91058..5916056 100644 --- a/birb.js +++ b/birb.js @@ -11,8 +11,8 @@ // @ts-check const sharedSettings = { - cssScale: 0.5, - canvasPixelSize: 4, + cssScale: 1, + canvasPixelSize: 1, hopSpeed: 0.07, hopDistance: 45, }; @@ -42,7 +42,6 @@ const styles = ` image-rendering: pixelated; position: fixed; bottom: 0; - filter: drop-shadow(0px 0px 1px #a1a1a1); transform: scale(${CSS_SCALE}); transform-origin: bottom; z-index: 999999999; @@ -51,7 +50,7 @@ const styles = ` class Layer { /** - * @param {number[][]} pixels + * @param {string[][]} pixels */ constructor(pixels) { this.pixels = pixels; @@ -63,18 +62,38 @@ class Frame { * @param {Layer[]} layers */ constructor(layers) { + // Combine layers this.pixels = layers[0].pixels.map(row => row.slice()); for (let i = 1; i < layers.length; i++) { let layerPixels = layers[i].pixels; for (let y = 0; y < layerPixels.length; y++) { for (let x = 0; x < layerPixels[y].length; x++) { - if (this.pixels[y] === undefined) { - this.pixels[y] = []; - } - this.pixels[y][x] = layerPixels[y][x]; + this.pixels[y][x] = layerPixels[y][x] !== ___ ? layerPixels[y][x] : this.pixels[y][x]; } } } + // Surround non-transparent pixels with border + for (let y = 0; y < this.pixels.length; y++) { + for (let x = 0; x < this.pixels[y].length; x++) { + if (this.pixels[y][x] === ___ && this.hasAdjacent(x, y)) { + this.pixels[y][x] = BOR; + } + } + } + } + + hasAdjacent(x, y) { + for (let i = -1; i <= 1; i++) { + for (let j = -1; j <= 1; j++) { + if (i === 0 && j === 0) { + continue; + } + if (this.pixels[y + i] && this.pixels[y + i][x + j] && this.pixels[y + i][x + j] !== ___ && this.pixels[y + i][x + j] !== BOR) { + return true; + } + } + } + return false } /** @@ -135,111 +154,149 @@ class Anim { } } -const ___ = 0; -// Top of head -const HED = 1; -// Beak -const BEK = 2; -// Belly -const BLY = 3; -// Eye -const EYE = 4; -// Wing feathers -const W11 = 5; -const W12 = 6; -const W21 = 7; -const W22 = 8; -const W23 = 9; -const W24 = 10; -const W31 = 11; -const W32 = 12; -const W33 = 13; -const W34 = 14; -const W41 = 15; -const W42 = 16; -const W43 = 17; -const W51 = 18; -// Front of head -const FRN = 19; -// Back of underside -const BUM = 20; -// Underside wing feather (revealed when flying) -const UND = 21; -// Leg -const LEG = 22; -// Toe -const TOE = 23; +const ___ = "transparent"; +const OUT = "outline"; +const BOR = "border"; +const FOT = "foot"; +const BEK = "beak"; +const EYE = "eye"; +const FAC = "face"; +const BEL = "belly"; +const UND = "underbelly"; +const WNG = "wing"; +const WNE = "wing-edge"; const colors = { [___]: "transparent", - [HED]: "#ffffff", - [BEK]: "#5f5f5f", - [BLY]: "#cecece", + [OUT]: "#000000", + [BOR]: "#ffffff", + [BEK]: "#000000", + [FOT]: "#af8e75", [EYE]: "#000000", - [W11]: "#a4a4a4", - [W12]: "#49413d", - [W21]: "#a4a4a4", - [W22]: "#bfbfbf", - [W23]: "#adadad", - [W24]: "#5b4c45", - [W31]: "#929292", - [W32]: "#adadad", - [W33]: "#929292", - [W34]: "#64524a", - [W41]: "#9b908b", - [W42]: "#807069", - [W43]: "#adadad", - [W51]: "#807069", - [FRN]: "#e4e4e4", - [BUM]: "#b7bcbf", - [UND]: "#cecece", - [LEG]: "#000000", - [TOE]: "#5f5f5f", + [FAC]: "#639bff", + [BEL]: "#f8b143", + [UND]: "#ec8637", + [WNG]: "#578ae6", + [WNE]: "#326ed9", }; +const transparent = new Layer([ + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___] +]); + +const base = new Layer([ + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, OUT, OUT, OUT, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, OUT, FAC, FAC, FAC, FAC, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, OUT, FAC, FAC, FAC, FAC, FAC, FAC, OUT, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, BEK, BEK, BEK, BEK, FAC, EYE, FAC, FAC, WNG, WNG, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, OUT, FAC, FAC, FAC, FAC, FAC, FAC, WNG, WNG, WNG, OUT, OUT, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, OUT, FAC, FAC, FAC, FAC, FAC, WNG, WNG, WNG, WNG, WNG, WNG, OUT, OUT, OUT, OUT, OUT, OUT, ___, ___], + [___, ___, OUT, BEL, FAC, FAC, BEL, BEL, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNE, WNE, OUT, ___], + [___, ___, OUT, BEL, BEL, BEL, BEL, BEL, OUT, WNE, WNG, WNG, WNG, WNG, WNG, WNG, WNE, WNE, OUT, OUT, ___, ___], + [___, ___, OUT, BEL, BEL, BEL, BEL, BEL, BEL, OUT, WNE, WNE, WNE, WNE, WNE, WNE, OUT, OUT, ___, ___, ___, ___], + [___, ___, ___, OUT, BEL, BEL, BEL, BEL, UND, UND, OUT, OUT, OUT, OUT, OUT, OUT, ___, ___, ___, ___, ___, ___], + [___, ___, ___, OUT, BEL, BEL, BEL, UND, UND, UND, UND, UND, UND, UND, OUT, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, OUT, UND, UND, UND, UND, UND, UND, UND, UND, OUT, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, OUT, UND, UND, UND, UND, UND, UND, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, OUT, FOT, OUT, OUT, OUT, FOT, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, OUT, FOT, OUT, ___, OUT, FOT, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, OUT, FOT, OUT, FOT, OUT, FOT, OUT, FOT, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, OUT, ___, OUT, ___, OUT, ___, OUT, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], +]); + +const down = new Layer(base.pixels.map((row, rowIndex) => { + if (rowIndex === 16) { + const newRow = row.slice(); + newRow[4] = OUT; + newRow[12] = UND; + newRow[13] = OUT; + return newRow; + } + return row.slice(); +}).filter((_, i) => i !== 15)); +down.pixels.unshift(down.pixels[0].slice()); + +const wingsUp = new Layer([ + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, OUT, OUT, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, OUT, WNG, WNG, WNG, OUT, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, WNG, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, WNG, WNG, WNG, WNG, WNG, WNG, WNG, OUT, OUT, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, OUT, OUT, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, WNG, WNG, WNG, WNG, WNG, WNG, WNG, WNG, OUT, WNG, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, BEL, WNG, WNG, WNG, WNG, WNG, WNG, OUT, WNG, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, UND, WNG, WNG, OUT, OUT, OUT, WNG, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, UND, UND, UND, WNG, WNG, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___] +]); + +const wingsDown = new Layer([ + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, WNG, WNG, WNG, WNG, WNG, WNG, OUT, OUT, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, OUT, WNG, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, OUT, WNE, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, OUT, WNE, WNG, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, WNE, WNG, WNG, WNG, WNG, WNG, OUT, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, WNE, WNE, WNG, WNG, WNG, WNG, OUT, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, WNE, WNE, WNG, WNG, OUT, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, WNE, WNE, OUT, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, OUT, OUT, OUT, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], + [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___] +]); + const sharedFrames = { - base: new Frame([new Layer([ - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, HED, HED, ___, ___, ___, ___, ___, ___], - [___, ___, FRN, HED, HED, HED, ___, ___, ___, ___, ___], - [___, BEK, FRN, EYE, HED, HED, W21, W31, ___, ___, ___], - [___, ___, BLY, BLY, HED, W11, W22, W32, W41, W51, ___], - [___, ___, ___, BLY, BLY, W12, W23, W33, W42, ___, ___], - [___, ___, ___, BLY, BLY, BLY, W24, W34, W43, ___, ___], - [___, ___, ___, ___, BLY, BLY, BUM, BUM, ___, ___, ___], - [___, ___, ___, ___, TOE, LEG, ___, ___, ___, ___, ___] - ])]), - headDown: new Frame([new Layer([ - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, HED, HED, ___, ___, ___, ___, ___, ___], - [___, ___, FRN, HED, HED, HED, W21, W31, ___, ___, ___], - [___, BEK, FRN, EYE, HED, W11, W22, W32, W41, W51, ___], - [___, ___, BLY, BLY, BLY, W12, W23, W33, W42, ___, ___], - [___, ___, ___, BLY, BLY, BLY, W24, W34, W43, ___, ___], - [___, ___, ___, ___, BLY, BLY, BUM, BUM, ___, ___, ___], - [___, ___, ___, ___, TOE, LEG, ___, ___, ___, ___, ___] - ])]), - wingsUp: new Frame([new Layer([ - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], - [___, ___, ___, HED, HED, ___, ___, W31, W32, W51, ___], - [___, ___, FRN, HED, HED, HED, W31, W32, W33, W43, ___], - [___, BEK, FRN, EYE, HED, W21, W22, W33, W42, ___, ___], - [___, ___, BLY, BLY, BLY, W11, W23, W34, W34, ___, ___], - [___, ___, ___, BLY, BLY, BLY, W12, W24, UND, ___, ___], - [___, ___, ___, ___, BLY, BLY, BUM, BUM, ___, ___, ___], - [___, ___, ___, ___, TOE, LEG, ___, ___, ___, ___, ___] - ])]), + base: new Frame([base]), + headDown: new Frame([down]), + wingsDown: new Frame([base, wingsDown]), + wingsUp: new Frame([down, wingsUp]), }; @@ -252,23 +309,16 @@ const Animations = { 1200, 250 ]), - FLAP: new Anim([ - sharedFrames.base, - sharedFrames.wingsUp, - sharedFrames.base, - sharedFrames.wingsUp, - ], [ - 2000, - 100, - 50, - 100 - ], false), FLYING: new Anim([ + sharedFrames.wingsUp, sharedFrames.headDown, - sharedFrames.wingsUp + sharedFrames.wingsDown, + sharedFrames.base, ], [ - 100, - 100 + 80, + 40, + 80, + 40 ]), }; @@ -310,7 +360,7 @@ let direction = Directions.RIGHT; let ticks = 0; // Bird's current position let birdY = 0; -let birdX = 20; +let birdX = 40; // Bird's starting position (when flying) let startX = 0; let startY = 0; @@ -353,11 +403,9 @@ document.addEventListener("click", (e) => { setInterval(update, 1000 / 60); -function requestDraw() { - requestAnimationFrame(requestDraw); -} - function draw() { + requestAnimationFrame(draw); + // Update the bird's position if (currentState === States.IDLE) { if (focusedElement !== null) { @@ -394,7 +442,7 @@ function draw() { setY(birdY); } -requestDraw(); +draw(); /** * @param {number} start @@ -579,7 +627,7 @@ function setX(x) { * @param {number} y */ function setY(y) { - canvas.style.bottom = `${y}px`; + canvas.style.bottom = `${y - WINDOW_PIXEL_SIZE}px`; } diff --git a/index.html b/index.html index 9a176b6..e17cf51 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ html, body { margin: 0; padding: 0; - /* background-color: #363636; */ + background-color: #363636; } #spacer {