diff --git a/source/package-lock.json b/source/package-lock.json
index b30b7f4..9b5db03 100644
--- a/source/package-lock.json
+++ b/source/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@funky-flask-test/funky-flask-test",
- "version": "1.3.1",
+ "version": "1.3.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@funky-flask-test/funky-flask-test",
- "version": "1.3.1",
+ "version": "1.3.2",
"devDependencies": {
"@types/node": "^24.0.15",
"typescript": "^5.8.3",
diff --git a/source/package.json b/source/package.json
index 4b3d12e..878fb22 100644
--- a/source/package.json
+++ b/source/package.json
@@ -1,6 +1,6 @@
{
"name": "@funky-flask-test/funky-flask-test",
- "version": "1.3.1",
+ "version": "1.3.2",
"type": "module",
"main": "./dist/index.jsx",
"exports": {
diff --git a/source/src/index.tsx b/source/src/index.tsx
index 99b7ff7..f71c07a 100644
--- a/source/src/index.tsx
+++ b/source/src/index.tsx
@@ -1,56 +1,55 @@
export class RickGamePanel {
private canvas!: HTMLCanvasElement
private ctx!: CanvasRenderingContext2D
- private x = 20
- private y = 180
- private vy = 0
- private vx = 2
- private onGround = false
+ private player = { x: 20, y: 180, vy: 0, width: 10, height: 10, onGround: false }
private gravity = 0.7
private jumpPower = -12
private isGameOver = false
+ private enemies: { x: number, y: number, width: number, height: number, speed: number }[] = []
+ private spawnTimer = 0
+
constructor(private container: HTMLElement) {
this.createUI()
- this.attachListeners()
this.ctx = this.canvas.getContext('2d')!
+ this.attachListeners()
this.frame()
}
private createUI() {
const panel = document.createElement('div')
panel.style.cssText = `
- background: #fefefe;
- color: #111;
- font-family: sans-serif;
+ background: #1a1a1a;
+ color: #eee;
+ font-family: monospace;
padding: 16px;
- border: 1px solid #ccc;
- border-radius: 10px;
+ border-radius: 12px;
width: fit-content;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ box-shadow: 0 0 20px rgba(255,255,255,0.1);
`
const title = document.createElement('div')
+ title.innerHTML = `🌀 Rickjump 2: Invasion`
title.style.marginBottom = '10px'
- title.innerHTML = `🎮 Rickjump Game`
panel.appendChild(title)
this.canvas = document.createElement('canvas')
this.canvas.width = 300
this.canvas.height = 200
- this.canvas.style.cssText = 'border: 1px solid #aaa; background: #fff;'
+ this.canvas.style.cssText = `
+ border: 2px solid #444;
+ background: #000;
+ image-rendering: pixelated;
+ `
panel.appendChild(this.canvas)
const footer = document.createElement('div')
- footer.textContent = 'sans.'
+ footer.textContent = '↳ try not to get rick’d'
footer.style.cssText = `
- margin-top: 14px;
- color: #666;
- font-size: 0.8em;
- cursor: pointer;
- text-decoration: underline;
+ margin-top: 10px;
+ font-size: 0.7em;
+ color: #aaa;
`
- footer.onclick = () => window.open('https://www.youtube.com/watch?v=ZcoqR9Bwx1Y', '_blank')
panel.appendChild(footer)
this.container.appendChild(panel)
@@ -58,9 +57,9 @@ export class RickGamePanel {
private attachListeners() {
this.canvas.addEventListener('click', () => {
- if (this.onGround) {
- this.vy = this.jumpPower
- this.onGround = false
+ if (this.player.onGround) {
+ this.player.vy = this.jumpPower
+ this.player.onGround = false
}
})
}
@@ -68,38 +67,81 @@ export class RickGamePanel {
private frame = () => {
if (this.isGameOver) return
- this.vy += this.gravity
- this.y += this.vy
- this.x += this.vx // <--- move right
+ // physics
+ this.player.vy += this.gravity
+ this.player.y += this.player.vy
- if (this.y >= 180) {
- this.y = 180
- this.vy = 0
- this.onGround = true
+ if (this.player.y >= 180) {
+ this.player.y = 180
+ this.player.vy = 0
+ this.player.onGround = true
}
- if (this.x > 250 && this.y > 160) {
- this.isGameOver = true
- window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
- return
+ // enemies
+ for (const enemy of this.enemies) {
+ enemy.x -= enemy.speed
+ }
+
+ // cleanup
+ this.enemies = this.enemies.filter(e => e.x + e.width > 0)
+
+ // collisions
+ for (const enemy of this.enemies) {
+ const p = this.player
+ const collide =
+ p.x < enemy.x + enemy.width &&
+ p.x + p.width > enemy.x &&
+ p.y < enemy.y + enemy.height &&
+ p.y + p.height > enemy.y
+
+ if (collide) {
+ this.isGameOver = true
+ setTimeout(() => {
+ window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+ }, 200)
+ return
+ }
+ }
+
+ // spawn enemy
+ this.spawnTimer--
+ if (this.spawnTimer <= 0) {
+ this.spawnEnemy()
+ this.spawnTimer = 30 + Math.floor(Math.random() * 60)
}
this.draw()
requestAnimationFrame(this.frame)
}
+ private spawnEnemy() {
+ const h = 10 + Math.floor(Math.random() * 20)
+ const y = 190 - h
+ const speed = 1.5 + Math.random() * 1.5
+ this.enemies.push({ x: 300, y, width: 10, height: h, speed })
+ }
private draw() {
- this.ctx.clearRect(0, 0, 300, 200)
+ const ctx = this.ctx
+ ctx.clearRect(0, 0, 300, 200)
- this.ctx.fillStyle = '#ccc'
- this.ctx.fillRect(0, 190, 300, 10)
+ // background
+ ctx.fillStyle = '#111'
+ ctx.fillRect(0, 0, 300, 200)
- this.ctx.fillStyle = '#f33'
- this.ctx.fillRect(250, 180, 20, 10)
+ // ground
+ ctx.fillStyle = '#444'
+ ctx.fillRect(0, 190, 300, 10)
- this.ctx.fillStyle = '#007bff'
- this.ctx.fillRect(this.x, this.y, 10, 10)
+ // enemies
+ for (const e of this.enemies) {
+ ctx.fillStyle = '#f00'
+ ctx.fillRect(e.x, e.y, e.width, e.height)
+ }
+
+ // player
+ ctx.fillStyle = '#0af'
+ ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height)
}
}