Merge of Beerpong-Youtube and Tic-Tac-Toe

2021-06-20 22:56:31 +02:00
parent 774723cd8e
commit eeeaa6ae7c
12 changed files with 317 additions and 115 deletions
@@ -0,0 +1,159 @@
+var html = document.getElementById("html");
+var reshoot = document.getElementById("reshoot");
+var ball = document.getElementById("ball");
+var root = document.documentElement;
+var restartbuttonvisible = 1;
+var cupsOut = [];
+
+//function shootY(){
+    //let top = window.getComputedStyle(ball).getPropertyValue("top");
+    //ball.classList.remove("shootY");
+    //ball.classList.add("shootX");
+    //ball.style.top = top;
+    //let onclick = "shootX('".concat(top.toString(), "')");
+    //html.setAttribute("onclick", onclick);
+//}
+
+function shoot(event){
+    //let top = valueY;
+    //let topInt = parseInt(valueY);
+    //let left = window.getComputedStyle(ball).getPropertyValue("left");
+    //let leftInt = parseInt(left);
+    //let newtop = topInt-325;
+    //root.style.setProperty('--top', (topInt)+ "px");
+    //root.style.setProperty('--top325', (newtop)+ "px");
+    ball.classList.add("Shoot");
+
+
+    switch (event.key)
+    {
+      case 'e':
+      case 'E':
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px"
+      ball.style.left = "-155px";
+        removeCup("1");
+        break;
+      case 'r':
+      case 'R':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "-50px";
+        removeCup("2");
+        break;
+      case 't':
+      case 'T':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "55px";
+        removeCup("3");
+        break;
+      case 'z':
+      case 'Z':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "160px";
+        removeCup("4");
+        break;
+      case 'd':
+      case 'D':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "-100px";
+        removeCup("5");
+        break;
+      case 'f':
+      case 'F':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "0px";
+        removeCup("6");
+        break;
+      case 'g':
+      case 'G':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "110px";
+        removeCup("7");
+        break;
+      case 'c':
+      case 'C':
+        root.style.setProperty('--top325', "-220"+ "px");
+        ball.style.top = "-220px"
+        ball.style.left = "-50px";
+        removeCup("8");
+        break;
+      case 'v':
+      case 'V':
+        root.style.setProperty('--top325', "-220"+ "px");
+        ball.style.top = "-220px"
+        ball.style.left = "55px";
+        removeCup("9");
+        break;
+      case 'b':
+      case 'B':
+        root.style.setProperty('--top325', "-160"+ "px");
+        ball.style.top = "-160px"
+        ball.style.left = "0px";
+        removeCup("10");
+        break;
+      default:
+        break;
+    }
+
+    setTimeout(function(){
+        if(cupsOut.length == 10 && restartbuttonvisible == 1){
+            let restartBtn = document.createElement("BUTTON");
+            restartBtn.innerHTML = "Restart";
+            restartBtn.setAttribute("onclick","location.reload()");
+            restartBtn.setAttribute("id","restart");
+            document.body.appendChild(restartBtn);
+            restartbuttonvisible = 2;
+            ball.style.top = "0px";
+            ball.style.left = "0px";
+        }else{
+          reshot();
+            //let reshootBtn = document.createElement("BUTTON");
+            //reshootBtn.innerHTML = "Reshoot";
+            //reshootBtn.setAttribute("onclick","reshot()");
+            //reshootBtn.setAttribute("id","reshoot");
+            //document.body.appendChild(reshootBtn);
+        }
+    },1000);
+}
+
+//Cup entfernen bei Treffer
+function removeCup(cup){
+    let element = "cup".concat(cup);
+    let alreadyExists = cupsOut.includes(cup);
+
+    if(alreadyExists==false){
+        cupsOut.push(cup);
+    }
+    setTimeout(function(){
+ document.getElementById(element).classList.add("fadeAway");
+},1000);
+}
+
+
+function reshot(){
+    //document.getElementById("reshoot").remove();
+    ball.classList.remove("Shoot");
+    ball.style.top = "0px";
+    ball.style.left = "0px";
+
+    //root.style.setProperty('--top325', "0"+ "px");
+    //setTimeout(function(){
+    //    html.setAttribute("onclick", "shoot()");
+    //},1000);
+}
+
+
+
+// Cup Positionen + Toleranz
+//Cup 1: -20<topInt && topInt<20 && -125<leftInt && leftInt<-60
+//Cup 2: -20<topInt && topInt<20 && -40<leftInt && leftInt<40
+//Cup 3: -20<topInt && topInt<20 && 60<leftInt && leftInt<125
+//Cup 4: 60<topInt && topInt<100 && -90<leftInt && leftInt<-25
+//Cup 5: 60<topInt && topInt<100 && 15<leftInt && leftInt<80
+//Cup 6: 140<topInt && topInt<180 && -45<leftInt && leftInt<45