noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-26 04:07:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add animations

Browse Source
This commit is contained in:
Idrees Hassan
2024-12-19 21:03:31 -05:00
parent 5b7e51145f
commit 931c55567f
2 changed files with 176 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
birb.js
View File

@@ -11,8 +11,8 @@
// @ts-check // @ts-check
const sharedSettings = { const sharedSettings = {
cssScale: 0.5, cssScale: 1,
canvasPixelSize: 4, canvasPixelSize: 1,
hopSpeed: 0.07, hopSpeed: 0.07,
hopDistance: 45, hopDistance: 45,
}; };
@@ -42,7 +42,6 @@ const styles = `
image-rendering: pixelated; image-rendering: pixelated;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
filter: drop-shadow(0px 0px 1px #a1a1a1);
transform: scale(${CSS_SCALE}); transform: scale(${CSS_SCALE});
transform-origin: bottom; transform-origin: bottom;
z-index: 999999999; z-index: 999999999;
@@ -51,7 +50,7 @@ const styles = `
class Layer { class Layer {
/** /**
* @param {number[][]} pixels * @param {string[][]} pixels
*/ */
constructor(pixels) { constructor(pixels) {
this.pixels = pixels; this.pixels = pixels;
@@ -63,18 +62,38 @@ class Frame {
* @param {Layer[]} layers * @param {Layer[]} layers
*/ */
constructor(layers) { constructor(layers) {
// Combine layers
this.pixels = layers[0].pixels.map(row => row.slice()); this.pixels = layers[0].pixels.map(row => row.slice());
for (let i = 1; i < layers.length; i++) { for (let i = 1; i < layers.length; i++) {
let layerPixels = layers[i].pixels; let layerPixels = layers[i].pixels;
for (let y = 0; y < layerPixels.length; y++) { for (let y = 0; y < layerPixels.length; y++) {
for (let x = 0; x < layerPixels[y].length; x++) { for (let x = 0; x < layerPixels[y].length; x++) {
if (this.pixels[y] === undefined) { this.pixels[y][x] = layerPixels[y][x] !== ___ ? layerPixels[y][x] : this.pixels[y][x];
this.pixels[y] = [];
}
this.pixels[y][x] = layerPixels[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; const ___ = "transparent";
// Top of head const OUT = "outline";
const HED = 1; const BOR = "border";
// Beak const FOT = "foot";
const BEK = 2; const BEK = "beak";
// Belly const EYE = "eye";
const BLY = 3; const FAC = "face";
// Eye const BEL = "belly";
const EYE = 4; const UND = "underbelly";
// Wing feathers const WNG = "wing";
const W11 = 5; const WNE = "wing-edge";
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 colors = { const colors = {
[___]: "transparent", [___]: "transparent",
[HED]: "#ffffff", [OUT]: "#000000",
[BEK]: "#5f5f5f", [BOR]: "#ffffff",
[BLY]: "#cecece", [BEK]: "#000000",
[FOT]: "#af8e75",
[EYE]: "#000000", [EYE]: "#000000",
[W11]: "#a4a4a4", [FAC]: "#639bff",
[W12]: "#49413d", [BEL]: "#f8b143",
[W21]: "#a4a4a4", [UND]: "#ec8637",
[W22]: "#bfbfbf", [WNG]: "#578ae6",
[W23]: "#adadad", [WNE]: "#326ed9",
[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",
}; };
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 = { const sharedFrames = {
base: new Frame([new Layer([ base: new Frame([base]),
[___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], headDown: new Frame([down]),
[___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], wingsDown: new Frame([base, wingsDown]),
[___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___], wingsUp: new Frame([down, wingsUp]),
[___, ___, ___, ___, ___, ___, ___, ___, ___, ___, ___],
[___, ___, ___, 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, ___, ___, ___, ___, ___]
])]),
}; };
@@ -252,23 +309,16 @@ const Animations = {
1200, 1200,
250 250
]), ]),
FLAP: new Anim([
sharedFrames.base,
sharedFrames.wingsUp,
sharedFrames.base,
sharedFrames.wingsUp,
], [
2000,
100,
50,
100
], false),
FLYING: new Anim([ FLYING: new Anim([
sharedFrames.wingsUp,
sharedFrames.headDown, sharedFrames.headDown,
sharedFrames.wingsUp sharedFrames.wingsDown,
sharedFrames.base,
], [ ], [
100, 80,
100 40,
80,
40
]), ]),
}; };
@@ -310,7 +360,7 @@ let direction = Directions.RIGHT;
let ticks = 0; let ticks = 0;
// Bird's current position // Bird's current position
let birdY = 0; let birdY = 0;
let birdX = 20; let birdX = 40;
// Bird's starting position (when flying) // Bird's starting position (when flying)
let startX = 0; let startX = 0;
let startY = 0; let startY = 0;
@@ -353,11 +403,9 @@ document.addEventListener("click", (e) => {
setInterval(update, 1000 / 60); setInterval(update, 1000 / 60);
function requestDraw() {
requestAnimationFrame(requestDraw);
}
function draw() { function draw() {
requestAnimationFrame(draw);
// Update the bird's position // Update the bird's position
if (currentState === States.IDLE) { if (currentState === States.IDLE) {
if (focusedElement !== null) { if (focusedElement !== null) {
@@ -394,7 +442,7 @@ function draw() {
setY(birdY); setY(birdY);
} }
requestDraw(); draw();
/** /**
* @param {number} start * @param {number} start
@@ -579,7 +627,7 @@ function setX(x) {
* @param {number} y * @param {number} y
*/ */
function setY(y) { function setY(y) {
canvas.style.bottom = `${y}px`; canvas.style.bottom = `${y - WINDOW_PIXEL_SIZE}px`;
} }

2
index.html
View File

@@ -8,7 +8,7 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
/* background-color: #363636; */ background-color: #363636;
} }
#spacer { #spacer {