// Vollbild für die versch. Browser-Typen function VollbildStarten(id) { var elemID = document.getElementById(id); var elem = document.documentElement; if(elem.requestFullscreen) { // neuste Browser (Bsp. Edge) // Element wird auf Vollbild vergrössert! elem.requestFullscreen(); } else if(elemID.msRequestFullscreen) { // Internet Explorer // Element wird nicht zentriert oder vergrössert elemID.msRequestFullscreen(); } else if(elem.mozRequestFullScreen) { // Firefox elem.mozRequestFullScreen(); } else if(elem.webkitRequestFullscreen) { // Webkit Browser (Google & Opera) // Element wird horizonal und vertikal zentriert, nicht vergrössert elem.webkitRequestFullscreen(); } } // Vollbild schliessen function VollbildBeenden(id) { var elemID = document.getElementById(id); if(document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // Elastisches Scrollen deaktivieren function scrollDeaktivieren() { $(document).bind("touchmove", function(event) { event.preventDefault(); }); } // Screen-Lock (Verhindern, dass Viewport bei Drehen des Geräts auch gedreht wird function nichtDrehen() { screen.lockOrientationUniversal = sreen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; screen.lockOrientationUniversal("portrait"); } // Geräte-Orientierung ermitteln und wenn nötig Document wieder auf Portrait (um 90deg) drehen function immerHochformat() { var winkel = 0-window.orientation; $("#spiel").css( {"-webkit-transform":"rotate(90deg)", "-moz-transform":"rotate(90deg)", "-ms-transform":"rotate(90deg)", "transform":"rotate(90deg)" }); } /*$( window ).on("orientationchange", function(e) { nichtDrehen(); });*/
html, body { font-family: Arial, Helvetica, sans-serif; font-size: 30px; width: 100%; height: 100%; margin: 0; padding: 0; background-color: black; color: white; background-image: url(schachbrett.jpg); background-attachment: fixed; background-position: top left; background-repeat: no-repeat; background-size: cover; } #start { display: block; width: 100%; text-align: center; padding-top: 5%; } #logo { font-size: 1.2em; font-weight: bold; font-variant: small-caps; } #anzMinuten { background-color: #006699; border: 0.1em solid white; height: 1em; width: 1.7em; color: white; font-size: 1em; text-align:center; } #spiel { display: none; width: 100%; height: 100%; text-align: center; background-image: url(schachbrett.jpg); background-attachment: fixed; background-position: top left; background-repeat: no-repeat; background-size: cover; } #zentriert { position: absolute; width: 100%; text-align: center; top: 50%; margin-top:-50px; } #rechts { position: absolute; top: 50%; right: 1%; margin-top:-35px; right: 5px; } #wechselBtn:hover, #pauseBtn:hover, #startBtn:hover { cursor: pointer; } #zeitOben, #zeitUnten { font-weight: bold; font-size: 1.7em; background-color: black; } #zeitOben { position: absolute; width: 100%; top: 0px; transform: rotateZ(180deg); } #zeitUnten { position: absolute; width: 100%; bottom: 0px; } /**** Info-Anzeige ****/ #transparent { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000000; opacity: 0.8; filter: alpha(opacity=80); } #info { display: none; position: fixed; top: 35%; left: 5%; width: 90%; height: 30%; text-align: center; background-color: black; border: 0.1em solid white; } .infoBtn { display: inline-block; font-size: 0.8em; color:#0099CC; border: 0.05em solid #09C; width: 40%; } .infoBtn:hover { cursor: pointer; } #weiterBtn { margin-right: 10%; } /**********************/
// globale Variablen var startZeit = 0; var zeitOben = 0; var zeitUnten = 0; var spieler1Aktiv = true; var anzMinuten = 0; var spielEnde = false; // Funktion um die Sekunden in "Minuten : Sekunden" auszugeben function zeitStringErstellen(sekTotal) { minuten = parseInt(sekTotal / 60); sekunden = parseInt(sekTotal % 60); if (sekunden < 10) { sekundenString = "0" + sekunden; } else { sekundenString = sekunden; } if (minuten < 10) { minutenString = "0" + minuten; } else { minutenString = minuten; } return minutenString + " : " + sekundenString; } function SpielFortsetzen() { $("#transparent").hide(); $("#info").hide(); if (spieler1Aktiv == true){ timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); if (zeitUnten==0) { clearInterval(timer); $("#zeitUnten").css("background-color","#F30"); spielEnde = true; } },1000); } else { timer = setInterval(function () { zeitOben--; $("#zeitOben").text(zeitStringErstellen(zeitOben)); if (zeitOben==0) { clearInterval(timer); $("#zeitOben").css("background-color","#F30"); spielEnde = true; } },1000); } } function SpielBeenden() { VollbildBeenden("spiel"); $("#transparent").hide(); $("#info").hide(); $("#spiel").hide(); $("#start").show(); } $(document).ready(function(e) { // Spiel starten $("#startBtn").click( function() { $("#start").hide(); VollbildStarten("spiel"); scrollDeaktivieren(); $("#spiel").show(); anzMinuten = $("#anzMinuten").val(); startZeit = anzMinuten * 60; zeitOben = startZeit; zeitUnten = startZeit; $("#zeitOben").text(zeitStringErstellen(zeitOben)); $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); $("#zeitUnten").css("background-color","#099"); timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); },1000); }); // Spieler-Wechsel $("#wechselBtn").click( function() { if (spielEnde != true) { clearInterval(timer); if (spieler1Aktiv == true){ $("#zeitUnten").css("background-color","#000"); $("#zeitOben").css("background-color","#099"); timer = setInterval(function () { zeitOben--; $("#zeitOben").text(zeitStringErstellen(zeitOben)); if (zeitOben==0) { clearInterval(timer); $("#zeitOben").css("background-color","#F30"); spielEnde = true; } },1000); spieler1Aktiv = false; } else { $("#zeitUnten").css("background-color","#099"); $("#zeitOben").css("background-color","#000"); timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); if (zeitUnten==0) { clearInterval(timer); $("#zeitUnten").css("background-color","#F30"); spielEnde = true; } },1000); spieler1Aktiv = true; } } }); // Pause $("#pauseBtn").click( function() { clearInterval(timer); $("#transparent").show(); $("#info").html("Pauseweiterbeenden").show(); }); });
// globale Variablen var startZeit = 0; var zeitOben = 0; var zeitUnten = 0; var spieler1Aktiv = true; var anzMinuten = 0; var spielEnde = false; // Funktion um die Sekunden in "Minuten : Sekunden" auszugeben function zeitStringErstellen(sekTotal) { minuten = parseInt(sekTotal / 60); sekunden = parseInt(sekTotal % 60); if (sekunden < 10) { sekundenString = "0" + sekunden; } else { sekundenString = sekunden; } if (minuten < 10) { minutenString = "0" + minuten; } else { minutenString = minuten; } return minutenString + " : " + sekundenString; } function SpielFortsetzen() { $("#transparent").hide(); $("#info").hide(); if (spieler1Aktiv == true){ timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); if (zeitUnten==0) { clearInterval(timer); $("#zeitUnten").css("background-color","#F30"); spielEnde = true; } },10); } else { timer = setInterval(function () { zeitOben--; $("#zeitOben").text(zeitStringErstellen(zeitOben)); if (zeitOben==0) { clearInterval(timer); $("#zeitOben").css("background-color","#F30"); spielEnde = true; } },1000); } } function SpielBeenden() { VollbildBeenden("spiel"); $("#transparent").hide(); $("#info").hide(); $("#spiel").hide(); $("#start").show(); } $(document).ready(function(e) { // Spiel starten $("#startBtn").click( function() { $("#start").hide(); VollbildStarten("spiel"); scrollDeaktivieren(); $("#spiel").show(); anzMinuten = $("#anzMinuten").val(); startZeit = anzMinuten * 60; zeitOben = startZeit; zeitUnten = startZeit; $("#zeitOben").text(zeitStringErstellen(zeitOben)); $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); $("#zeitUnten").css("background-color","#099"); timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); },1000); }); // Spieler-Wechsel $("#wechselBtn").click( function() { if (spielEnde != true) { clearInterval(timer); if (spieler1Aktiv == true){ $("#zeitUnten").css("background-color","#000"); $("#zeitOben").css("background-color","#099"); timer = setInterval(function () { zeitOben--; $("#zeitOben").text(zeitStringErstellen(zeitOben)); if (zeitOben==0) { clearInterval(timer); $("#zeitOben").css("background-color","#F30"); spielEnde = true; } },1000); spieler1Aktiv = false; } else { $("#zeitUnten").css("background-color","#099"); $("#zeitOben").css("background-color","#000"); timer = setInterval(function () { zeitUnten--; $("#zeitUnten").text(zeitStringErstellen(zeitUnten)); if (zeitUnten==0) { clearInterval(timer); $("#zeitUnten").css("background-color","#F30"); spielEnde = true; } },1000); spieler1Aktiv = true; } } }); // Pause $("#pauseBtn").click( function() { clearInterval(timer); $("#transparent").show(); $("#info").html("Pauseweiterbeenden").show(); }); });