:: Buchempfehlung ::

Kackrim · #1 25.11.2015, 15:00:41

Hallo alle miteinander :D

ich versuche grad ein Spiel in JavaScript zu schreiben. Soweit funktioniert auch alles super.
Lediglich eine Liste mit den 5 besten Spielern Fehlt noch. Ich denke das ich JSON und MYSQL brauchen werde. Habe auch ein wenig Ahnung von beidem.
Ich erwarte nicht das mir jemand die Arbeit abnimmt, eher will ich Tips wie ich es anstellen soll bzw. wo ich mich informieren muss um den Highscore zu bewerkstelligen.

Anbei der Code zu dem Spiel:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Kronkorkenspiel </title>
<script type="text/javascript">



var questions = [
	['http://i.colnect.net/images/b/335/157/Beck--s.jpg','DE'],
	['http://i.colnect.net/images/b/334/229/Corona-Extra.jpg','ME'],
	['https://www.hood.de/img1/big/2563/25637138.jpg','NL'],
	
	  
];
var qNo = 0;
var correct = 0;
var cnt = 0;

function NextQuestion(response) {
  if ((qNo < questions.length) && (response == questions[qNo][1])) { correct++; }
  document.getElementById('score').innerHTML 
    = 'Du hast '+correct+' Richtige';
  qNo++;
  if (qNo < questions.length) { document.getElementById('Pic').src = questions[qNo][0]; cnt++; }
					     else { alert('Quiz is done'); }
}
onload = function() {
 document.getElementById('Pic').src = questions[0][0];
}

</script>

</head>
<body>
<body bgcolor="white">
<div align="center">
<h1>Kronkorken Spiel</h1>
<img src="" id="Pic" height="200" width="250">
<p>  
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Flag_of_Germany_(3-2_aspect_ratio).svg/2000px-Flag_of_Germany_(3-2_aspect_ratio).svg.png" width="100" height="66" onclick="NextQuestion('DE')">
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Flag_of_Mexico.svg/2000px-Flag_of_Mexico.svg.png" width="100" height="66" onclick="NextQuestion('ME')">
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg" width="100" height="66" onclick="NextQuestion('NL')">
 
<p>Deine Punktzahl: <br><span id="score"></span>
</div>
</body>
</html>

**vt1816** · #2 25.11.2015, 16:40:33

Hallo und willkommen hier im Forum.

Was man doch für nette Hausaufgaben an so einer Fachhochschule bekommt. ;-)

Wo und wie erfasst Du Deine Mitspieler?
Wo und wie hast Du zzt. Deine Scores abgelegt?
Textdatei oder Datenbanktabelle?

Kackrim · #3 01.12.2015, 07:44:06

Zurzeut habe ich meine Mitspieler noch gar nicht gespeichert. Die Frage wurde gestellt bevor ich versucht habe eine Highscoreliste anzulegen.

Ich bin in Internet fündig geworden allerdigns funktioniert es nicht ganz.

Ich glaube der Fehler liegt irgendwie ab z. 65 ff wenn die Highscoreliste erstellt wird.

Es kann gut sein das da was fehlt und man es nachtragen muss. JS ist halt nicht die Programmiersprache meines Vertrauens aber mit Java und Visual Basic lassen sich halt keine Web-Applicationen schreiben :/.

Hier meine Internetquelle: http://stevesohcot.com/tech-lessons-...demonstration/

Und mein verwurstelter Code:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Kronkorkenspiel </title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="json2.js"></script>

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=228912


var questions = [
	['http://i.colnect.net/images/b/335/157/Beck--s.jpg','DE'],
	['http://i.colnect.net/images/b/334/229/Corona-Extra.jpg','ME'],
	['https://www.hood.de/img1/big/2563/25637138.jpg','NL']
	
	  // Note: no comma after last entry
];
var qNo = 0;
var correct = 0;
var cnt = 0;
var arrHighScores = [];
arrHighScores.push( new objScore('2', '30') );
console-log(arrHighScores);



function NextQuestion(response) {
  if ((qNo < questions.length) && (response == questions[qNo][1])) { correct++; }
  document.getElementById('score').innerHTML 
    = 'Du hast '+correct+' Richtige';
  qNo++;
  if (qNo < questions.length) { document.getElementById('Pic').src = questions[qNo][0]; cnt++; }
					     else { alert('Quiz is done'); }
}
onload = function() {
 document.getElementById('Pic').src = questions[0][0];
}

function objScore(richtige, seconds){
this.richtige = correct;
this.seconds = seconds
};

function SetHighScores() {
var myJsonString = JSON.stringify(arrHighScores);
localStorage.HighScores = myJsonString;
}


function RetrieveHighScores() {
// store in a local variable, incase null
var RawData = localStorage.HighScores;
// only process if not null
if (RawData != null) {
var HighScoresStored = JSON.parse(RawData);
arrHighScores = []; // reset
$.each(HighScoresStored, function(i, obj) {
arrHighScores.push( new objScore(obj.richtige, obj.seconds) );
});
}
}

funktion AddHighScore() {

RetrieveHighScores();

var Richtige = $('#richtige').val();
var Seconds = $('#seconds').val();

arrHighScores.push( new objScore(Richtige, Seconds));
console.log(arrHighScores);

arrHighScores.sort(funktion(a,b){return a.richtige-b.richtige});

SetHighScores();

ShowHighScore Values();

}

funktion ShowHighScoreValue () {

RetrieveHighScores();

$('#array_contents').html('High Scores:');

$.each(arrHighScores, funktion(i,obj){

$('#array_contents').append('<br/>' + obj.richtige + ' - ' +obj.seconds);
});
}

function ClearLocalStorage() {

localStorage.clear();
arrHighScores = [];

}

</script>

</head>
<body>
<body bgcolor="white">
<div align="center">
<h1>Kronkorken Spiel</h1>
<img src="" id="Pic" height="200" width="250">
<p>  
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Flag_of_Germany_(3-2_aspect_ratio).svg/2000px-Flag_of_Germany_(3-2_aspect_ratio).svg.png" width="100" height="66" onclick="NextQuestion('DE')">
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Flag_of_Mexico.svg/2000px-Flag_of_Mexico.svg.png" width="100" height="66" onclick="NextQuestion('ME')">
<input type="image" src="https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg" width="100" height="66" onclick="NextQuestion('NL')">
 
<p>Deine Punktzahl: <br><span id="score"></span>
</div>

<h2>(Arrays, Objects, JSON, HTML 5 local storage)</h2>
<input type="button" value="Show High Scores" onclick="ShowHighScoreValues();" />
<input type="button" value="Clear" onclick="ClearLocalStorage();" />
<hr>

<br />Richtige: <input type="text" name="richtige" id="richtige" value="correct" />
<br />Seconds: <input type="text" name="seconds" id="seconds" value="45" />
<div id="array_contents"></div>

</body>
</html>

Kackrim · #4 01.12.2015, 10:31:59

Okay hab mich ein bisschen schlau gemacht. Der vorherige Beitrag hatte den komplett falschen Ansatz.

So, wenn es geklappt hätte, wird der Score in LoacalStorage gespeichert. Ich brauch etwas was direkt auf dem Server speichert.

Wenn ich weiterkommen, oder eher auch nicht, dann melde ich mich wieder :D

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!