Αναγκαστικα κλεισμενος μεσα σε ενα αεροδρομιο και εχωντας αρκετο χρονο μπροστα μου μεχρι να ερθει η καθυστερημενη πτηση σκεφτηκα οτι αντι να περασω το χρονο μου βλεπωντας στο φορητο ταινια να φτιαξω ενα μικρο παιχνιδακι. Συνηθως περναει γρηγορα η ωρα οταν γραφω κωδικα και αυτο ειναι κατι που το ηθελα εκεινη τη στιγμη! Ετσι βγηκε το παρακατω action παιχνιδι το οποιο ειναι πολυ ευκολο στην κατασκευη του αφου ειναι λιγοτερο απο 60 γραμμες κωδικα. Και μαλιστα απλου, κατανοητου javascript κωδικα με λιγο jquery για ευκολια καθως και λιγο css3 για ομορφια. Ας δουμε τον κωδικα και θα εξηγησω παρακατω τι και πως.
<!DOCTYPE html>
<html>
<head><title>Hit the baloon! Simple action game. http://www.xdev.gr</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
@font-face{
font-family:SnigletRegular;
src: url('SnigletRegular.otf');
}
body{font-family:SnigletRegular; color:blue;}
</style>
</head>
<body>
<div style="width: 500px; height: 550px; border: 1px solid; margin: auto; background-image: url('background.jpg');">
<div id="timeinsecs" style="overflow: hidden;">
<div style="float: left; width: 100px;">Time left:</div>
<div style="float: left; width: 30px;" id="time"></div>
<input id="clicked" size="1" style="float: right; width:30px;border: none" />
<div style="float: right; width: 60px;">Clicks:</div>
</div>
<div id="out" style="width: 500px; height: 530px; border: 0px solid; margin: auto;">
<div id="in" style="width: 50px; height: 50px; background-image: url('balloon.gif')"></div>
</div>
</div>
<script type="text/javascript">
function game() {
clicks = 0;
$('div#in').click(function () { $(this).fadeOut('fast'); $("input#clicked").val(clicks++); });
function show() {
var randomX = Math.ceil(Math.random() * 350);
var randomY = Math.ceil(Math.random() * 450);
$('div#in').show().css({ 'margin-top': randomX, 'margin-left': randomY });
}
function reset() {
$('div#in').hide();
}
setInterval(show, 1500);
setInterval(reset, 2200);
}
game();
var count = 60;
var interv = setInterval(update, 1000);
function update() {
count--;
$('#time').html("<div>" + count + "</div>");
if (count == 0) {clearInterval(interv);}
}
setTimeout(function () { $('#in,#timeinsecs').remove(); var scr= $('#clicked').val(); $('#out').html("<div style='position:absolute; top:180px; left:42%;'><h2>Your score:" + clicks + "</h2></div>"); }, 60000);
</script>
</body>
</html>
Οπως βλεπετε λοιπον εχουμε ενα απλο markup με μερικα divs. Μεσω css3 εχω δωσει ενα διαφορετικο απο οτι τα συνηθισμενα font στα γραμματα. Αυτο γινεται μεσω του @font-face. Στη συνεχεια φτιαχνω δυο functions, μια που εμφανιζει ενα div μεσω της .show() και μια που το κρυβει με το .hide(). Οι συντεταγμενες για το που θα εμφανιστει το div επιλεγονται τυχαια, μεσω της Math.random(). Επειτα αυτο που εκανα ειναι να αποθηκευω σε μια μεταβλητη ποσα κλικ εχουν γινει πανω στο div. Οποτε αυτη η μεταβλητη ειναι το σκορ. Επισης δημιουργησα ακομη μια function που μετα απο 60 δευτερολεπτα τερματιζει το παιχνιδι. Και τελος μεσω της setInterval εμφανιζω ή κρυβω το div με βαση καποιον χρονο που εγω ορισα. Μπορειτε να κατεβασετε το κωδικα απο το παρακατω αρχειο για να πειραματιστειτε μονοι σας. Οσοι θελουν μπορουν να το παιξουν online εδω.