goldma74993
/
Beerpong
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge of Beerpong-Youtube and Tic-Tac-Toe

master
Lukas Doerr 3 years ago
parent
774723cd8e
commit
eeeaa6ae7c
12 changed files with 312 additions and 110 deletions
Split View Show Diff Stats
  1. BIN
      Output/public/bierbankgarnitur_ausg.png
  2. 120
    75
      Output/public/css/style.css
  3. BIN
      Output/public/cup.png
  4. 159
    0
      Output/public/js/script.js
  5. BIN
      Output/routes/bierbankgarnitur_ausg.png
  6. BIN
      Output/routes/cup.png
  7. 1
    1
      Output/routes/index.js
  8. BIN
      Output/views/bierbankgarnitur_ausg.png
  9. BIN
      Output/views/cup.png
  10. 0
    6
      Output/views/error.jade
  11. 21
    18
      Output/views/index.jade
  12. 11
    10
      Output/views/layout.jade

BIN
Output/public/bierbankgarnitur_ausg.png View File


+ 120
- 75
Output/public/css/style.css View File

@@ -1,97 +1,142 @@
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(Lato.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
:root{
--top:0px;
--top325:325px;
}
*{
padding: 0;
margin: 0;
outline: none;
}
body{
overflow-x: hidden;
display: block;
}
ellipse{
fill:hsl(0, 0%, 90%);
stroke: black;
stroke-weight: 1px;
}
#reshoot, #restart{
margin: 15rem auto;
font-size: 2rem;
padding: 1rem 2rem;
border-radius: 0.3rem;
display: block;
color: black;
border: 3px solid black;
background-color: yellow;
z-index: 10;

}
#reshoot:hover, #restart:hover{
cursor: pointer;
background-color: black;
color: yellow;
z-index:
}

@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand'), local('Quicksand'), url(Quicksand.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
#time {
margin: auto;
display: block;
text-align: center;
font-size: 3rem;
font-family: sans-serif;
font-weight: bold;
}

::selection {
background: transparent;
}

body {
background: #A5DAD2;
font-family: Quicksand, san-serif;
.cups{
margin: auto;
width: 1100px;
}

.bgWhite {
background: #F5F2F5;
.tisch{
position: absolute;
margin-top: 0rem;
margin-left: -440px;
width: 1090px;
z-index: -1;
}

.colorWhite {
color: #F5F2F5 !important;
.cup{
width: 100px;
position: relative;
}

.bgDark {
background: #516D66;
.row1{
margin-top: 00rem;
margin-left: 350px;
}
.colorDark {
color: #516D66;
.row2{
margin-top: -10rem;
margin-left: 400px;
}
.bgRed {
background: #F286A0;
.row3{
margin-top: -10rem;
margin-left: 450px;
}
.colorRed {
color: #F286A0 !important;
.row4{
margin-top: -10rem;
margin-left: 500px;
}

.gameBoard, .scoreBoard {
font-weight: 400;
.cup5{
top: 5rem;
}

.gameBoard {
width: 100%;
.cup6{
top: 5rem;
}

.gameBoard td {
text-align: center;
color: #516D66;
font-size: 8em;
cursor: pointer;
transition: all 0.5s;
.cup7{
top: 5rem;
}

.gameCell {
width: 181px;
height: 181px;
.cup8{
top: 10rem;
}

.gameCell:not(.marked):hover {
box-shadow: 0 0 42px #555;
.cup9{
top: 10rem;
}

.gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
box-shadow: none !important;
cursor: default;
.cup10{
top: 15rem;
}
.scoreBoard {
color: #516D66;
height: 100px;
.ball{
width: 50px;
height: 50px;
position: relative;
}

.boardCol {
width: 5px;
cursor: default !important;
.shooter{
position: relative;
top: 250px;
left: 125px;
width: 300px;
margin: auto;
}

.boardRow {
height: 5px;
cursor: default !important;
.shootX{
animation: shootX 1s infinite linear;
}

.scoreBoard span.active {
border-bottom: 4px solid #F286A0;
@keyframes shootX{
0%{left:0px}
25%{left:125px}
50%{left:0px}
75%{left:-125px}
100%{left:0px}
}
.shootY{
animation: shootY 1s infinite linear;
}
@keyframes shootY{
0%{top:0px}
50%{top:175px}
100%{top:0px}
}
.fadeAway{
animation: fadeAway 1s;
opacity: 0
}
@keyframes fadeAway{
0%{opacity: 1}
100%{opacity: 0}
}
.Shoot{
animation: Shoot 1s;
animation-timing-function: ease;
}
@keyframes Shoot{
0%{top: var(--top)}
100%{top: var(--top325)}
}

BIN
Output/public/cup.png View File


+ 159
- 0
Output/public/js/script.js View File

@@ -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

BIN
Output/routes/bierbankgarnitur_ausg.png View File


BIN
Output/routes/cup.png View File


+ 1
- 1
Output/routes/index.js View File

@@ -3,7 +3,7 @@ var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Tic Tac Toe' });
res.render('index', { title: 'Beer Pong' });
});

module.exports = router;

BIN
Output/views/bierbankgarnitur_ausg.png View File


BIN
Output/views/cup.png View File


+ 0
- 6
Output/views/error.jade View File

@@ -1,6 +0,0 @@
extends layout

block content
h1= message
h2= error.status
pre #{error.stack}

+ 21
- 18
Output/views/index.jade View File

@@ -1,20 +1,23 @@
extends layout
extends layout

block content
.container
.row
.col-sm-3.col-sm-offset-3.scoreBoard
h1
span#p1Score
.col-sm-3.scoreBoard
h1.text-right
span#p2Score
.row
.col-sm-6.col-sm-offset-3#gameBoard
h1.text-center.colorDark Enter your name
.panel.panel-danger
.panel-body
.input-group
input#nickname.form-control.input-lg( autofocus )
span.input-group-btn
button#startBtn.btn.btn-lg.btn-danger PLAY!
.cups
.tisch
img(src='bierbankgarnitur_ausg.png')
.row.row1
img#cup1.cup.cup1(src='cup.png' alt='')
img#cup2.cup.cup2(src='cup.png' alt='')
img#cup3.cup.cup3(src='cup.png' alt='')
img#cup4.cup.cup4(src='cup.png' alt='')
.row.row2
img#cup5.cup.cup5(src='cup.png' alt='')
img#cup6.cup.cup6(src='cup.png' alt='')
img#cup7.cup.cup7(src='cup.png' alt='')
.row.row3
img#cup8.cup.cup8(src='cup.png' alt='')
img#cup9.cup.cup9(src='cup.png' alt='')
.row.row4
img#cup10.cup.cup10(src='cup.png' alt='')
#shooter.shooter
svg#ball.ball
ellipse(cx='25' cy='25' rx='24' ry='24')

+ 11
- 10
Output/views/layout.jade View File

@@ -1,13 +1,14 @@
doctype html
html( lang="en" )
head
meta( charset='utf-8' )
meta( http-equiv='X-UA-Compatible', content='IE=edge' )
meta( name='viewport', content='width=device-width, initial-scale=1.0' )
title= title
link(rel='stylesheet', href='/css/bootstrap.min.css')
link(rel='stylesheet', href='/css/style.css')
html(lang='en' onkeypress='shoot(event)')
head
meta(charset='UTF-8')
meta( http-equiv='X-UA-Compatible', content='IE=edge' )
meta(name='viewport' content='width=device-width, initial-scale=1.0')
title= title
link(rel='stylesheet' href='/css/style.css')
link(rel='icon' href='cup.png')

body
block content
script(src='/js/Board.js')
script(src='/js/app.js')
script(src='/js/index.js')
script(src='/js/script.js')

Write Preview
Loading…
Cancel
Save