119 lines
3.0 KiB
JavaScript
119 lines
3.0 KiB
JavaScript
|
class Flex {
|
||
|
|
||
|
started;
|
||
|
flex;
|
||
|
ball;
|
||
|
startButton;
|
||
|
ballPosX;
|
||
|
ballPosY;
|
||
|
|
||
|
init() {
|
||
|
this.flex = document.getElementById("mrFlex");
|
||
|
|
||
|
this.ball = document.createElement("div");
|
||
|
this.ball.className = "mrFlexBall";
|
||
|
this.flex.appendChild(this.ball);
|
||
|
|
||
|
this.startButton = document.createElement("button");
|
||
|
this.startButton.innerText = "Play";
|
||
|
this.startButton.className = "mrFlexButton";
|
||
|
this.flex.appendChild(this.startButton);
|
||
|
|
||
|
this.startButton.onclick = () => this.start();
|
||
|
|
||
|
console.log("Initialized");
|
||
|
}
|
||
|
|
||
|
start() {
|
||
|
if(this.started) return;
|
||
|
this.started = true;
|
||
|
|
||
|
console.log(this);
|
||
|
this.startButton.style.position = "fixed";
|
||
|
this.startButton.style.bottom = "0px";
|
||
|
this.startButton.style.width = "500px";
|
||
|
|
||
|
this.ball.style.position = "fixed";
|
||
|
|
||
|
let mouseX, mouseY;
|
||
|
document.onmousemove = e => {
|
||
|
mouseX = e.clientX;
|
||
|
mouseY = e.clientY;
|
||
|
};
|
||
|
|
||
|
const BALL_SPEED = 5;
|
||
|
let ballSpeedX = BALL_SPEED;
|
||
|
let ballSpeedY = -BALL_SPEED;
|
||
|
|
||
|
const BALL_SIZE = 50;
|
||
|
|
||
|
let ballPosX = 100;
|
||
|
let ballPosY = 500;
|
||
|
|
||
|
let collidableElements = document.querySelectorAll("img");
|
||
|
console.log(collidableElements);
|
||
|
collidableElements.forEach(e => e.style.outline = "10px solid lime");
|
||
|
|
||
|
setInterval(() => {
|
||
|
this.startButton.style.left = (mouseX - this.startButton.clientWidth / 2) + "px";
|
||
|
|
||
|
ballPosX += ballSpeedX;
|
||
|
ballPosY += ballSpeedY;
|
||
|
|
||
|
for(let el of collidableElements) {
|
||
|
let pos = el.getBoundingClientRect();
|
||
|
let x = pos.left;
|
||
|
let y = pos.top;
|
||
|
let w = pos.width;
|
||
|
let h = pos.height;
|
||
|
|
||
|
let xColl = ballPosX + BALL_SIZE > x && ballPosX < x + w;
|
||
|
let yColl = ballPosY + BALL_SIZE > y && ballPosY < y + w;
|
||
|
let prevXColl = (ballPosX - ballSpeedX) + BALL_SIZE > x && (ballPosX - ballSpeedX) < x + w;
|
||
|
let prevYColl = (ballPosY - ballSpeedY) + BALL_SIZE > y && (ballPosY - ballSpeedY) < y + w;
|
||
|
if(xColl && yColl) {
|
||
|
let clone = document.createElement("img");
|
||
|
clone.style.width = el.clientWidth + "px";
|
||
|
clone.style.height = el.clientHeight + "px";
|
||
|
//el.remove();
|
||
|
clone.style.backgroundColor = "black";
|
||
|
el.replaceWith(clone);
|
||
|
if(prevYColl) ballSpeedX = -ballSpeedX;
|
||
|
if(prevXColl) ballSpeedY = -ballSpeedY;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
let buttonPos = this.startButton.getBoundingClientRect();
|
||
|
|
||
|
if(ballPosX <= 0 && ballSpeedX < 0) {
|
||
|
ballSpeedX = -ballSpeedX;
|
||
|
}
|
||
|
|
||
|
if(ballPosY <= 0 && ballSpeedY < 0) {
|
||
|
ballSpeedY = -ballSpeedY;
|
||
|
}
|
||
|
|
||
|
if(ballPosX + BALL_SIZE >= window.visualViewport.width && ballSpeedX > 0) {
|
||
|
ballSpeedX = -ballSpeedX;
|
||
|
}
|
||
|
|
||
|
if(ballPosY + BALL_SIZE >= buttonPos.top && ballPosX + BALL_SIZE >= buttonPos.left && ballPosX <= buttonPos.left + buttonPos.width && ballSpeedY > 0) {
|
||
|
|
||
|
ballSpeedY = -ballSpeedY;
|
||
|
}
|
||
|
|
||
|
if(ballPosY + BALL_SIZE >= window.visualViewport.height && ballSpeedY > 0) {
|
||
|
//ballSpeedY = -ballSpeedY;
|
||
|
window.location.reload();
|
||
|
}
|
||
|
|
||
|
this.ball.style.left = ballPosX + "px";
|
||
|
this.ball.style.top = ballPosY + "px";
|
||
|
}, 20);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
let mrFlex = new Flex();
|
||
|
mrFlex.init();
|