Ενας virtual παπατζης και το webStorage Api.
Καλησπερα και καλη χρονια! Μπολικη υγεια και κουραγιο για να ξεπερασουμε τα δυσκολα! Η αληθεια ειναι πως τον τελευταιο καιρο το εχω ριξει λιγο στο διαβασμα και δεν περισσευει ορεξη για να ανεβαζω κατι. Σημερα ομως βρηκα ενα μικρο κομματι κωδικα που εγραψα λιγο πριν τις γιορτες. Προκειται για ενα μικρο παιχνιδακι , με χαρτια. Ενας virtual παπατζης! Ο λογος για τον οποιο το εφτιαξα ηταν περισσοτερο για να μαθω καλυτερα το νεο χαρακτηριστικο της Html5 localStorage. Αν παρακολουθειτε την αναπτυξη της HTML5 σιγουρα θα γνωριζετε οτι τα χαρακτηριστικα localStorage και sessionStorage ερχονται για να μας απαλλαξουν μια και καλη απο τα Cookies. Τα cookies μας επετρεπαν να αποθηκευσουμε μεχρι 4k (δηλαδη 4096 bytes) στον υπολογιστη του χρηστη, κατι που ηταν καιρος να αλλαξει επιτελους! Τωρα με το νεο αυτο API εχουμε τη δυνατοτητα να αποθηκευουμε εως 5mb ανα domain!
Το sessionStorage κραταει τα δεδομενα που αποθηκευουμε μεσω της σελιδας στον υπολογιστη του επισκεπτη
μονο για οσο ειναι ανοιχτο το web page session. Σε αντιθεση με το localStorage που τα δεδομενα ειναι διαθεσιμα ακομη και μετα το κλεισιμο του browser.
Η χρηση τους ειναι πολυ απλη και γινεται ετσι:
sessionStorage.setItem(‘myKey’, ‘myValue’);
var myVar = sessionStorage.getItem(‘myKey’);
localStorage.setItem(‘myKey’, ‘myValue’);
var myVar = localStorage.getItem(‘myKey’);
Στον κωδικα του παιχνιδιου θα δειτε οτι αποθηκευω σε localStorage τους ποντους του παιχτη. Το κουμπακι start over επαναφερει το pageLoadCount στην αρχικη ρυθμιση. Μεσω Jquery προσθετω και αφαιρω κλασεις , δηλαδη το να δειχνει την πισω μερια του φυλλου ή την μπροστινη καθως και την επιλογη που κανει ο χρηστης. Η επιλογη του ρηγα γινεται μεσω της Math.random() και η στρογγυλοποιηση με την Math.floor(). Δειτε τον κωδικα και αν εχετε καποια απορια γραψτε την στα comments. Να πω ομως οτι λογω ελλειψης χρονου δεν προλαβα να κανω debugging, οποτε το μονο που μπορω να πω ειναι οτι παιζει σε Firefox τελευταια εκδοση. Καποια στιγμη θα το ξανακοιταξω αλλα μεχρι τοτε οποιος θελει μπορει να διορθωσει bugs. Nα τονισω οτι η HTML5 ειναι draft ακομα οποτε τιποτα δεν ειναι σιγουρο περι του webStorage. Γιαυτο πιθανον να μην σας δουλευει σε καποιους browser. Ισως στο επομενο διαστημα να αλλαξουν τα standards για το συγκεκριμενο feature οποτε αν σας ενδιαφερει αναλυτικοτερα μπορειτε να διαβασετε εδω: http://dev.w3.org/html5/webstorage/
Μπορειτε να το παιξετε εδω. Απλα επιλεγετε το χαρτι που πιστευτε οτι ειναι ο παπας και μετα το Go. Thats all! Αν θελετε να πειραματιστειτε στο pc σας κατεβαστε το αρχειο στο τελος του post που περιεχει τον κωδικα και τα images.
<!DOCTYPE html>
<html>
<!-- Simple Card game by http://www.xDev.gr -->
<head>
<title>Edo papas ekei papas, pou einai o papas?</title>
<style>
.button{
background: white url('images.jpg') no-repeat top;
border-style:none;
width: 40px;
height: 40px;
color:white;}
.ntama{
background: white url('queen.jpg') no-repeat top;
border-style:none;
width: 132px;
height: 200px;
color:white;}
.rigas{
background: white url('king.png') no-repeat top;
border-style:none;
width: 132px;
height: 200px;
color:white;}
.backside{
background: white url('backside.jpg') no-repeat top;
border-style:none;
width: 132px;
height: 200px;
color:white;}
</style>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<script type="text/javascript">
var choice;
function firstone() {choice = "one";}
function secondone() {choice = "two";}
function thirdone() {choice = "three";}
if (!localStorage.pageCounter)
localStorage.setItem('pageLoadCount');
function fill() {
localStorage.setItem('pageLoadCount', 20);
window.location.reload();
}
function checkGuess() {
var guess = choice;
var answers = ["one", "two", "three"];
var index = Math.floor(Math.random() * answers.length);
if (guess == answers[index]) {
if (index == 0) {
$('#Button2').removeClass('backside').addClass('rigas');
$('#Button3').removeClass('backside').addClass('ntama');
$('#Button4').removeClass('backside').addClass('ntama');
}
if (index == 1) {
$('#Button2').removeClass('backside').addClass('ntama');
$('#Button3').removeClass('backside').addClass('rigas');
$('#Button4').removeClass('backside').addClass('ntama');
}
if (index == 2) {
$('#Button2').removeClass('backside').addClass('ntama');
$('#Button3').removeClass('backside').addClass('ntama');
$('#Button4').removeClass('backside').addClass('rigas');
}
alert("You won! It was in " + answers[index]);
localStorage.setItem('pageLoadCount', parseInt(localStorage.pageLoadCount) + 5);
}
else {
if (index == 0) {
$('#Button2').removeClass('backside').addClass('rigas');
$('#Button3').removeClass('backside').addClass('ntama');
$('#Button4').removeClass('backside').addClass('ntama');
}
if (index == 1) {
$('#Button2').removeClass('backside').addClass('ntama');
$('#Button3').removeClass('backside').addClass('rigas');
$('#Button4').removeClass('backside').addClass('ntama');
}
if (index == 2) {
$('#Button2').removeClass('backside').addClass('ntama');
$('#Button3').removeClass('backside').addClass('ntama');
$('#Button4').removeClass('backside').addClass('rigas');
}
alert("You loose! It was in " + answers[index]);
localStorage.setItem('pageLoadCount', parseInt(localStorage.pageLoadCount) - 5);
}
window.location.reload();
}
</script>
<div align="center" name="wrapper" style="overflow:hidden;">
<div style="float:left; width:200px;"><input id="Button2" type="button" value="button" class="backside" onclick="firstone()"/></div>
<div style="float:left; width:200px;"><input id="Button3" type="button" value="button" class="backside" onclick="secondone()"/></div>
<div style="float:left; width:200px;"><input id="Button4" type="button" value="button" class="backside" onclick="thirdone()"/></div>
</div><br/>
<div align="center" style="float:left; width:600px;"><input id="Button1" type="button" class="button" onclick="checkGuess()" /></div>
<br/><br/>
<div>
<p>You have: <script type="text/javascript">document.write(localStorage.pageLoadCount);</script> euro left.</p>
<input id="Button5" type="button" value="Start over" onclick="fill()" />
</div>
</body>
</html>