I am making a 2D game in Pixi.JS and electron.
Here is my game.js:
const {Application, Graphics} = require("pixi.js")
import {Player} from "./src/player/player.js"
const app = new Application()
window.onload = initGame
async function initGame() {
await app.init({background: '#1099bb',resizeTo:window});
app.canvas.style.position = "absolute"
app.canvas.style.top = "0px"
app.canvas.style.left = "0px"
document.body.appendChild(app.canvas)
gameLogic()
}
async function gameLogic() {
const player = new Player("Player", app)
globalThis.objects = []
const platform = new Graphics()
platform.rect(0,0,150,600)
platform.fill(0x0000FF)
platform.x = app.screen.width / 2;
platform.y = app.screen.height / 2 + 100;
app.stage.addChild(platform)
objects.push(platform)
//Update
app.ticker.add(gameLoop)
app.ticker.add(()=> {player.update(app,globalThis.objects)})
app.ticker.add(() => {console.log(player.isTouching(platform))})
}
async function gameLoop(delta) {
}
And here is my src/player/player.js:
const {Graphics} = require("pixi.js")
class Player {
constructor(name,app) {
this.player = new Graphics();
this.player.rect(0,0,128,64)
this.player.fill(0xFFFFFF)
this.player.x = app.screen.width / 2;
this.player.y = app.screen.height / 2 - 100;
app.stage.addChild(this.player)
document.addEventListener("keydown", (ev) => {
if (ev.keyCode == 68) {
this.player.x += 1;
} else if (ev.keyCode == 65) {
this.player.x -= 1;
}
})
}
update(app, delta) {
app.stage.position.set(app.renderer.screen.width / 2, app.renderer.screen.height / 2);
app.stage.pivot.set(this.player.x + 64, this.player.y + 32);
globalThis.objects.forEach((Obj) => {
if (!this.isTouching(Obj)) {
this.player.y += 1;
}
})
}
isIn(object) {
const playerBound = this.player.getBounds()
const objectBound = object.getBounds()
return(
playerBound.x < objectBound.x + objectBound.width
&& playerBound.x + playerBound.width > objectBound.x
&& playerBound.y < objectBound.y + objectBound.height
&& playerBound.y + playerBound.height > objectBound.y
)
}
isTouching(object) {
const playerBound = this.player.getBounds();
const objectBound = object.getBounds();
return (
playerBound.x <= objectBound.x + objectBound.width &&
playerBound.x + playerBound.width >= objectBound.x &&
playerBound.y <= objectBound.y + objectBound.height &&
playerBound.y + playerBound.height >= objectBound.y
);
}
}
export {Player}
The problem is that in my update function, it watch if the player is touching all the platforms of the game, but don't check if it is touching from up,down,left,right. How can split the isTouching function into four functions:
isUpTouching, isDownTouching, isLeftTouching, isRightTouching.
Some AI give me that code:
isYTouching(object) {
const playerBound = this.player.getBounds();
const objectBound = object.getBounds();
return (
playerBound.y <= objectBound.y + objectBound.height &&
playerBound.y + playerBound.height >= objectBound.y
);
}
It returns me false, when the player touches once the platform it returns me true, and returns me true when the player don't touch the platform after touching once.
I think it because it detect only the Y, and not X, so it doesn't check the width of the player and the platform.