mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-24 19:59:36 +00:00
Initial commit
This commit is contained in:
Idrees Hassan
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
155
birb.js
Normal file
155
birb.js
Normal file
@@ -0,0 +1,155 @@
|
||||
// ==UserScript==
|
||||
// @name birb
|
||||
// @namespace https://idreesinc.com
|
||||
// @version 2024-12-12
|
||||
// @description birb
|
||||
// @author Idrees
|
||||
// @match *://*/*
|
||||
// @grant none
|
||||
// ==/UserScript==
|
||||
|
||||
// @ts-check
|
||||
|
||||
const idle = [
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 3, 4, 4, 4, 0, 0, 0, 0, 0, 0],
|
||||
[0, 2, 3, 1, 4, 4, 5, 5, 0, 0, 0, 0],
|
||||
[0, 0, 3, 3, 4, 5, 5, 5, 5, 5, 0, 0],
|
||||
[0, 0, 0, 3, 3, 2, 5, 5, 5, 0, 0, 0],
|
||||
[0, 0, 0, 3, 3, 3, 2, 2, 2, 0, 0, 0],
|
||||
[0, 0, 0, 0, 3, 3, 3, 3, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0]
|
||||
];
|
||||
|
||||
const bob = [
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 3, 4, 4, 4, 5, 5, 0, 0, 0, 0],
|
||||
[0, 2, 3, 1, 4, 5, 5, 5, 5, 5, 0, 0],
|
||||
[0, 0, 3, 3, 3, 2, 5, 5, 5, 0, 0, 0],
|
||||
[0, 0, 0, 3, 3, 3, 2, 2, 2, 0, 0, 0],
|
||||
[0, 0, 0, 0, 3, 3, 3, 3, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0]
|
||||
];
|
||||
|
||||
const colors = {
|
||||
0: "transparent",
|
||||
1: "#000000",
|
||||
2: "#5f5f5f",
|
||||
3: "#cecece",
|
||||
4: "#ffffff",
|
||||
5: "#d39d83",
|
||||
};
|
||||
|
||||
// Number of pixels per unit
|
||||
const PIXEL_SIZE = 4;
|
||||
|
||||
const styles = `
|
||||
canvas {
|
||||
image-rendering: pixelated;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));
|
||||
transform: scale(0.5);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleElement = document.createElement("style");
|
||||
styleElement.innerHTML = styles;
|
||||
document.head.appendChild(styleElement);
|
||||
|
||||
// Insert a canvas element into the body with the same dimensions as the 2D array
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = idle[0].length * PIXEL_SIZE;
|
||||
canvas.height = idle.length * PIXEL_SIZE;
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
/** @type {CanvasRenderingContext2D} */
|
||||
// @ts-ignore
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const Directions = {
|
||||
LEFT: -1,
|
||||
RIGHT: 1,
|
||||
};
|
||||
|
||||
const States = {
|
||||
IDLE: "idle",
|
||||
HOP: "hop",
|
||||
};
|
||||
|
||||
const HOP_HEIGHT = PIXEL_SIZE * 3;
|
||||
const MAX_HOP_TICKS = 24;
|
||||
|
||||
let direction = Directions.RIGHT;
|
||||
let state = States.IDLE;
|
||||
let ticks = 0;
|
||||
let hopTicks = 0;
|
||||
let sprite = idle;
|
||||
let modY = 0;
|
||||
let modX = 0;
|
||||
|
||||
function update() {
|
||||
ticks++;
|
||||
modY = 0;
|
||||
if (state === States.IDLE) {
|
||||
if (Math.random() < 0.0025) {
|
||||
state = States.HOP;
|
||||
sprite = idle;
|
||||
console.log("Hopping");
|
||||
} else if (ticks % 60 < 12) {
|
||||
sprite = bob;
|
||||
} else {
|
||||
sprite = idle;
|
||||
}
|
||||
} else if (state === States.HOP) {
|
||||
hopTicks++;
|
||||
if (hopTicks >= MAX_HOP_TICKS) {
|
||||
state = States.IDLE;
|
||||
hopTicks = 0;
|
||||
}
|
||||
modX += 1.4 * direction;
|
||||
modY = Math.sin(hopTicks / MAX_HOP_TICKS * Math.PI) * HOP_HEIGHT;
|
||||
// Round to the nearest scale
|
||||
modY = Math.round(modY / PIXEL_SIZE) * PIXEL_SIZE;
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(update, 1000 / 60);
|
||||
|
||||
function draw() {
|
||||
requestAnimationFrame(draw);
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// Draw the bird
|
||||
for (let y = 0; y < sprite.length; y++) {
|
||||
const row = sprite[y];
|
||||
for (let x = 0; x < sprite[y].length; x++) {
|
||||
const cell = direction === Directions.LEFT ? row[x] : row[sprite[y].length - x - 1];
|
||||
ctx.fillStyle = colors[cell];
|
||||
ctx.fillRect(x * PIXEL_SIZE, y * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
|
||||
};
|
||||
};
|
||||
// Modify canvas position by modY
|
||||
canvas.style.bottom = `${modY}px`;
|
||||
canvas.style.left = `${modX}px`;
|
||||
}
|
||||
|
||||
draw();
|
||||
|
||||
canvas.addEventListener("click", () => {
|
||||
if (state === States.IDLE) {
|
||||
state = States.HOP;
|
||||
sprite = idle;
|
||||
hopTicks = 0;
|
||||
}
|
||||
});
|
||||
19
index.html
Normal file
19
index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Birb Sandbox</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* background-color: #363636; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="birb.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user