Sky Picker Storyline eLearning Game

nrzmalik

Jul 2nd, 2025

113

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

JavaScript 7.76 KB | Source Code | 0 0

raw download clone embed print report

const FlappyBirdGame = {
state: {
isJumping: false,
fallSpeed: 0,
currentX: 0,
currentY: 0,
currentRotation: 0,
gameLoop: null,
animationFrame: null,
moveSpeed: 5,
lastJumpTime: 0,
jumpCooldown: 150,
maxFallSpeed: 1.8,
airResistance: 0.98,
keysPressed: {},
initialX: 0,
initialY: 0
},
init() {
this.resetState();
this.setupEventListeners();
this.startGame();
setTimeout(() => {
if (this.state.gameLoop) {
this.state.isJumping = true;
this.state.fallSpeed = -3.5;
this.state.lastJumpTime = Date.now();
}
}, 100);
},
resetState() {
this.state = {
...this.state,
isJumping: false,
fallSpeed: 0,
currentRotation: 0,
gameLoop: null,
animationFrame: null,
keysPressed: {},
lastJumpTime: 0,
gameStarted: false
};
setVar("GameOver", false);
},
setupEventListeners() {
document.addEventListener('keydown', this.handleKeyDown.bind(this));
document.addEventListener('keyup', this.handleKeyUp.bind(this));
document.addEventListener('touchstart', this.handleTouch.bind(this));
},
handleKeyDown(event) {
this.state.keysPressed[event.code] = true;
if (event.code === 'Space') {
event.preventDefault();
if (!this.state.gameStarted) {
this.state.gameStarted = true;
this.startGameLoop();
}
this.jump();
} else if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
event.preventDefault();
}
},
handleKeyUp(event) {
this.state.keysPressed[event.code] = false;
},
handleTouch(event) {
event.preventDefault();
if (!this.state.gameStarted) {
this.state.gameStarted = true;
this.startGameLoop();
}
this.jump();
},
startGame() {
const bird = document.querySelector('div[data-acc-text="Player"]');
if (!bird) return;
const slide = document.querySelector('#slide');
const slideWidth = slide.offsetWidth;
const slideHeight = slide.offsetHeight;
const birdWidth = bird.offsetWidth;
const birdHeight = bird.offsetHeight;
this.state.initialX = (slideWidth - birdWidth) / 2;
this.state.initialY = (slideHeight - birdHeight) / 2;
this.state.currentX = this.state.initialX;
this.state.currentY = this.state.initialY;
this.updateBirdPosition(bird);
this.startGameLoop();
this.state.isJumping = true;
this.state.fallSpeed = -3.5;
},
stopGame() {
this.state.gameLoop = false;
this.state.gameStarted = false;
cancelAnimationFrame(this.state.animationFrame);
},
jump() {
const currentTime = Date.now();
if (currentTime - this.state.lastJumpTime >= this.state.jumpCooldown) {
this.state.isJumping = true;
this.state.lastJumpTime = currentTime;
if (this.state.fallSpeed > 0) {
this.state.fallSpeed = 0;
}
}
},
forceDropBird() {
this.state.fallSpeed = 15;
this.state.isJumping = false;
this.state.currentRotation = 45;
},
startGameLoop() {
if (!this.state.gameLoop) {
this.state.gameLoop = true;
this.state.fallSpeed = 1;
this.animate();
}
},
animate() {
if (!this.state.gameLoop) return;
const bird = document.querySelector('div[data-acc-text="Player"]');
if (!bird) return;
this.updatePosition();
this.checkBoundaries(bird);
this.updateBirdPosition(bird);
this.checkCollisions(bird);
this.state.animationFrame = requestAnimationFrame(this.animate.bind(this));
},
updatePosition() {
if (this.state.keysPressed['ArrowLeft']) {
this.state.currentX -= this.state.moveSpeed;
}
if (this.state.keysPressed['ArrowRight']) {
this.state.currentX += this.state.moveSpeed;
}
if (!this.state.isJumping) {
this.state.fallSpeed += 0.3;
this.state.fallSpeed *= this.state.airResistance;
if (this.state.fallSpeed > this.state.maxFallSpeed) {
this.state.fallSpeed = this.state.maxFallSpeed;
}
}
this.state.currentY += this.state.fallSpeed;
if (this.state.isJumping) {
this.state.fallSpeed = -3.5;
this.state.isJumping = false;
}
},
checkCollisions(bird) {
const birdRect = bird.getBoundingClientRect();
this.checkGhostCollisions(birdRect);
this.checkCorrectCollisions(birdRect);
},
checkGhostCollisions(birdRect) {
const ghosts = document.querySelectorAll('div[data-acc-text="Ghosts"]');
ghosts.forEach((ghost) => {
if (this.isColliding(birdRect, ghost.getBoundingClientRect()) &&
!ghost.classList.contains('hidden')) {
this.forceDropBird();
setVar("GameOver", true);
ghost.classList.remove('shown');
ghost.classList.add('hidden');
}
});
},
checkCorrectCollisions(birdRect) {
const correctItems = document.querySelectorAll('div[data-acc-text="Correct"]');
correctItems.forEach((item) => {
if (this.isColliding(birdRect, item.getBoundingClientRect()) &&
!item.classList.contains('hidden')) {
this.forceDropBird();
let correct = getVar("correct");
setVar("correct", correct + 1);
item.classList.remove('shown');
item.classList.add('hidden');
}
});
},
isColliding(rect1, rect2) {
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
},
checkBoundaries(bird) {
const slide = document.querySelector('#slide');
const slideHeight = slide.offsetHeight;
const slideWidth = slide.offsetWidth;
const birdHeight = bird.offsetHeight;
const birdWidth = bird.offsetWidth;
if (this.state.currentY > slideHeight - birdHeight) {
this.state.currentY = slideHeight - birdHeight;
this.state.fallSpeed = 0;
this.state.currentRotation = 0;
setVar("GameOver", true);
this.stopGame();
}
if (this.state.currentY < 0) {
this.state.currentY = 0;
this.state.fallSpeed = 0;
this.state.currentRotation = 0;
}
if (this.state.currentX > slideWidth - birdWidth) {
this.state.currentX = slideWidth - birdWidth;
}
if (this.state.currentX < 0) {
this.state.currentX = 0;
}
},
updateBirdPosition(bird) {
let targetRotation = this.state.isJumping ? -25 : Math.min(this.state.fallSpeed * 10, 45);
this.state.currentRotation = this.state.currentRotation * 0.9 + targetRotation * 0.1;
bird.style.transform = `translate(${this.state.currentX}px, ${this.state.currentY}px) rotate(${this.state.currentRotation}deg)`;
bird.style.transition = 'transform 0.1s ease-out';
}
};

Add Comment

Please, Sign In to add comment