mr index flex

This commit is contained in:
MrLetsplay 2024-07-19 21:26:22 +02:00
parent 2112f5c3c6
commit 8df7ed8d3c
Signed by: mr
SSH Key Fingerprint: SHA256:92jBH80vpXyaZHjaIl47pjRq+Yt7XGTArqQg1V7hSqg
3 changed files with 145 additions and 1 deletions

View File

@ -256,7 +256,11 @@
<th>Flex</th> <th>Flex</th>
<td><iframe src="https://arrayser.cringe-studios.com" width="256" height="256"></iframe></td> <td><iframe src="https://arrayser.cringe-studios.com" width="256" height="256"></iframe></td>
<td></td> <td></td>
<td></td> <td>
<div id="mrFlex"></div>
<script src="mr/index-flex/flex.js"></script>
<link rel="stylesheet" href="mr/index-flex/flex.css">
</td>
<td><img src="https://nsfw.cringe-studios.com/flex2.png" width="256" height="256"></td> <td><img src="https://nsfw.cringe-studios.com/flex2.png" width="256" height="256"></td>
<td><iframe src="https://cody.cringe-studios.com" width="256" height="256"></iframe></td> <td><iframe src="https://cody.cringe-studios.com" width="256" height="256"></iframe></td>
<td></td> <td></td>

22
mr/index-flex/flex.css Normal file
View File

@ -0,0 +1,22 @@
#mrFlex {
display: flex; /* hehe */
flex-direction: column;
width: 100%;
align-items: center;
gap:10px;
}
.mrFlexButton {
border: none;
outline: none;
background-color: red;
padding:10px;
align-self: stretch;
}
.mrFlexBall {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blue;
}

118
mr/index-flex/flex.js Normal file
View File

@ -0,0 +1,118 @@
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();