diff --git a/source/package-lock.json b/source/package-lock.json
index 9b5db03..9a0347b 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.2",
+ "version": "1.3.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@funky-flask-test/funky-flask-test",
- "version": "1.3.2",
+ "version": "1.3.3",
"devDependencies": {
"@types/node": "^24.0.15",
"typescript": "^5.8.3",
diff --git a/source/package.json b/source/package.json
index 878fb22..e37da95 100644
--- a/source/package.json
+++ b/source/package.json
@@ -1,6 +1,6 @@
{
"name": "@funky-flask-test/funky-flask-test",
- "version": "1.3.2",
+ "version": "1.3.3",
"type": "module",
"main": "./dist/index.jsx",
"exports": {
diff --git a/source/src/index.tsx b/source/src/index.tsx
index f71c07a..5e6a46f 100644
--- a/source/src/index.tsx
+++ b/source/src/index.tsx
@@ -4,32 +4,37 @@ export class RickGamePanel {
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 isStarted = false
+ private startupAlpha = 0
+ private frameCount = 0
+ private score = 0
private enemies: { x: number, y: number, width: number, height: number, speed: number }[] = []
- private spawnTimer = 0
+ private spawnCooldown = 0
constructor(private container: HTMLElement) {
this.createUI()
this.ctx = this.canvas.getContext('2d')!
this.attachListeners()
- this.frame()
+ this.drawStartup()
}
private createUI() {
const panel = document.createElement('div')
panel.style.cssText = `
- background: #1a1a1a;
+ background: #111;
color: #eee;
font-family: monospace;
padding: 16px;
- border-radius: 12px;
+ border-radius: 10px;
width: fit-content;
- box-shadow: 0 0 20px rgba(255,255,255,0.1);
+ box-shadow: 0 0 10px rgba(255,255,255,0.2);
`
const title = document.createElement('div')
- title.innerHTML = `๐ Rickjump 2: Invasion`
+ title.innerHTML = `๐ฎ Rickjump Shadered`
title.style.marginBottom = '10px'
panel.appendChild(title)
@@ -37,14 +42,15 @@ export class RickGamePanel {
this.canvas.width = 300
this.canvas.height = 200
this.canvas.style.cssText = `
- border: 2px solid #444;
+ border: 2px solid #333;
background: #000;
image-rendering: pixelated;
+ cursor: pointer;
`
panel.appendChild(this.canvas)
const footer = document.createElement('div')
- footer.textContent = 'โณ try not to get rickโd'
+ footer.textContent = 'click to begin | dodge to score'
footer.style.cssText = `
margin-top: 10px;
font-size: 0.7em;
@@ -57,7 +63,12 @@ export class RickGamePanel {
private attachListeners() {
this.canvas.addEventListener('click', () => {
- if (this.player.onGround) {
+ if (!this.isStarted) {
+ this.isStarted = true
+ this.frame()
+ } else if (this.isGameOver) {
+ this.resetGame()
+ } else if (this.player.onGround) {
this.player.vy = this.jumpPower
this.player.onGround = false
}
@@ -65,83 +76,154 @@ export class RickGamePanel {
}
private frame = () => {
- if (this.isGameOver) return
+ if (!this.isStarted) return
+ this.frameCount++
- // physics
- this.player.vy += this.gravity
- this.player.y += this.player.vy
+ if (!this.isGameOver) {
+ this.player.vy += this.gravity
+ this.player.y += this.player.vy
- if (this.player.y >= 180) {
- this.player.y = 180
- this.player.vy = 0
- this.player.onGround = true
- }
-
- // 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
+ if (this.player.y >= 180) {
+ this.player.y = 180
+ this.player.vy = 0
+ this.player.onGround = true
}
- }
- // spawn enemy
- this.spawnTimer--
- if (this.spawnTimer <= 0) {
- this.spawnEnemy()
- this.spawnTimer = 30 + Math.floor(Math.random() * 60)
+ for (const enemy of this.enemies) {
+ enemy.x -= enemy.speed
+ }
+
+ // Remove passed enemies + add score
+ const remainingEnemies = []
+ for (const enemy of this.enemies) {
+ if (enemy.x + enemy.width > 0) {
+ remainingEnemies.push(enemy)
+ } else {
+ this.score++
+ }
+ }
+ this.enemies = remainingEnemies
+
+ 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')
+ }, 300)
+ return
+ }
+ }
+
+ if (this.spawnCooldown-- <= 0) {
+ const last = this.enemies[this.enemies.length - 1]
+ if (!last || last.x < 180) {
+ this.spawnEnemy()
+ this.spawnCooldown = 40 + Math.floor(Math.random() * 50)
+ }
+ }
}
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 resetGame() {
+ this.player.y = 180
+ this.player.vy = 0
+ this.enemies = []
+ this.spawnCooldown = 0
+ this.isGameOver = false
+ this.score = 0
+ this.frame()
}
- private draw() {
+ private spawnEnemy() {
+ const height = 10 + Math.floor(Math.random() * 20)
+ const y = 190 - height
+ const speed = 1 + Math.random() * 1.5
+ this.enemies.push({ x: 300, y, width: 10, height, speed })
+ }
+
+ private drawStartup() {
+ const draw = () => {
+ if (this.isStarted) return
+
+ this.startupAlpha += 0.02
+ if (this.startupAlpha > 1) this.startupAlpha = 1
+
+ this.draw(true)
+ requestAnimationFrame(draw)
+ }
+
+ draw()
+ }
+
+ private draw(startup = false) {
const ctx = this.ctx
ctx.clearRect(0, 0, 300, 200)
- // background
- ctx.fillStyle = '#111'
+ const grad = ctx.createLinearGradient(0, 0, 0, 200)
+ grad.addColorStop(0, '#000')
+ grad.addColorStop(1, '#222')
+ ctx.fillStyle = grad
ctx.fillRect(0, 0, 300, 200)
- // ground
ctx.fillStyle = '#444'
ctx.fillRect(0, 190, 300, 10)
- // enemies
+ // Enemies
for (const e of this.enemies) {
- ctx.fillStyle = '#f00'
+ ctx.fillStyle = '#f33'
ctx.fillRect(e.x, e.y, e.width, e.height)
}
- // player
+ // Player
ctx.fillStyle = '#0af'
ctx.fillRect(this.player.x, this.player.y, this.player.width, this.player.height)
+
+ // Shader lines
+ ctx.fillStyle = 'rgba(255,255,255,0.03)'
+ for (let y = 0; y < 200; y += 2) {
+ ctx.fillRect(0, y, 300, 1)
+ }
+
+ // Vignette
+ ctx.fillStyle = 'rgba(0,0,0,0.2)'
+ ctx.beginPath()
+ ctx.ellipse(150, 100, 160, 100, 0, 0, Math.PI * 2)
+ ctx.rect(300, 0, -300, 200)
+ ctx.fill()
+
+ // Score
+ if (this.isStarted) {
+ ctx.fillStyle = '#fff'
+ ctx.font = 'bold 12px monospace'
+ ctx.fillText(`Score: ${this.score}`, 210, 20)
+ }
+
+ // Intro screen
+ if (!this.isStarted) {
+ ctx.fillStyle = `rgba(255,255,255,${this.startupAlpha * 0.9})`
+ ctx.font = 'bold 16px monospace'
+ ctx.fillText('Click to Start', 90, 100)
+ }
+
+ // Game over
+ if (this.isGameOver) {
+ ctx.fillStyle = '#fff'
+ ctx.font = 'bold 16px monospace'
+ ctx.fillText('๐ Rickrolled!', 95, 80)
+ ctx.font = '12px monospace'
+ ctx.fillText(`Final Score: ${this.score}`, 95, 100)
+ ctx.fillText(`Click to Restart`, 95, 120)
+ }
}
}