mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-25 19:59:38 +00:00
Add animations
This commit is contained in:
Idrees Hassan
302
birb.js
302
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`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user