Skip to content

Commit

Permalink
refactor: endless runner nad flapyp pets game extend minigames base c…
Browse files Browse the repository at this point in the history 
…lass
  • Loading branch information
@vindennt
vindennt committed Mar 16, 2024
1 parent b08a807 commit 9e9c9d5
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 378 deletions.
113 changes: 4 additions & 109 deletions js/game/minigames/endless_runner.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,19 @@
/**
* Implementation of an endless-runner type game.
* Like Flappy Bird, Jetpack Joyride, etc
* @WIP
*/
import { Obstacle } from './minigame.js'
import { Minigame, Obstacle } from './minigame.js'
import { Pet } from '../pet.js'
import { MediumButton } from '../buttons.js'
import { events, EARN_COINS } from '../../events.js'

export class EndlessRunnerGame {
export class EndlessRunnerGame extends Minigame {
constructor() {
super()

// canvas
this.canvas = document.createElement('canvas')
this.canvas.id = 'comfy-pets-runner-game'
this.canvas.width = 700
this.canvas.height = 400
this.context = this.canvas.getContext('2d')

// assets
this.backgroundImage = new Image()
this.backgroundImage.src =
'https://media.istockphoto.com/id/1333010525/vector/simple-flat-pixel-art-illustration-of-cartoon-outdoor-landscape-background-pixel-arcade.jpg?s=612x612&w=0&k=20&c=uTGqB9fhmjzaNd17EGRHYU04_70K7a3M8ilRoJjDwtY='

// game states
// default dont start the game
this.isPaused = true
this.animatonId = null
this.eventListeners = {}
this.score = 0

// Physics values
this.gravity = 0.3
this.initialJumpVelocity = -8 // Initial jump velocity value
Expand All @@ -45,73 +30,15 @@ export class EndlessRunnerGame {
this.blueRect.velocityY = this.initialJumpVelocity

// enemies
this.redRectangles = []
this.redRectangleCooldown = 0
this.baseRedRectangleSpeed = 5

this.buttons = []

// Start loading screen
//this.renderLoadingScreen();
this.startGame()
this.renderCount = 0
}

addButton(buttonText, options, callback) {
//this.addWidget("button", buttonText, "image", callback)
var b = new MediumButton(buttonText, '#eeaa00', '#fff')
b.onClick = callback
this.buttons.push(b)

return b
}

renderLoadingScreen() {
let img = new Image()
img.src = this.blueRect.gifSrc
img.onload = () => {
// Draw the image onto the canvas
this.context.drawImage(
img,
50, // x
200, // y
175, // width
150, // height
)
}

this.context.fillStyle = 'white'
//this.context.textAlign = 'center';
//this.context.textBaseline = 'middle';

this.context.font = `bold 32px Courier New`

this.context.fillText('Hello world', 50, 50)

// Render button
const startButton = new MediumButton('Start', '#eeaa00', '#fff')
startButton.onClick = () => {
console.log('Hello')
//this.startGame();
}
startButton.render(this.context, this.renderCount)

//this.buttons.push(startButton)
}

renderDefeatScreen() {
this.context.fillStyle = 'white'
this.context.font = `bold 32px Courier New`
this.context.fillText('You lost', 50, 50)
this.context.fillText('Score: ' + this.score, 50, 100)

this.context.fillStyle = '#FFBF00'
this.context.fillText(`+${this.score} coins`, 50, 150)

const e = new CustomEvent(EARN_COINS, { detail: { coins: this.score } })
events.dispatchEvent(e)
}

startGame() {
const handleKeyDown = (event) => {
if (event.key === ' ' && this.blueRect.isJumping == false) {
Expand All @@ -135,27 +62,6 @@ export class EndlessRunnerGame {
this.render()
}

togglePause() {
this.isPaused = !this.isPaused
if (this.isPaused) {
cancelAnimationFrame(this.animationId)
} else {
this.render() // Resume the animation
}
}

endGame() {
// Cancel animation frame
cancelAnimationFrame(this.animationId)

// Remove event listeners
for (const [type, listener] of Object.entries(this.eventListeners)) {
document.removeEventListener(type, listener)
}

console.log('Closing game')
}

createRectangle() {
return new Obstacle({
x: this.canvas.width, // Start from the right side of the canvas
Expand Down Expand Up @@ -247,17 +153,6 @@ export class EndlessRunnerGame {
}
}

renderBackground() {
//const [width, height] = this.size
this.context.drawImage(
this.backgroundImage,
0,
0,
this.canvas.width,
this.canvas.height,
)
}

/**
* Main loop
*/
Expand Down
114 changes: 4 additions & 110 deletions js/game/minigames/flappy_pets.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,18 @@
/**
* Implementation of an endless-runner type game.
* Like Flappy Bird, Jetpack Joyride, etc
* @WIP
*/
import { Obstacle } from './minigame.js'
import { Minigame, Obstacle } from './minigame.js'
import { Pet } from '../pet.js'
import { MediumButton } from '../buttons.js'
import { events, EARN_COINS } from '../../events.js'

export class FlappyGame {
export class FlappyGame extends Minigame {
constructor() {
super()
// canvas
this.canvas = document.createElement('canvas')
this.canvas.id = 'comfy-pets-runner-game'
this.canvas.id = 'comfy-pets-flappy-game'
this.canvas.width = 400
this.canvas.height = 500
this.context = this.canvas.getContext('2d')

// assets
this.backgroundImage = new Image()
this.backgroundImage.src =
'https://media.istockphoto.com/id/1333010525/vector/simple-flat-pixel-art-illustration-of-cartoon-outdoor-landscape-background-pixel-arcade.jpg?s=612x612&w=0&k=20&c=uTGqB9fhmjzaNd17EGRHYU04_70K7a3M8ilRoJjDwtY='

// game states
// default dont start the game
this.isPaused = true
this.animatonId = null
this.eventListeners = {}
this.score = 0

// Physics values
this.gravity = 0.8
this.initialJumpVelocity = -11 // Initial jump velocity value
Expand All @@ -46,73 +30,15 @@ export class FlappyGame {
this.blueRect.velocityY = this.initialJumpVelocity

// enemies
this.redRectangles = []
this.redRectangleCooldown = 0
this.baseRedRectangleSpeed = 3

this.buttons = []

// Start loading screen
//this.renderLoadingScreen();
this.startGame()
this.renderCount = 0
}

addButton(buttonText, options, callback) {
//this.addWidget("button", buttonText, "image", callback)
var b = new MediumButton(buttonText, '#eeaa00', '#fff')
b.onClick = callback
this.buttons.push(b)

return b
}

renderLoadingScreen() {
let img = new Image()
img.src = this.blueRect.gifSrc
img.onload = () => {
// Draw the image onto the canvas
this.context.drawImage(
img,
50, // x
200, // y
175, // width
150, // height
)
}

this.context.fillStyle = 'white'
//this.context.textAlign = 'center';
//this.context.textBaseline = 'middle';

this.context.font = `bold 32px Courier New`

this.context.fillText('Hello world', 50, 50)

// Render button
const startButton = new MediumButton('Start', '#eeaa00', '#fff')
startButton.onClick = () => {
console.log('Hello')
//this.startGame();
}
startButton.render(this.context, this.renderCount)

//this.buttons.push(startButton)
}

renderDefeatScreen() {
this.context.fillStyle = 'white'
this.context.font = `bold 32px Courier New`
this.context.fillText('You lost', 50, 50)
this.context.fillText('Score: ' + this.score, 50, 100)

this.context.fillStyle = '#FFBF00'
this.context.fillText(`+${this.score} coins`, 50, 150)

const e = new CustomEvent(EARN_COINS, { detail: { coins: this.score } })
events.dispatchEvent(e)
}

startGame() {
const handleKeyDown = (event) => {
if (event.key === ' ') {
Expand All @@ -136,27 +62,6 @@ export class FlappyGame {
this.render()
}

togglePause() {
this.isPaused = !this.isPaused
if (this.isPaused) {
cancelAnimationFrame(this.animationId)
} else {
this.render() // Resume the animation
}
}

endGame() {
// Cancel animation frame
cancelAnimationFrame(this.animationId)

// Remove event listeners
for (const [type, listener] of Object.entries(this.eventListeners)) {
document.removeEventListener(type, listener)
}

console.log('Closing game')
}

createRectangle() {
const imgSrc =
'https://upload.wikimedia.org/wikipedia/commons/9/93/Mario_pipe.png'
Expand Down Expand Up @@ -303,17 +208,6 @@ export class FlappyGame {
}
}

renderBackground() {
//const [width, height] = this.size
this.context.drawImage(
this.backgroundImage,
0,
0,
this.canvas.width,
this.canvas.height,
)
}

/**
* Main loop
*/
Expand Down
Loading

0 comments on commit 9e9c9d5

Please sign in to comment.