diff options
| author | niliara-edu <nil.jimeno@estudiant.fjaverianas.com> | 2024-12-24 17:58:20 +0100 |
|---|---|---|
| committer | niliara-edu <nil.jimeno@estudiant.fjaverianas.com> | 2024-12-24 17:58:20 +0100 |
| commit | 25adfc618e77db9a5ee3b98ce0dab0be832efed0 (patch) | |
| tree | 36ca56758ddd4674ab5a43df4b76bbfcc5a47af1 | |
| parent | a840990bdcabf45fb0d377478ba0ab27222434ae (diff) | |
hello kitty base done
51 files changed, 544 insertions, 101 deletions
diff --git a/assets/music/First Boss Music.ogg b/assets/music/First Boss Music.ogg Binary files differnew file mode 100644 index 0000000..fe68632 --- /dev/null +++ b/assets/music/First Boss Music.ogg diff --git a/assets/music/hellokitty.ogg b/assets/music/hellokitty.ogg Binary files differnew file mode 100644 index 0000000..6aadde5 --- /dev/null +++ b/assets/music/hellokitty.ogg diff --git a/assets/sounds/BloodExplo.ogg b/assets/sounds/BloodExplo.ogg Binary files differnew file mode 100644 index 0000000..fd607ee --- /dev/null +++ b/assets/sounds/BloodExplo.ogg diff --git a/assets/sounds/CampingNoobs.ogg b/assets/sounds/CampingNoobs.ogg Binary files differnew file mode 100644 index 0000000..f3a5e45 --- /dev/null +++ b/assets/sounds/CampingNoobs.ogg diff --git a/assets/sounds/Ihatehellokitty.ogg b/assets/sounds/Ihatehellokitty.ogg Binary files differnew file mode 100644 index 0000000..8365b65 --- /dev/null +++ b/assets/sounds/Ihatehellokitty.ogg diff --git a/assets/sounds/Nyaaa the hell.ogg b/assets/sounds/Nyaaa the hell.ogg Binary files differnew file mode 100644 index 0000000..be77b93 --- /dev/null +++ b/assets/sounds/Nyaaa the hell.ogg diff --git a/assets/sounds/Shoot (2).wav b/assets/sounds/Shoot (2).wav Binary files differnew file mode 100644 index 0000000..7a7cf99 --- /dev/null +++ b/assets/sounds/Shoot (2).wav diff --git a/assets/sounds/ahhhahhahhhh.ogg b/assets/sounds/ahhhahhahhhh.ogg Binary files differnew file mode 100644 index 0000000..63a4b04 --- /dev/null +++ b/assets/sounds/ahhhahhahhhh.ogg diff --git a/assets/sounds/blood rip.ogg b/assets/sounds/blood rip.ogg Binary files differnew file mode 100644 index 0000000..4923362 --- /dev/null +++ b/assets/sounds/blood rip.ogg diff --git a/assets/sounds/darkBoshy_shoot.ogg b/assets/sounds/darkBoshy_shoot.ogg Binary files differnew file mode 100644 index 0000000..5989d5d --- /dev/null +++ b/assets/sounds/darkBoshy_shoot.ogg diff --git a/assets/sounds/dino_shoot.ogg b/assets/sounds/dino_shoot.ogg Binary files differnew file mode 100644 index 0000000..86d3cca --- /dev/null +++ b/assets/sounds/dino_shoot.ogg diff --git a/assets/sounds/exciteshoot.ogg b/assets/sounds/exciteshoot.ogg Binary files differnew file mode 100644 index 0000000..c1de28a --- /dev/null +++ b/assets/sounds/exciteshoot.ogg diff --git a/assets/sprites/blood.png b/assets/sprites/blood.png Binary files differnew file mode 100644 index 0000000..e7e0650 --- /dev/null +++ b/assets/sprites/blood.png diff --git a/assets/sprites/deathtext.png b/assets/sprites/deathtext.png Binary files differnew file mode 100644 index 0000000..890fe3d --- /dev/null +++ b/assets/sprites/deathtext.png diff --git a/assets/sprites/fucking_idiot.png b/assets/sprites/fucking_idiot.png Binary files differnew file mode 100644 index 0000000..8c39df5 --- /dev/null +++ b/assets/sprites/fucking_idiot.png diff --git a/assets/sprites/hello_kitty1.png b/assets/sprites/hello_kitty1.png Binary files differnew file mode 100644 index 0000000..7a09493 --- /dev/null +++ b/assets/sprites/hello_kitty1.png diff --git a/assets/sprites/hello_kitty2.png b/assets/sprites/hello_kitty2.png Binary files differnew file mode 100644 index 0000000..634fe40 --- /dev/null +++ b/assets/sprites/hello_kitty2.png diff --git a/assets/sprites/hello_kitty_bg.png b/assets/sprites/hello_kitty_bg.png Binary files differnew file mode 100644 index 0000000..57b93ed --- /dev/null +++ b/assets/sprites/hello_kitty_bg.png diff --git a/assets/sprites/hello_kitty_heart.png b/assets/sprites/hello_kitty_heart.png Binary files differnew file mode 100644 index 0000000..12030d4 --- /dev/null +++ b/assets/sprites/hello_kitty_heart.png diff --git a/assets/sprites/hello_kitty_small1.png b/assets/sprites/hello_kitty_small1.png Binary files differnew file mode 100644 index 0000000..d560cfc --- /dev/null +++ b/assets/sprites/hello_kitty_small1.png diff --git a/assets/sprites/hello_kitty_small2.png b/assets/sprites/hello_kitty_small2.png Binary files differnew file mode 100644 index 0000000..34b3df4 --- /dev/null +++ b/assets/sprites/hello_kitty_small2.png diff --git a/assets/sprites/spike.png b/assets/sprites/spike.png Binary files differnew file mode 100644 index 0000000..c65bf7c --- /dev/null +++ b/assets/sprites/spike.png diff --git a/assets/sprites/wall.png b/assets/sprites/wall.png Binary files differnew file mode 100644 index 0000000..75d6e14 --- /dev/null +++ b/assets/sprites/wall.png diff --git a/assets/sprites/white.png b/assets/sprites/white.png Binary files differnew file mode 100644 index 0000000..44207a2 --- /dev/null +++ b/assets/sprites/white.png @@ -10,5 +10,6 @@ <body> </body> +<script type="module" src="preloader.js"></script> <script type="module" src="index.js"></script> </html> @@ -1,32 +1,2 @@ import { Engine } from "./src/engine.js" -Engine.startEngine() - -// import { start, update, draw } from "./src/main.js"; -// const fps = 60 -// -// -// /* cap the game's fps */ -// let msPrev = window.performance.now() -// const msPerFrame = 1000 / fps -// let frames = 0 -// function gameloop() { -// window.requestAnimationFrame(gameloop) -// -// const msNow = window.performance.now() -// const msPassed = msNow - msPrev -// -// if (msPassed < msPerFrame) return -// -// const excessTime = msPassed % msPerFrame -// msPrev = msNow - excessTime -// -// frames++ -// -// update() -// draw() -// } -// -// /* call functions to start the game */ -// /* the game logic can be found in src */ -// start() -// gameloop() +addEventListener("load", Engine.startEngine()) diff --git a/preloader.js b/preloader.js new file mode 100644 index 0000000..214421e --- /dev/null +++ b/preloader.js @@ -0,0 +1,20 @@ +import * as ASSETS from "./src/assets.js" + +function preload(a) { + var tempImg = new Image() + tempImg.src=a +} + +function preloadAudio(a) { + var tempAud = new Audio(a) + tempAud.load() +} + +export function preloadAll() { +ASSETS.PORTAL.map(preload) +Array.from([ASSETS.BOSHY.BULLET, ASSETS.BOSHY.NORMAL]).map(preload) +Array.from([ASSETS.MUSIC.PREQUEL, ASSETS.MUSIC.HELL, ASSETS.MUSIC.DEATH]).map(preloadAudio) +Array.from([ASSETS.BACKGROUND.DEFAULT, ASSETS.BACKGROUND.DARK_SUN]).map(preload) +} + +preloadAll() diff --git a/scss/index.scss b/scss/index.scss index 177f5fd..42efed2 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -1,8 +1,6 @@ body { margin: 0; background-color: grey; - width: 100%; - height: 100%; } img { @@ -11,6 +9,10 @@ img { left: 0; } +.pixelated { + image-rendering: crisp-edges; +} + .background { width: 100%; height: 100%; diff --git a/src/assets.js b/src/assets.js index 4a51716..0b65e7d 100644 --- a/src/assets.js +++ b/src/assets.js @@ -2,21 +2,63 @@ export const BOSHY = { NORMAL: "./assets/sprites/boshy1.png", DAMAGED:"./assets/sprites/boshy2.png", BULLET: "./assets/sprites/boshy_bullet.png", + BLOOD: "./assets/sprites/blood.png", SOUNDS: { SHOOT: "./assets/sounds/shoot.ogg", INTRO: "./assets/sounds/ItsBOSHYtime.ogg", + INTRO2: "./assets/sounds/CampingNoobs.ogg", + DEAD: "./assets/sounds/slag.ogg", + DEADQUOTE1: "./assets/sounds/Noho (2).ogg", + DEADQUOTE2: "./assets/sounds/Awww.ogg", + DEADQUOTE3: "./assets/sounds/Nyaaa the hell.ogg", + DEADQUOTE4: "./assets/sounds/SoFuckingClose.ogg", } } export const BACKGROUND = { DEFAULT: "./assets/sprites/black_background.png", DARK_SUN: "./assets/sprites/black_sun_background.png", + KITTY: "./assets/sprites/hello_kitty_bg.png", } export const MUSIC = { - SOLGRYN: './assets/music/Ace Combat Megalith.ogg', DEATH: './assets/music/loludied.ogg', PREQUEL: './assets/music/terranigma-theunderworld.ogg', + HELL: './assets/music/First Boss Music.ogg', + LOLUDIED: './assets/music/loludied.ogg', +} + +export const PORTAL = [ + './assets/sprites/portal1.png', + './assets/sprites/portal2.png', + './assets/sprites/portal3.png', + './assets/sprites/portal4.png', + './assets/sprites/portal5.png', + './assets/sprites/portal6.png', + './assets/sprites/portal7.png', + './assets/sprites/portal8.png', + './assets/sprites/portal9.png', + './assets/sprites/portal10.png', + './assets/sprites/portal11.png', + './assets/sprites/portal12.png', + './assets/sprites/portal13.png', + './assets/sprites/portal14.png', + './assets/sprites/portal15.png', +] +export const HELLO_KITTY = { + MAIN : [ + './assets/sprites/hello_kitty1.png', + './assets/sprites/hello_kitty2.png', + ], + SMALL : [ + './assets/sprites/hello_kitty_small1.png', + './assets/sprites/hello_kitty_small2.png', + ], + BULLET : './assets/sprites/hello_kitty_heart.png', + HIT_SOUND : './assets/sounds/exciteshoot.ogg', } + +export const WHITE = './assets/sprites/white.png' +export const GAME_OVER = './assets/sprites/deathtext.png' diff --git a/src/engine.js b/src/engine.js index a7bb8a5..1d71148 100644 --- a/src/engine.js +++ b/src/engine.js @@ -2,18 +2,19 @@ import { start, update, draw } from "./main.js" import { Screen } from "./engine/screen.js" import { keys, setUpKeyboard } from "./engine/keyboard.js" import { startClock } from "./engine/clock.js" +import { Radio } from "./engine/radio.js" +import { Collision } from "./engine/collision.js" export class Engine { static frame = 0 - static audio static screen = new Screen() + static radio = new Radio() + static collision = new Collision() static keys = keys - static bgm static startEngine() { setUpKeyboard() start() - startClock() } @@ -22,13 +23,7 @@ export class Engine { draw() } - static playSound(file) { - let audio = new Audio(file) - audio.play() - } - - static playMusic(file) { - this.bgm = new Audio(file) - this.bgm.play() + static random(min, max) { + return Math.floor(Math.random() * (max + 1 - min) + min); } } diff --git a/src/engine/clock.js b/src/engine/clock.js index e817863..d1e0898 100644 --- a/src/engine/clock.js +++ b/src/engine/clock.js @@ -1,6 +1,4 @@ import { Engine } from "../engine.js" - -export { Engine } from "../engine.js" const fps = 60 /* cap the game's fps */ diff --git a/src/engine/collision.js b/src/engine/collision.js new file mode 100644 index 0000000..78e9a1a --- /dev/null +++ b/src/engine/collision.js @@ -0,0 +1,45 @@ +import { boshy, enemy } from "../main.js" +import { Vector } from "./vector.js" + +export class Collision { + collidingWithBoshy(position, hitbox = position) { + if (boshy == undefined) return false + return this.areColliding({ + position_a: position, + position_b: boshy.position, + hitbox_a: hitbox, + hitbox_b: boshy.hitbox, + }) + } + + collidingWithEnemy(position, hitbox = position) { + if (enemy == undefined) return false + return this.areColliding({ + position_a: position, + position_b: enemy.position, + hitbox_a: hitbox, + hitbox_b: enemy.hitbox, + }) + } + + areColliding({ + position_a, + position_b, + hitbox_a= position_a, + hitbox_b= position_b, + }) { + let hitbox_value = new Vector( + (Math.abs(hitbox_a.x) + Math.abs(hitbox_b.x)) / 2, + (Math.abs(hitbox_a.y) + Math.abs(hitbox_b.y)) / 2, + ) + let position_difference = new Vector( + Math.abs( Math.abs(position_a.x) - Math.abs(position_b.x)), + Math.abs( Math.abs(position_a.y) - Math.abs(position_b.y)), + ) + + return ( + position_difference.x <= hitbox_value.x && + position_difference.y <= hitbox_value.y + ) + } +} diff --git a/src/engine/keyboard.js b/src/engine/keyboard.js index d634519..3a9c39e 100644 --- a/src/engine/keyboard.js +++ b/src/engine/keyboard.js @@ -1,3 +1,5 @@ +import { SCENE, SCENES } from "../scenes.js" + export function setUpKeyboard() { document.addEventListener("keyup", k => trigger(k)) document.addEventListener("keydown", k => trigger(k)) @@ -19,5 +21,6 @@ function trigger(event) { case "ArrowUp": keys.up = on; break; case "ArrowDown": keys.down = on; break; case "z": case "Z": keys.shoot = on; break; + case "r": case "R": if (on) SCENE.load(SCENES.PREQUEL); break; } } diff --git a/src/engine/radio.js b/src/engine/radio.js new file mode 100644 index 0000000..d39524a --- /dev/null +++ b/src/engine/radio.js @@ -0,0 +1,14 @@ +export class Radio { + bgm + playMusic(file) { + if (this.bgm != undefined) this.bgm.pause() + this.bgm = new Audio(file) + this.bgm.play() + this.bgm.loop = true + } + + playSound(file) { + let audio = new Audio(file) + audio.play() + } +} diff --git a/src/engine/screen.js b/src/engine/screen.js index 2d32b62..173e285 100644 --- a/src/engine/screen.js +++ b/src/engine/screen.js @@ -20,12 +20,14 @@ export class Screen { this.div = document.createElement("div") this.div.id = "screen" this.div.style.backgroundColor = "black" + this.div.style.zIndex = -11 /* create background image */ this.background = document.createElement("img") this.background.className = "background" this.background.src = `${BACKGROUND.DEFAULT}` this.background.style.visibility = "hidden" + this.background.style.zIndex = -10 this.div.appendChild(this.background) /* create relative div to append children */ @@ -77,11 +79,20 @@ export class Screen { draw(span, position, size, /* rotation = 0 */) { span.style.width = `${size.x * this.scale}px` span.style.height = `${size.y * this.scale}px` - span.style.top = `${(position.y - size.x / 2) * this.scale}px` - span.style.left = `${(position.x - size.y / 2) * this.scale}px` + span.style.top = `${(position.y - size.y / 2) * this.scale}px` + span.style.left = `${(position.x - size.x / 2) * this.scale}px` } setBackground(img) { this.background.src = img } showBackground() { this.background.visibility = "visible" } hideBackground() { this.background.visibility = "hidden" } + + isOffLimits(position, size) { + return ( + position.x + size.x < 0 || + position.y + size.y < 0 || + position.x - size.x > this.viewport.x || + position.y - size.y > this.viewport.y + ) + } } diff --git a/src/engine/vector.js b/src/engine/vector.js index 452e47b..f596c51 100644 --- a/src/engine/vector.js +++ b/src/engine/vector.js @@ -7,7 +7,6 @@ export class Vector { add(newVector) { this.x += newVector.x this.y += newVector.y - return this } normalize() { @@ -19,13 +18,11 @@ export class Vector { this.x = this.x / Math.abs(this.x) * c this.y = this.y / Math.abs(this.x) * c } - return this } multiply(multiplier) { this.x *= multiplier this.y *= multiplier - return this } clone() { diff --git a/src/entities/boshy.js b/src/entities/boshy.js index ea6068d..9a2b589 100644 --- a/src/entities/boshy.js +++ b/src/entities/boshy.js @@ -3,11 +3,17 @@ import { Vector } from "../engine/vector.js" import { Engine } from "../engine.js" import { BoshyBullet } from "./boshybullet.js" import { Entity } from "./entity.js" +import { SCENES, currentScene } from "../scenes.js" +import { boshyDied } from "../main.js" +import { Blood } from "./boshyblood.js" export class Boshy extends Entity { reloadTime = 6 lastShot = 0 - speed = 5 + speed = 4 + + canmove = true + dead = false constructor() { super({ @@ -16,10 +22,19 @@ export class Boshy extends Entity { sprite: BOSHY.NORMAL, }) - Engine.playSound(BOSHY.SOUNDS.INTRO) + switch (currentScene) { + case SCENES.PREQUEL: + Engine.radio.playSound(BOSHY.SOUNDS.INTRO2) + break; + + case SCENES.HELLO_KITTY: + Engine.radio.playSound(BOSHY.SOUNDS.INTRO) + break; + } } update() { + if (!this.canmove) return let keys = Engine.keys let viewport = Engine.screen.viewport @@ -60,6 +75,36 @@ export class Boshy extends Entity { new BoshyBullet(bullet_a_position) new BoshyBullet(bullet_b_position) - Engine.playSound(BOSHY.SOUNDS.SHOOT) + // new BoshyBullet(this.position.clone()) + Engine.radio.playSound(BOSHY.SOUNDS.SHOOT) + } + + die() { + if (this.dead) return + this.dead = true + this.playDeathSounds() + this.spawnBlood() + + this.position.x = 0 + this.position.y = Engine.screen.viewport.y + this.remove() + boshyDied() + } + + playDeathSounds() { + Engine.radio.playSound(BOSHY.SOUNDS.DEAD) + + switch (Engine.random(1, 4)) { + case 1: Engine.radio.playSound(BOSHY.SOUNDS.DEADQUOTE1); break; + case 2: Engine.radio.playSound(BOSHY.SOUNDS.DEADQUOTE2); break; + case 3: Engine.radio.playSound(BOSHY.SOUNDS.DEADQUOTE3); break; + case 4: Engine.radio.playSound(BOSHY.SOUNDS.DEADQUOTE4); break; + } + } + + spawnBlood() { + for (let i = 0; i<20; i++) { + new Blood(this.position.clone().floor()) + } } } diff --git a/src/entities/boshyblood.js b/src/entities/boshyblood.js new file mode 100644 index 0000000..af4a97d --- /dev/null +++ b/src/entities/boshyblood.js @@ -0,0 +1,25 @@ +import { BOSHY } from "../assets.js" +import { Vector } from "../engine/vector.js" +import { Engine } from "../engine.js" +import { Entity } from "./entity.js" + +export class Blood extends Entity { + constructor(position) { + super({ + size: new Vector(6, 6), + position: position, + sprite: BOSHY.BLOOD, + }) + + let max_speed = 20 + this.velocity = new Vector(Engine.random(-max_speed, max_speed),Engine.random(-max_speed, max_speed)) + this.gravity = 1 + } + + + update() { + this.position.add(this.velocity) + if (Engine.screen.isOffLimits(this.position, this.size)) this.remove() + this.velocity.y += this.gravity + } +} diff --git a/src/entities/boshybullet.js b/src/entities/boshybullet.js index ed91ede..a87e159 100644 --- a/src/entities/boshybullet.js +++ b/src/entities/boshybullet.js @@ -1,7 +1,8 @@ import { BOSHY } from "../assets.js" import { Vector } from "../engine/vector.js" -import { bullets } from "../main.js" import { Entity } from "./entity.js" +import { enemy } from "../main.js" +import { Engine } from "../engine.js" export class BoshyBullet extends Entity { speed = 20 @@ -12,19 +13,17 @@ export class BoshyBullet extends Entity { position: position.floor(), sprite: BOSHY.BULLET, }) - - bullets.list.push(this) } update() { this.position.y -= this.speed if (this.position.y < 0) { - this.span.remove() - bullets.remove(this) + this.remove() } - } - remove() { - this.span.remove() + if (Engine.collision.collidingWithEnemy(this.position, this.hitbox)) { + enemy.hit() + this.remove() + } } } diff --git a/src/entities/entity.js b/src/entities/entity.js index ac14d4b..9d27508 100644 --- a/src/entities/entity.js +++ b/src/entities/entity.js @@ -1,5 +1,6 @@ import { Vector } from "../engine/vector.js" import { Engine } from "../engine.js" +import { entities } from "../main.js" export class Entity { constructor({ @@ -7,6 +8,7 @@ export class Entity { hitbox = size, sprite, position = new Vector(0,0), + pixelated = false, }) { this.size = size this.hitbox = hitbox @@ -15,9 +17,20 @@ export class Entity { this.span = document.createElement("img") this.span.src = sprite Engine.screen.append(this.span) + + entities.list.push(this) + if (pixelated) this.span.className = "pixelated" } + update() {} + draw() { Engine.screen.draw(this.span, this.position, this.size) } + + + remove() { + this.span.remove() + entities.remove(this) + } } diff --git a/src/entities/game_over.js b/src/entities/game_over.js new file mode 100644 index 0000000..fc35938 --- /dev/null +++ b/src/entities/game_over.js @@ -0,0 +1,60 @@ +import { Vector } from "../engine/vector.js" +import { Entity } from "./entity.js" +import { GAME_OVER } from "../assets.js" + +export class GameOver extends Entity { + fadeWaitTime = 40 + opacity = 0 + stage = 0 + + zoomDelay = 7 + zoomWaitTime = this.zoomDelay + zoomGrowth = 10 + zoomedIn = false + initialSize = 400 + maxSize = 550 + + constructor() { + super({ + size: new Vector(400, 400), + position: new Vector(325, 250), + sprite: GAME_OVER, + pixelated: true, + }) + + this.span.style.zIndex = 5 + this.span.style.opacity = 0 + } + + update() { + if (this.stage == 0) this.fadeIn() + this.zoomAnimation() + } + + fadeIn() { + if (this.fadeWaitTime > 0) { this.fadeWaitTime--; return; } + if (this.opacity < 1) { + this.opacity += 0.05 + this.span.style.opacity = this.opacity + return + } + this.stage = 1 + } + + zoomAnimation() { + if (this.zoomWaitTime > 0) { this.zoomWaitTime--; return; } + console.log("hi") + if (this.zoomedIn) this.size.add(new Vector(-this.zoomGrowth, -this.zoomGrowth)) + else this.size.add(new Vector(this.zoomGrowth, this.zoomGrowth)) + console.log(this.size) + if ( + this.size.x == this.initialSize || + this.size.x == this.maxSize + ) { + this.zoomedIn = !this.zoomedIn + this.zoomWaitTime = this.zoomDelay + } + + } +} + diff --git a/src/entities/hello_kitty.js b/src/entities/hello_kitty.js new file mode 100644 index 0000000..eb7552a --- /dev/null +++ b/src/entities/hello_kitty.js @@ -0,0 +1,75 @@ +import { Vector } from "../engine/vector.js" +import { Engine } from "../engine.js" +import { Entity } from "./entity.js" +import { HELLO_KITTY } from "../assets.js" +import { setEnemy, boshy } from "../main.js" + +export class HelloKitty extends Entity { + max_hp = 500 + hp = this.max_hp + previous = 0 + moveInterval = 30 + + justGotHit = false + turningRight = false + + constructor() { + super({ + size: new Vector(200, 200), + hitbox: new Vector(100, 200), + position: new Vector(325, 140), + sprite: HELLO_KITTY.MAIN[0], + pixelated: true, + }) + + this.span.style.zIndex = 1 + setEnemy(this) + } + + update() { + this.move() + if (Engine.collision.collidingWithBoshy(this.position, this.hitbox)) { + boshy.die() + } + } + + move() { + /* get position */ + let localscale = Math.sin((Engine.frame - this.previous) / this.moveInterval) + let viewport = Engine.screen.viewport + let newPos = (viewport.x / 2) + (localscale * viewport.x / 2) * 0.6 + + this.turningRight = this.position.x < newPos + this.position.x = newPos + // this.position.x += this.speed + // if (this.position.x > 325) this.speed -= this.acceleration + // else this.speed += this.acceleration + } + + draw() { + /* hit effect */ + if (this.justGotHit) { + this.span.style.filter = "brightness(500%)" + this.justGotHit = false + } else { + this.span.style.filter = "brightness(100%)" + } + + if (this.turningRight) this.span.style.transform = "scaleX(-1)" + else this.span.style.transform = "scaleX(1)" + + /* frame */ + this.span.src = (Math.floor(Engine.frame / 10 % 2) == 0) ? + HELLO_KITTY.MAIN[0] : + HELLO_KITTY.MAIN[1] + + /* draw */ + super.draw() + } + + hit() { + this.hp-- + if (!this.justGotHit) Engine.radio.playSound(HELLO_KITTY.HIT_SOUND) + this.justGotHit = true + } +} diff --git a/src/entities/hello_kitty_background.js b/src/entities/hello_kitty_background.js new file mode 100644 index 0000000..4d9a81f --- /dev/null +++ b/src/entities/hello_kitty_background.js @@ -0,0 +1,41 @@ +import { Vector } from "../engine/vector.js" +import { BACKGROUND } from "../assets.js" +import { Entity } from "../entities/entity.js" +import { Engine } from "../engine.js" + +export class HelloKittyBackground extends Entity { + speed = 20 + stage = 0 + + constructor(position = null) { + let size = new Vector(1300, 2080) + let x_margin = 0 + if (position == null) position = new Vector( + size.x / 2 + Engine.screen.viewport / 2 - x_margin, + - (size.y / 2) + Engine.screen.viewport.y, + ) + super({ + //size: new Vector(650, 1040), + size: size, + position: position, + sprite: BACKGROUND.KITTY, + }) + this.span.style.zIndex = -3 + this.max_down = (this.size.y / 2) + this.x_margin = x_margin + } + + update() { + this.position.y += this.speed + if (this.stage == 0 && this.position.y > this.max_down) { + let margin = this.position.y - this.max_down + let newPos = new Vector( + this.size.x / 2 - this.x_margin, + - (this.size.y / 2) + margin + ) + + new HelloKittyBackground(newPos) + this.stage++ + } + } +} diff --git a/src/entities/hp_bar.js b/src/entities/hp_bar.js new file mode 100644 index 0000000..d6e68bb --- /dev/null +++ b/src/entities/hp_bar.js @@ -0,0 +1,32 @@ +import { WHITE } from "../assets.js" +import { Vector } from "../engine/vector.js" +import { Engine } from "../engine.js" +import { Entity } from "./entity.js" +import { enemy } from "../main.js" + +export class HPBar extends Entity { + constructor() { + let size = new Vector(Engine.screen.viewport.x, 20) + super({ + size: new Vector(Engine.screen.viewport.x, 20), + position: new Vector(size.x / 2, size.y / 2), + sprite: WHITE, + pixelated: true, + }) + + this.lasthp = enemy.hp + } + + update() { + if (enemy.hp != this.lasthp) { + this.lasthp = enemy.hp + + let hpScale = enemy.hp / enemy.max_hp + let viewport = Engine.screen.viewport + + this.size.x = hpScale * viewport.x + this.position.x = (viewport.x / 2) - (1 - hpScale) / 2 * viewport.x + } + } +} + diff --git a/src/entities/portal.js b/src/entities/portal.js new file mode 100644 index 0000000..8e3c6c9 --- /dev/null +++ b/src/entities/portal.js @@ -0,0 +1,28 @@ +import { Entity } from "./entity.js" +import { PORTAL } from "../assets.js" +import { Vector } from "../engine/vector.js" +import { Engine } from "../engine.js" +import { SCENE, SCENES } from "../scenes.js" + +export class Portal extends Entity { + constructor() { + super({ + size: new Vector(150, 150), + position: new Vector(325, 100), + sprite: PORTAL[0], + }) + + frames = PORTAL.length + } + + update() { + if (Engine.collision.collidingWithBoshy(this.position, this.hitbox)) { + SCENE.load(SCENES.HELLO_KITTY) + } + } + + draw() { + this.span.src = PORTAL[Math.floor(Engine.frame / 2) % frames] + super.draw() + } +} diff --git a/src/main.js b/src/main.js index 6822351..922ad52 100644 --- a/src/main.js +++ b/src/main.js @@ -1,38 +1,48 @@ ///////////////////// IMPORTS ////////////////////// import { Boshy } from "./entities/boshy.js" import { SCENE, SCENES } from "./scenes.js" +import { HPBar } from "./entities/hp_bar.js" +import { GameOver } from "./entities/game_over.js" +import { Engine } from "./engine.js" +import { MUSIC } from "./assets.js" ///////////////////// GLOBALS ////////////////////// export let boshy -export const bullets = { +export const entities = { list: [], - remove: instance => { bullets.list = bullets.list.filter(b => b != instance) }, - clear: _ => { bullets.list.forEach(b => b.remove()) } + remove: instance => { entities.list = entities.list.filter(b => b != instance) }, + clear: _ => { entities.list.forEach(b => b.remove()) } } +export let enemy ///////////////////// GAME LOGIC ////////////////////// export function start() { console.log("game start") - changeScene(SCENES.PREQUEL) + SCENE.load(SCENES.PREQUEL) } export function update() { - boshy.update() - bullets.list.forEach((bullet) => bullet.update()) + entities.list.forEach((entity) => entity.update()) SCENE.update() } export function draw() { - boshy.draw() - bullets.list.forEach((bullet) => bullet.draw()) + entities.list.forEach((entity) => entity.draw()) SCENE.draw() } -///////////////////// SCENE METHODS ////////////////////// -export function changeScene(scene) { - SCENE.load(scene) - bullets.clear() +///////////////////// METHODS ////////////////////// +export function reload() { + if (boshy != undefined) boshy.remove() + entities.clear() + enemy = undefined boshy = new Boshy() } + +export function setEnemy(e) { enemy = e; new HPBar() } +export function boshyDied() { + Engine.radio.playMusic(MUSIC.LOLUDIED) + new GameOver() +} diff --git a/src/scenes.js b/src/scenes.js index 09ea493..c6d175e 100644 --- a/src/scenes.js +++ b/src/scenes.js @@ -1,30 +1,38 @@ import * as PREQUEL from "./scenes/prequel.js" -import * as GAME from "./scenes/game.js" +import * as HELLO_KITTY from "./scenes/hello_kitty.js" +import { reload as reloadMain } from "./main.js" +import { Engine } from "./engine.js" export const SCENES = { PREQUEL: "prequel", - GAME: "game", + HELLO_KITTY: "hello kitty", } export const SCENE = { load: loadScene, update: null, draw: null, + restart: restartScene, } -let currentScene +export let currentScene function loadScene(scene) { + Engine.frame = 0 currentScene = scene + reloadMain() + if (currentScene == SCENES.PREQUEL) { PREQUEL.start() SCENE.update = PREQUEL.update SCENE.draw = PREQUEL.draw } - if (currentScene == SCENES.GAME) { - GAME.start() - SCENE.update = GAME.update - SCENE.draw = GAME.draw + if (currentScene == SCENES.HELLO_KITTY) { + HELLO_KITTY.start() + SCENE.update = HELLO_KITTY.update + SCENE.draw = HELLO_KITTY.draw } } + +function restartScene() { loadScene (currentScene) } diff --git a/src/scenes/game.js b/src/scenes/game.js deleted file mode 100644 index 1640aa5..0000000 --- a/src/scenes/game.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Engine } from "../engine.js" -import { MUSIC } from "../assets.js" - -export function start() { - Engine.playMusic(MUSIC.SOLGRYN) -} - - -export function update() { -} - -export function draw() { -} diff --git a/src/scenes/hello_kitty.js b/src/scenes/hello_kitty.js new file mode 100644 index 0000000..f7b5c8c --- /dev/null +++ b/src/scenes/hello_kitty.js @@ -0,0 +1,17 @@ +import { Engine } from "../engine.js" +import { MUSIC } from "../assets.js" +import { HelloKittyBackground } from "../entities/hello_kitty_background.js" +import { HelloKitty } from "../entities/hello_kitty.js" + +export function start() { + Engine.radio.playMusic(MUSIC.HELL) + new HelloKittyBackground() + new HelloKitty() +} + + +export function update() { +} + +export function draw() { +} diff --git a/src/scenes/prequel.js b/src/scenes/prequel.js index f24ef99..83b8ba4 100644 --- a/src/scenes/prequel.js +++ b/src/scenes/prequel.js @@ -1,13 +1,18 @@ import { Engine } from "../engine.js" import { MUSIC } from "../assets.js" +import { Portal } from "../entities/portal.js" + +let portal export function start() { - Engine.playMusic(MUSIC.PREQUEL) + Engine.radio.playMusic(MUSIC.PREQUEL) + portal = new Portal() } - export function update() { + portal.update() } export function draw() { + portal.draw() } @@ -1,16 +1,16 @@ body { margin: 0; - background-color: grey; - width: 100%; - height: 100%; } + background-color: grey; } img { position: absolute; top: 0; left: 0; } +.pixelated { + image-rendering: crisp-edges; } + .background { - position: inline; width: 100%; height: 100%; } |
