projects/funkyFlaskTest
1
0
Fork 0
generated from projects/testosmaximus
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update version to 1.3.8 in package.json and package-lock.json; refactor RickGamePanel for improved gameplay mechanics and asset handling

Browse Source
This commit is contained in:
Chipperfluff 2025-08-02 22:01:19 +02:00
parent a3cfc4dbb3
commit 816f252ccd
3 changed files with 205 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@funky-flask-test/funky-flask-test", "name": "@funky-flask-test/funky-flask-test",
"version": "1.3.7", "version": "1.3.8",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@funky-flask-test/funky-flask-test", "name": "@funky-flask-test/funky-flask-test",
"version": "1.3.7", "version": "1.3.8",
"devDependencies": { "devDependencies": {
"@types/node": "^24.0.15", "@types/node": "^24.0.15",
"typescript": "^5.8.3", "typescript": "^5.8.3",

2
source/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@funky-flask-test/funky-flask-test", "name": "@funky-flask-test/funky-flask-test",
"version": "1.3.7", "version": "1.3.8",
"type": "module", "type": "module",
"main": "./dist/index.jsx", "main": "./dist/index.jsx",
"exports": { "exports": {

372
source/src/index.tsx
View File

@ -1,238 +1,270 @@
const ASSETS = {
squirrel: 'https://i.imgur.com/PN3NfdR.png',
dogWalk: 'https://i.imgur.com/vdgnU7H.png',
dogFly: 'https://i.imgur.com/fByuVDo.png',
nut: 'https://i.imgur.com/Nzt9t6E.png'
}
export class RickGamePanel { export class RickGamePanel {
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement
private ctx!: CanvasRenderingContext2D; private ctx!: CanvasRenderingContext2D
private isStarted = false; private isStarted = false
private isGameOver = false; private isGameOver = false
private score = 0; private score = 0
private player = { x: 20, y: 180, vy: 0, width: 32, height: 32, onGround: false }; private enemies: any[] = []
private enemies: any[] = []; private powerups: any[] = []
private powerups: any[] = []; private spawnTimer = 0
private spawnTimer = 0; private frameTick = 0
private assetImgs: any = {};
constructor(private container: HTMLElement) { private player = {
this.loadAssets(ASSETS).then(imgs => { x: 20,
this.assetImgs = imgs; y: 180,
this.createUI(); vy: 0,
this.ctx = this.canvas.getContext('2d')!; width: 10,
this.attachListeners(); height: 10,
this.drawStartup(); onGround: false,
}); frame: 0
} }
private async loadAssets(assets: Record<string, string>) { constructor(private container: HTMLElement) {
const entries = Object.entries(assets); this.createUI()
const result: any = {}; this.ctx = this.canvas.getContext('2d')!
await Promise.all(entries.map(([key, url]) => this.attachListeners()
new Promise<void>(res => { this.drawStartup()
const img = new Image();
img.src = url as string;
img.onload = () => {
result[key] = img;
res();
};
})
));
return result;
} }
private createUI() { private createUI() {
const panel = document.createElement('div'); const panel = document.createElement('div')
panel.style.cssText = `position: relative; width: 100%; max-width: 400px;`; panel.style.cssText = `width: 100%; max-width: 400px;`
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas')
this.canvas.width = 300; this.canvas.width = 300
this.canvas.height = 200; this.canvas.height = 200
this.canvas.style.cssText = `width: 100%; border: 2px solid #333; background: #000; cursor: pointer;`; this.canvas.style.cssText = `width: 100%; border: 2px solid #333; background: #000; cursor: pointer;`
panel.appendChild(this.canvas); panel.appendChild(this.canvas)
this.container.appendChild(panel); this.container.appendChild(panel)
} }
private attachListeners() { private attachListeners() {
window.addEventListener('keydown', e => { window.addEventListener('keydown', e => {
if ((e.code === 'Space' || e.code === 'Enter') && this.player.onGround && this.isStarted && !this.isGameOver) { if ((e.code === 'Space' || e.code === 'Enter') && this.player.onGround && this.isStarted && !this.isGameOver) {
this.player.vy = -12; this.player.vy = -12
this.player.onGround = false; this.player.onGround = false
} }
}); })
this.canvas.addEventListener('click', () => { this.canvas.addEventListener('click', () => {
if (!this.isStarted) { if (!this.isStarted) {
this.isStarted = true; this.isStarted = true
this.frame(); this.resetGame()
this.frame()
} else if (this.isGameOver) { } else if (this.isGameOver) {
this.reset(); this.resetGame()
} else if (this.player.onGround) { } else if (this.player.onGround) {
this.player.vy = -12; this.player.vy = -12
this.player.onGround = false; this.player.onGround = false
} }
}); })
} }
private frame = () => { private frame = () => {
if (!this.isStarted) return; this.frameTick++
if (this.isGameOver) { if (this.isGameOver) {
this.draw(); this.draw()
return; return
} }
this.player.vy += 0.7;
this.player.y += this.player.vy; // Update player
if (this.player.y >= 180) { this.player.y = 180; this.player.vy = 0; this.player.onGround = true; } this.player.vy += 0.7
this.spawnTimer--; this.player.y += this.player.vy
if (this.spawnTimer <= 0) { if (this.player.y >= 180) {
this.spawnEnemy(); this.player.y = 180
if (Math.random() < 0.3) this.spawnPowerup(); this.player.vy = 0
this.spawnTimer = 80; this.player.onGround = true
} }
this.enemies.forEach(e => e.x -= 1.5);
this.powerups.forEach(p => p.x -= 1.5); if (this.frameTick % 10 === 0) {
this.enemies = this.enemies.filter(e => e.x + e.size > 0); this.player.frame = (this.player.frame + 1) % 2
this.powerups = this.powerups.filter(p => p.x + p.size > 0); }
// Update enemies
this.enemies.forEach(e => { this.enemies.forEach(e => {
if (this.collide(this.player, e)) this.gameOver(); e.x -= e.speed
}); e.tick++
this.powerups.forEach((p, idx) => { if (e.type === 'fly') {
if (this.collide(this.player, p)) { e.y += Math.sin(e.wobblePhase + e.tick * 0.1) * 0.5
this.score += 5;
this.powerups.splice(idx, 1);
} }
}); if (e.tick % 10 === 0) {
this.draw(); e.frame = (e.frame + 1) % 2
requestAnimationFrame(this.frame); }
})
// Update powerups
this.powerups.forEach(p => p.x -= 1.5)
// Remove offscreen
this.enemies = this.enemies.filter(e => e.x + e.size > 0)
this.powerups = this.powerups.filter(p => p.x + p.size > 0)
// Collisions
for (const e of this.enemies) {
if (this.collide(this.player, e)) {
this.isGameOver = true
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
return
}
}
for (const [i, p] of this.powerups.entries()) {
if (this.collide(this.player, p)) {
this.score += 5
this.powerups.splice(i, 1)
}
}
// Spawn
if (--this.spawnTimer <= 0) {
this.spawnEnemy()
if (Math.random() < 0.3) this.spawnPowerup()
this.spawnTimer = 80
}
// Score
for (const e of this.enemies) {
if (!e.passed && e.x + e.size < this.player.x) {
e.passed = true
this.score++
}
}
this.draw()
requestAnimationFrame(this.frame)
} }
private spawnEnemy() { private spawnEnemy() {
const variant = Math.random() < 0.5 ? 'walk' : 'fly'; const type = Math.random() < 0.3 ? 'fly' : 'walk'
const y = variant === 'fly' ? 120 : 180 - 32; const size = 10
this.enemies.push({ x: 300, y, size: 32, variant }); const y = type === 'fly' ? 120 + Math.random() * 20 : 180 - size
this.enemies.push({
x: 300,
y,
size,
type,
speed: 1.5,
frame: 0,
tick: 0,
wobblePhase: Math.random() * Math.PI * 2,
passed: false
})
} }
private spawnPowerup() { private spawnPowerup() {
this.powerups.push({ x: 300, y: 160, size: 24 }); this.powerups.push({ x: 300, y: 150 + Math.random() * 20, size: 8 })
} }
private collide(a: any, b: any) { private collide(a: any, b: any) {
return a.x < b.x + b.size && a.x + a.width > b.x && return a.x < b.x + b.size &&
a.y < b.y + b.size && a.y + a.height > b.y; a.x + a.width > b.x &&
a.y < b.y + b.size &&
a.y + a.height > b.y
} }
private gameOver() { private resetGame() {
this.isGameOver = true; this.enemies = []
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank'); this.powerups = []
} this.score = 0
this.spawnTimer = 0
private reset() { this.isGameOver = false
this.score = 0; this.player.y = 180
this.enemies = []; this.player.vy = 0
this.powerups = []; this.player.onGround = true
this.player.y = 180; this.player.frame = 0
this.player.vy = 0; this.frameTick = 0
this.isGameOver = false; this.frame()
this.frame();
} }
private drawStartup() { private drawStartup() {
this.ctx = this.canvas.getContext('2d')!; const ctx = this.ctx
this.ctx.font = 'bold 16px monospace'; ctx.fillStyle = '#000'
this.ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, 300, 200)
this.ctx.fillText('Click To Start', 80, 90); ctx.fillStyle = '#fff'
ctx.font = 'bold 16px monospace'
ctx.fillText('Click to Start', 90, 100)
} }
private draw() { private draw() {
const ctx = this.ctx; const ctx = this.ctx
ctx.clearRect(0, 0, 300, 200); ctx.clearRect(0, 0, 300, 200)
ctx.fillStyle = '#222'; ctx.fillStyle = '#222'
ctx.fillRect(0, 0, 300, 200); // background ctx.fillRect(0, 0, 300, 200)
ctx.fillStyle = '#444'; ctx.fillStyle = '#444'
ctx.fillRect(0, 190, 300, 10); // ground ctx.fillRect(0, 190, 300, 10)
// draw enemies // Draw enemies
this.enemies.forEach(e => { this.enemies.forEach(e => {
if (e.variant === 'fly') { if (e.type === 'walk') this.drawDogWalk(e.x, e.y, e.frame)
this.drawDogFly(e.x, e.y); else this.drawDogFly(e.x, e.y, e.frame)
} else { })
this.drawDogWalk(e.x, e.y);
}
});
// draw powerups // Powerups
this.powerups.forEach(p => this.drawNut(p.x, p.y)); this.powerups.forEach(p => this.drawNut(p.x, p.y))
// draw player // Player
this.drawSquirrel(this.player.x, this.player.y); this.drawSquirrel(this.player.x, this.player.y, this.player.frame)
// score // Score
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff'
ctx.font = '12px monospace'; ctx.font = '12px monospace'
ctx.fillText(`Score: ${this.score}`, 200, 20); ctx.fillText(`Score: ${this.score}`, 200, 20)
// game over // Game over
if (this.isGameOver) { if (this.isGameOver) {
ctx.font = 'bold 16px monospace'; ctx.font = 'bold 16px monospace'
ctx.fillText('Game Over! Click to restart', 50, 100); ctx.fillText('Game Over! Click to restart', 50, 100)
} }
} }
private drawSquirrel(x: number, y: number, frame: number) {
private drawSquirrel(x: number, y: number) { const ctx = this.ctx
const ctx = this.ctx; ctx.fillStyle = frame % 2 === 0 ? '#3cf' : '#6df'
ctx.fillStyle = '#33f'; ctx.fillRect(x, y, 10, 10) // body
ctx.fillRect(x, y, 10, 10); // body ctx.fillStyle = '#9cf'
ctx.fillStyle = '#66f'; ctx.fillRect(x - 4, y + 2, 5, 6) // tail
ctx.fillRect(x - 4, y + 2, 6, 6); // tail
} }
private drawDogWalk(x: number, y: number) { private drawDogWalk(x: number, y: number, frame: number) {
const ctx = this.ctx; const ctx = this.ctx
ctx.fillStyle = '#f33'; ctx.fillStyle = '#f55'
ctx.fillRect(x, y, 10, 10); // body ctx.fillRect(x, y, 10, 10)
ctx.fillStyle = '#000'; ctx.fillStyle = '#000'
ctx.fillRect(x + 2, y - 2, 2, 2); // ear left const legY = frame % 2 === 0 ? 10 : 9
ctx.fillRect(x + 6, y - 2, 2, 2); // ear right ctx.fillRect(x + 1, y + legY, 2, 2)
ctx.fillRect(x + 7, y + legY, 2, 2)
} }
private drawDogFly(x: number, y: number) { private drawDogFly(x: number, y: number, frame: number) {
const ctx = this.ctx; const ctx = this.ctx
ctx.fillStyle = '#ff3'; ctx.fillStyle = '#ff3'
ctx.fillRect(x, y, 10, 10); // body ctx.fillRect(x, y, 10, 10)
ctx.fillStyle = '#ccc'
const wiggle = frame % 2 === 0 ? -3 : 3
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x - 5, y + 5 + wiggle)
ctx.lineTo(x, y + 10)
ctx.fill()
ctx.fillStyle = '#ccc'; ctx.beginPath()
ctx.beginPath(); ctx.moveTo(x + 10, y)
ctx.moveTo(x, y); ctx.lineTo(x + 15, y + 5 - wiggle)
ctx.lineTo(x - 5, y + 5); ctx.lineTo(x + 10, y + 10)
ctx.lineTo(x, y + 10); ctx.fill()
ctx.fill(); // wing left
ctx.beginPath();
ctx.moveTo(x + 10, y);
ctx.lineTo(x + 15, y + 5);
ctx.lineTo(x + 10, y + 10);
ctx.fill(); // wing right
} }
private drawNut(x: number, y: number) { private drawNut(x: number, y: number) {
const ctx = this.ctx; const ctx = this.ctx
ctx.fillStyle = '#a52a2a'; ctx.fillStyle = '#a52a2a'
ctx.beginPath(); ctx.beginPath()
ctx.arc(x + 5, y + 5, 5, 0, Math.PI * 2); ctx.arc(x + 5, y + 5, 4, 0, Math.PI * 2)
ctx.fill(); ctx.fill()
ctx.fillStyle = '#228B22'
ctx.fillStyle = '#228B22'; ctx.fillRect(x + 3, y - 2, 4, 2)
ctx.fillRect(x + 3, y - 2, 4, 2); // little leaf on top
} }
} }
export function insertRickPanel(target: HTMLElement | string = document.body): void { export function insertRickPanel(target: HTMLElement | string = document.body): void {
const container = typeof target === 'string' const container = typeof target === 'string' ? document.querySelector(target) : target
? document.querySelector(target)
: target
if (container instanceof HTMLElement) { if (container instanceof HTMLElement) {
new RickGamePanel(container) new RickGamePanel(container)
} }
} }