Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Memory mit Bestenliste

Memory mit Bestenliste

Einfaches HTML/CSS/JS Memory Spiel. Die Bestenliste ist mit PHP/ SQL erstellt und wird in einer Datenbank gespeichert Komplettes Game Downloaden Download-Archiv
Oder laden Sie sich eine bessere und größere Version von Github Code ansehen herunter .
DirektdownloadZum Download bei Github Nach dem Download einmal die index.php Datei aufrufen und über den Installations-Assistenten deine Datenbank Zugang eingeben und fertig ist das Memory Spiel.

Der hier verwendete Code

<!doctype html> <head> <title>Memory spiel</title> <style> #memorycontainer { display: flex; flex-direction: column; border: 2px solid black; width: 98%; max-width:800px; margin: 0 auto; overflow: hidden; flex-wrap: wrap; align-content: space-around; align-items: stretch; justify-content: space-evenly; } .infos { display: flex; /* max-width: 800px; */ flex-direction: row; margin: 10px; justify-content: space-evenly; align-items: center; } h1 { font-size:55px; margin:10px; text-align: center; } #container { margin: 0 auto; } ol { padding: 0; margin: 0; } li { padding: 0; margin: 10px; list-style: none; outline: solid; width: 18vw; height: 18vw; background:rgb(223 230 203); } img { width: 100%; height: 100%; } .info_boxen{ max-width:200px; width:40%; border:1px solid black; border-radius:10px; padding:10px; background:rgb(223 230 203); } ol { height: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: stretch; align-content: stretch; } #endbox { width: 50%; max-width: 300px; min-height: 250px; border: 2px solid red; border-radius: 10px; background: white; display: none; flex-direction: column; overflow: hidden; z-index:12; padding: 10px; position: fixed; top: 50%; left: 50%; padding:10px; transform: translate(-50% , -50%); flex-wrap: nowrap; justify-content: space-around; } #ende_h1 { text-decoration: underline; display: flex; margin: 0; padding: 0; text-align: center; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } #ende_text{ padding:0 10px; } #background{ position:fixed; top:0; right:0; bottom:0; left:0; display:none; z-index:10; width:100vw; height:100vh; background:rgba(0,0,0,0.6); } #ende_buttons{ display:flex; } #ende_buttons input{ flex:1; height:25px; } #sendebox{ display:none; flex-direction:column; } #sendebox label{ text-align:center; } #sendebox div{ display:flex; } #sendebox div input{ width:45%; padding:4px; display:flex; } #tabelle_bestenliste{ position:absolute; top:0; right:0; bottom:0; left:0; display:none; overflow: auto; z-index:10; width:100vw; height:100vh; background:rgba(0,0,0,0.6); } #tabelle_bestenliste table{ width: 90%; max-width: 900px; border: 2px solid black; background: white; overflow: scroll; z-index: 12; padding: 10px; position: absolute; top: 50px; left: calc(90vw - 85vw); padding: 10px; max-height: 70vh; } #tabelle_bestenliste th{ font-weight:900; } #tabelle_bestenliste td{ border-collapse:collapse; border:1px solid black; } #memoy_close_bestenliste{ position:absolute; right:0; top:0; text-align:center; width:30px; height:30px; background:red; color:white; font-size:27px; } #memoy_close_bestenliste:hover{ background:green; cursor:pointer; transition: all 500ms; } @media (max-width: 571px) { #ende_h1 { font-size: 25px; } li{ width:16vw; } } </style> <script src="/js_webseite/jquery.js"></script> </head> <body> <div class="column" id="memorycontainer"> <div id="tabelle_bestenliste"> <div id="memoy_close_bestenliste">X</div> <table> <tr> <th>Nr.</th> <th>Spiel</th> <th>>Name</th> <th>Datum</th> <th>Zeít</th> <th>Fehlver</th> <th>Treffer</th> </tr> <tbody id="listeinhalt"></tbody> </table> </div> <div id="background"></div> <div id="endbox"> <h1 id="ende_h1">Gewonnen</h1> <p id="ende_text"></p> <div id="ende_buttons"> <input type="button" id="ende_best" value="eintragen"> <input type="button" id="ende_no" value="Abrechen"> </div> <div id="sendebox"> <label>Dein Name</label> <div> <input type="text" id="memory_user"> <input type="button" id="absenden" value="Eintragen"> </div> </div> </div> <h1>CORONA MEMORY</h1> <div class="infos"> <div class="info_boxen" id="memory_timer">TIME</div> <input class="info_boxen" type="button" id="memory_bestenliste" value="HIGH SCORE"> </div> <div class="infos"> <span class="info_boxen" id="treff">Gesamt :</span> <span class="info_boxen" id="fehle">Fehler :</span> </div> <div id= "container"></div> <div class="row_start infos"> <input class="info_boxen" type="button" id="start" value="Start"> </div> </div> <script> var m_t=document.getElementById('memory_timer'); var m_tre=document.getElementById('treff'); var m_feh=document.getElementById('fehle'); var m_sen=document.getElementById('sendebox') var m_back=document.getElementById('background'); var m_end=document.getElementById('endbox'); var m_text=document.getElementById('ende_text'); var erstgame=true; var sendeopen=false; var timer,mi,se; var y=0; var fehler=0; var treffer=0; function game_start(){ var images = []; var gesamt_pare=8; for (var i = 0 ; i < gesamt_pare; i++) { var img = 'http://basti1012.bplaced.net/image/' + (i+1) + '.png'; images.push(img); images.push(img); } randomizeImages(); var output = "<ol>"; for (var i = 0; i < 16; i++) { output += "<li>"; output += "<img src = '" + images[i] + "'/>"; output += "</li>"; } output += "</ol>"; document.getElementById("container").innerHTML = output; $("img").hide(); var guess1 = ""; var guess2 = ""; var count = 0; $("li").click(function() { if ((count < 2) && ($(this).children("img").hasClass("face-up")) === false) { count++; $(this).children("img").show(); $(this).children("img").addClass("face-up"); if (count === 1 ) { guess1 = $(this).children("img").attr("src"); }else { guess2 = $(this).children("img").attr("src"); if (guess1 === guess2) { treffer++; $("li").children("img[src='" + guess2 + "']").addClass("match"); } else { fehler++; setTimeout(function() { $("img").not(".match").hide(); $("img").not(".match").removeClass("face-up"); }, 1000); } m_tre.innerHTML="Gesamt "+treffer+'/'+gesamt_pare; m_feh.innerHTML="Fehler "+fehler; count = 0; if(treffer>=gesamt_pare) { clearInterval(timer); m_back.style.display='block'; m_end.style.display='flex'; erstgame=false; $.ajax({ type: 'POST', data: {show:50}, url: '/php_website/abfragen.php', data: {treffer:treffer,fehler,fehler,zeit:y}, success: function(data){ if(data>100){ // m_text.innerHTML='Du bist auf Platz '+data+'<br>und auserhalb des sichtbaren bereichs'; }else{ m_text.innerHTML='Du bist auf Platz '+data+'<br>Möchtest du dich in de bestenliste eintrasgen'; } } }) } } } }); function randomizeImages(){ Array.prototype.randomize = function(){ var i = this.length, j, temp; while ( --i ){ j = Math.floor( Math.random() * (i - 1) ); temp = this[i]; this[i] = this[j]; this[j] = temp; } }; images.randomize(); } } document.getElementById('start').addEventListener('click',function(){ timer=setInterval(function(){ y++; mi=Math.floor((y/60)); se=Math.floor((y%60)); if(se<=9){ se='0'+se; } if(mi<=9){ mi='0'+mi; } m_t.innerHTML='Time: '+mi+':'+se; },1000) if(erstgame!=true){ m_back.style.display='none'; m_end.style.display='none'; y=0; fehler=0; treffer=0; } if(sendeopen!=true){ m_sen.style.display='false'; } game_start(); }) document.getElementById('ende_best').addEventListener('click',function(){ m_sen.style.display='block'; }) document.getElementById('absenden').addEventListener('click',function(){ m_sen.style.display='none'; sendeopen=false; console.log(document.getElementById('memory_user').value,fehler,treffer,y); $.ajax({ type: 'POST', url: '/php_website/eintragen.php', data: { treffer:treffer, fehler:fehler, name:document.getElementById('memory_user').value, zeit:y }, success: function(data1){ if(data1==1){ m_sen.style.display='none'; m_back.style.display='none'; m_end.style.display='none'; }else if(data1=='err'){ setTimeout(function(){ m_sen.style.display='none'; m_back.style.display='none'; m_end.style.display='none'; },4000) m_sen.innerHTML='<p style="color:red">Probleme mit der Datenbank<br>Versuchen sie es später nochmal</p>'; }else{ alert(data1) } } }) }) document.getElementById('ende_no').addEventListener('click',function(){ console.log(sendeopen); if(sendeopen!=true){ console.log(sendeopen+' behind if'); m_back.style.display='none'; m_end.style.display='none'; m_sen.style.display='none'; } }) m_tab=document.getElementById('tabelle_bestenliste'); document.getElementById('memory_bestenliste').addEventListener('click',function(){ $.ajax({ type: 'POST', url: '/php_website/abfragen.php', data: {show:100}, success: function(data2){ document.getElementById('listeinhalt').innerHTML=data2; } }) m_tab.style.display='flex'; }) document.getElementById('memoy_close_bestenliste').addEventListener('click',function(){ m_tab.style.display='none'; }) </script> </body> </html>