diff --git a/index2.html b/index2.html
index dae8529..b4a6d89 100644
--- a/index2.html
+++ b/index2.html
@@ -256,7 +256,11 @@
Flex |
|
|
- |
+
+
+
+
+ |
|
|
|
diff --git a/mr/index-flex/flex.css b/mr/index-flex/flex.css
new file mode 100644
index 0000000..0c1d73b
--- /dev/null
+++ b/mr/index-flex/flex.css
@@ -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;
+}
diff --git a/mr/index-flex/flex.js b/mr/index-flex/flex.js
new file mode 100644
index 0000000..66c3e43
--- /dev/null
+++ b/mr/index-flex/flex.js
@@ -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();