Μεταβλητές

Μπορούν να αποθηκεύσουν και χρησιμοποιηθούν ώς τιμές.

Δώσε τους ονόματα για να θυμάσε τι κάνουν:
let hoursOnPhone = 16
hoursOnPhone = hoursOnPhone + 2
const hoursToSleep = 24 - hoursOnPhone

Πίνακες

Είναι απλά λίστες με τιμές. Μπορείς να τα αποθηκεύσετε σε μεταβλητες και έχουν μέγεθος.

let love = ["cake", "donut", "pie"]
love[1] = "ice cream"
love.length


Αντικείμενα

Έχουν ιδιότητες και δικές τους συναρτήσεις.

let myself = {name: "Melina", age: 16}
myself.age = 17
myself.name.length
myself.name.substring(2)


Έλεγχοι

Τρέξε κώδικα μόνο όταν πρέπει.

let x = 3
if (x * 2 + 7 > 12) {
  x = 4
}


Επαναλήψεις

Τρέξε ένα κομμάτι κώδικα πολλές φορές.

let talking = ""
for (let i = 0; i < 5; i++) {
  talking = talking + "blah "
}


repl.it

Εκεί γράφουμε και παίζουμε.

Θα χρησιμοποιήσουμε το site repl.it όπου μπορείται να προγραμματίζετε online και να σώζετε τις δημιουργίες σας. Πηγαίνετε σε αυτό το link και κανετε “fork” για να φτιάξετε το δικό σας αντίγραφο.

Τώρα πατήστε το link στα δεξιά και παίξτε το παιχνίδι.

Παιχνίδι στο web

Ένα παιχνίδι στο web είναι απλά μιά σελίδα HTML η οποία αποτελείται από από ένα από κεντρικό αρχείο HTML το οποίο φωρτόνει ένα αρχείο στυλ CSS όπου μπορούμε να καθαρίσουμε την εμφάνιση του παιχνιδιού, και το αρχείο με τον κώδικα javascript πού υλοποιεί την λειτουργία του.

CSS

Ας ξεκινήσουμε με το αρχείο CSS. Έχει πολλές παραμέτρους που καθορίζουν τα χρώματα και το μέγεθος από τα τετραγωνάκια. Δοκιμάστε να το αλλάξετε και πατήστε επαναφόρτωση. Δείτε το σχόλιο πάνω από την γραμμή color: transparent”. Αλλάξτε και δείτε τι γίνεται. Ναι η πίνακας έχει τα πάντα πάνω από την αρχή που παίζουμε απλά το κείμενο έχει διαφανές χρώμα και είναι αόρατο!

Javascript

Τώρα ας πάμε στο κομμάτι του κώδικα javascript. Όπως μπορείτε να δείτε υπάρχουν πολλά σχόλια που εξηγούν κάθε κομμάτι. Μπορείτε να αντιγράψετε κάθε κομμάτι κώδικα με copy paste στην κονσόλα προγραμματιστή, να το τρέξετε και να δείτε τι κάνει. Δείτε την μεταβλητή mineSize, αλλάξτε την και δείτε τι γίνεται. Τώρα κοιτάξτε στην συνάρτηση putInTheBombs και την γραμμή putInTheBombs(15). Μπορείτε να καταλάβετε τί κάνει? Τι νομίζετε ότι θα γίνει αν αλλάξετε το 15 με 0 ή με 100?

Διαλέξτε Emoji

Παρακάτω μπορείτε να δείτε την συνάρτηση που κατασκευάζει τα στοιχεία HTML για τα τετράγωνα κουμπάκια του πίνακα. Είδατε ότι χρησιμοποιούμε emoji γιά τις βόμβες? Τα emojis είναι κόλλημα σωστά? Βρείτε ένα άλλο emoji και χρησιμοποιήστε το αντί για την βόμβα.

Ανοίγοντας άδεια

Μετά κοιτάξτε την συνάρτηση reveal πού καλείται όποτε πατάμε σε ένα τετραγωνάκι. Είδατε ότι μπορεί να καλέσει τον εαυτό της κάποιες φορές? Αυτό γίνεται όταν πάταμε σε ένα άδειο τετραγωνάκι και όλα τά άδεια γύρω του ανοίγουν και αυτά.

Αναδρομή

Αυτό λέγεται αναδρομή και χρησιμοποιείτε στα μαθηματικά. Είναι πολύ δυνατή. Ας πούμε ότι έχετε μία συνάρτηση f όπου το
f(0) είναι 1 και το f(i) = 2 * f(i-1).
Έτσι το f(1) = 2 * f(0) = 2 και το f(2) = 2 * f(1) = 4.
Προσπαθήστε να μαντέψετε πόσο μπορεί να είναι το f(50). Τώρα δοκιμάστε να το υπολογίσετε. Δεν είναι εύκολο έτσι? Μην ζορίζεστε, κάντε το στην κονσόλα προγραμματιστή:
function f(i) {
 if (i == 0) return 1;
 else return 2 * f(i - 1);
}
Τώρα δοκιμάστε f(50). Τρώγεστε να δοκιμάσετε και το f(10000)? Μην μασάτε, κάντε το!

Γράψτε κώδικα!

Αρκετά με τα μαθηματικά. Τώρα γυρίστε πίσω στον κώδικα και ψάξτε το. Απλά χακάρετε όσο πάει. Μην ανησυχείτε αν κάνετε λάθη. Υπάρχει πάντα το “undo” και στην χειρότερη κάνε πάλι fork από την αρχή. Αισθάνεστε λίγο από χάκερ τώρα;

Περισσότερα;

Αν θέλετε κι άλλα κοιτάξτε την βελτιωμένη έκδοση του minesweeper με πολλές βελτιώσεις και το επόμενο μου παράδειγμα του γνωστού παιχνιδιού κρεμαλα.

Αν θέλετε κοιτάξτε και το blog μου όπου εξηγώ πώς έγινε αυτό το site.