generated from projects/testosmaximus
fix: update version to 1.3.3 in package.json and package-lock.json; refactor RickGamePanel for improved gameplay mechanics and visual enhancements
This commit is contained in:
parent
25a64c8081
commit
13bfae3b8e
4
source/package-lock.json
generated
4
source/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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 = `<strong>🌀 Rickjump 2: Invasion</strong>`
|
||||
title.innerHTML = `<strong>🎮 Rickjump Shadered</strong>`
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user