20210747/run-the-cat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add lvl 1

Browse Source
This commit is contained in:
nadiarvi 2025-05-09 12:56:29 +09:00
parent f0a7f3357b
commit 7e8c4e10ab
2 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/cat.js
View File

@ -1,14 +1,18 @@
export class Cat {
constructor(x, y, targetSize, groundRef, obstacleRefs) {
constructor(x, y, targetSize, groundRef, obstacleRefs, worldBlockSize) {
this.x = x;
this.y = y;
this.size = 171;
// this.size = 171;
this.size = 0;
this.targetSize = targetSize;
this.sprite = null;
this.loaded = false;
this.velocity = 24;
this.velocity = 3.5;
this.ground = groundRef;
this.obstacles = obstacleRefs;
this.blockSize = worldBlockSize;
this.shiftOffset = 0;
this.steps = [];
@ -22,9 +26,14 @@ export class Cat {
this.hasJumped = false;
loadImage('assets/cat.webp', (img) => {
// debugging
// console.log(`loaded image size: ${img.width} x ${img.height}`);
// console.log(`one sprite size: ${img.height / 5}`);
this.size = img.height / 5;
this.sprite = new Sprite(this.x, this.y, this.size, this.size, 'dynamic');
this.sprite.rotationLock = true;
this.sprite.bounciness = 0.1;
this.sprite.bounciness = 0;
this.sprite.spriteSheet = img;
this.sprite.anis.offset.y = 3;
this.sprite.anis.frameDelay = 8;
@ -38,21 +47,27 @@ export class Cat {
});
this.sprite.changeAni('idle');
const scaleFactor = this.targetSize / 171;
const scaleFactor = this.targetSize / this.size;
this.sprite.scale = scaleFactor;
this.shiftOffset = this.targetSize - this.sprite.width * this.sprite.scale;
this.sprite.anis.offset.x = this.shiftOffset;
// this.sprite.anis.offset.x = 100;
this.loaded = true;
});
}
update() {
if (!this.sprite || this.steps.length === 0) return;
console.log(`updating sprite...`);
// console.log(`updating sprite...`);
if (this.isMoving) {
this._continueMovement();
} else if (this.currentStepIndex < this.steps.length) {
this._startMovement(this.steps[this.currentStepIndex]);
}
};
this._handleInput();
};
@ -75,32 +90,50 @@ export class Cat {
}
_startMovement(direction) {
const blockSize = 100;
// const blockSize = 100;
this.moveDirection = direction;
this.stepTimer = 0;
this.isMoving = true;
if (direction === 'right') {
this.targetX = this.sprite.x + blockSize;
this.targetX = this.sprite.x + this.blockSize;
console.log(`dir: ${this.direction}, start: ${this.sprite.x}, end: ${this.targetX}`);
this.targetY = this.sprite.y;
this.sprite.vel.x = this.velocity;
this.sprite.vel.y = 0;
this.lastDirection = 'right';
this.changeAni('w');
} else if (direction === 'left') {
this.targetX = this.sprite.x - blockSize;
this.targetX = this.sprite.x - this.blockSize;
console.log(`dir: ${this.direction}, start: ${this.sprite.x}, end: ${this.targetX}`);
this.targetY = this.sprite.y;
this.sprite.vel.x = -this.velocity;
this.sprite.vel.y = 0;
this.lastDirection = 'left';
this.changeAni('w');
} else if (direction === 'up') {
this.targetY = this.sprite.y - blockSize;
this.targetX = this.sprite.x + (this.lastDirection === 'right' ? this.blockSize : -this.blockSize);
console.log(`dir: ${this.direction}, start: ${this.sprite.x}, end: ${this.targetX}`);
this.targetY = this.sprite.y - this.blockSize;
this.hasJumped = false;
// Check platform
let isOnPlatform = this._checkPlatform();
if (isOnPlatform) {
this.sprite.vel.y = -10;
if (this.lastDirection === 'right') this.sprite.vel.x = this.velocity;
else if (this.lastDirection === 'left') this.sprite.vel.x = -this.velocity;
else this.sprite.vel.x = 0;
if (this._checkPlatform()) {
this.sprite.vel.y = -this.velocity;
if (this.lastDirection === "right") {
this.sprite.vel.x = this.velocity;
} else if (this.lastDirection === "left") {
this.sprite.vel.x = -this.velocity;
} else {
this.sprite.vel.x = 0;
}
this.changeAni('j');
}
}
@ -180,25 +213,28 @@ export class Cat {
_continueMovement() {
this.stepTimer++;
let isOnPlatform = this._checkPlatform(); // ✅ use this only
let isOnPlatform = this._checkPlatform();
if (this.moveDirection === 'right') {
this.sprite.vel.x = 3;
this.changeAni('w');
this.sprite.vel.x = this.velocity;
this.lastDirection = 'right';
}
if (this.moveDirection === 'left') {
this.sprite.vel.x = -3;
this.changeAni('w');
this.sprite.vel.x = -this.velocity;
this.lastDirection = 'left';
}
if (this.moveDirection === 'up' && isOnPlatform && !this.hasJumped) {
this.changeAni('j');
this.sprite.vel.y = -20;
if (this.lastDirection === 'right') {
this.sprite.vel.x = 3;
this.sprite.vel.x = this.velocity;
} else if (this.lastDirection === 'left') {
this.sprite.vel.x = -3;
this.sprite.vel.x = -this.velocity;
} else {
this.sprite.vel.x = 0;
}
@ -210,6 +246,9 @@ export class Cat {
this.isMoving = false;
this.currentStepIndex++;
this.sprite.vel.x = 0;
// force snap
// this.sprite.x = this.targetX;
// this.sprite.y = this.targetY;
this.changeAni('i');
}
}
@ -255,6 +294,20 @@ export class Cat {
if (!this.sprite) return;
this.update();
this.sprite.update();
// debugging purposes
noFill();
stroke(255);
strokeWeight(1);
// let w = this.sprite.width * this.sprite.scale;
// let h = this.sprite.height * this.sprite.scale;
let w = this.sprite.width;
let h = this.sprite.height;
// console.log(`sprite's actual dimension: ${w}x${h}`);
rectMode(CENTER);
// rect(this.sprite.x, this.sprite.y, w, h);
};
changeAni(key) {
@ -320,7 +373,7 @@ export class Cat {
}
_handleInput(){
console.log('assume i have something....');
// console.log('assume i have something....');
}
}

18
src/scenes/gameScene.js
View File

@ -15,7 +15,7 @@ export default function GameScene() {
let restart = false;
const catSize = 150;
const worldBlockSize = 100;
const worldBlockSize = 125;
const groundHeight = worldBlockSize;
// const worldHeight = windowHeight - groundHeight;
const maxIdx = {
@ -26,8 +26,8 @@ export default function GameScene() {
const obstacle = [
...Array(maxIdx.y - 3 - 1).fill(...Array(maxIdx.x).fill(0)),
[...Array(9).fill(0), ...Array(maxIdx.x - 9).fill(1)],
[...Array(8).fill(0), ...Array(maxIdx.x - 8).fill(1)],
[...Array(7).fill(0), ...Array(maxIdx.x - 7).fill(1)],
[...Array(5).fill(0), ...Array(maxIdx.x - 5).fill(1)],
];
let cat;
@ -55,7 +55,7 @@ export default function GameScene() {
const slots = {
blocks: 2,
steps: 6,
steps: 8,
loop: 3,
}
@ -75,7 +75,7 @@ export default function GameScene() {
name: 'blocks',
x: width / 32 * 7,
y: height / 32,
numBoxes: 2
numBoxes: slots.blocks,
});
blocks.setContents(buildingBlocks);
@ -83,7 +83,7 @@ export default function GameScene() {
name: 'steps',
x: width / 32 * 7 + 48 * (slots.blocks + 1),
y: height / 32,
numBoxes: 6
numBoxes: slots.steps,
});
@ -91,7 +91,7 @@ export default function GameScene() {
// name: 'loop',
// x: width / 32 * 7 + 48 * (slots.blocks + slots.steps + 2.75),
// y: height / 32,
// numBoxes: 4
// numBoxes: slots.loops,
// });
for (let i = 0; i < width; i += worldBlockSize) {
@ -128,7 +128,7 @@ export default function GameScene() {
// Cat sprite
// cat = new Cat(width / 4, height - catSize * 13/12, catSize, blocksGround, blockSprites);
cat = new Cat(3.5 * worldBlockSize, height - catSize * 13/12, catSize, blocksGround, blockSprites);
cat = new Cat(2.25 * worldBlockSize, height - catSize * 13/12, catSize, blocksGround, blockSprites, worldBlockSize);
};
this.draw = () => {
@ -173,7 +173,7 @@ export default function GameScene() {
}
this.mousePressed = function() {
console.log(`canvas clicked at ${mouseX}, ${mouseY}`);
// console.log(`canvas clicked at ${mouseX}, ${mouseY}`);
steps.contents.forEach((arrow, index) => {
if (arrow._isMouseOver(mouseX, mouseY)) {
@ -201,6 +201,6 @@ export default function GameScene() {
this.startGame = () => {
if (restart) cat.restart();
cat.run(steps.contents);
this.restart = true;
restart = true;
}
}