From 2c063a1322fe50247cfd36c4b00fa401da2a9650 Mon Sep 17 00:00:00 2001 From: Kobe Vrancken Date: Fri, 18 Oct 2019 10:27:27 +0200 Subject: [PATCH] Initial commit --- README.md | 291 +++++++++++++++++++++++++++++++++ hoorcollege/ex0/code.js | 4 + hoorcollege/ex0/index.html | 11 ++ hoorcollege/ex1/code.js | 6 + hoorcollege/ex1/index.html | 15 ++ hoorcollege/ex2/code.js | 4 + hoorcollege/ex2/index.html | 16 ++ hoorcollege/ex3/code.js | 20 +++ hoorcollege/ex3/index.html | 18 ++ hoorcollege/ex4/code.js | 48 ++++++ hoorcollege/ex4/index.html | 22 +++ hoorcollege/ex5/code.js | 44 +++++ hoorcollege/ex5/index.html | 17 ++ hoorcollege/ex5/stylesheet.css | 24 +++ hoorcollege/ex6/code.js | 62 +++++++ hoorcollege/ex6/index.html | 17 ++ hoorcollege/ex6/stylesheet.css | 3 + hoorcollege/ex7/code.js | 99 +++++++++++ hoorcollege/ex7/index.html | 18 ++ hoorcollege/ex7/stylesheet.css | 24 +++ oplossing/code.js | 24 +++ oplossing/index.html | 12 ++ oplossing/stylesheet.css | 3 + sliding-puzzle.png | Bin 0 -> 9364 bytes 24 files changed, 802 insertions(+) create mode 100644 README.md create mode 100644 hoorcollege/ex0/code.js create mode 100644 hoorcollege/ex0/index.html create mode 100644 hoorcollege/ex1/code.js create mode 100644 hoorcollege/ex1/index.html create mode 100644 hoorcollege/ex2/code.js create mode 100644 hoorcollege/ex2/index.html create mode 100644 hoorcollege/ex3/code.js create mode 100644 hoorcollege/ex3/index.html create mode 100644 hoorcollege/ex4/code.js create mode 100644 hoorcollege/ex4/index.html create mode 100644 hoorcollege/ex5/code.js create mode 100644 hoorcollege/ex5/index.html create mode 100644 hoorcollege/ex5/stylesheet.css create mode 100644 hoorcollege/ex6/code.js create mode 100644 hoorcollege/ex6/index.html create mode 100644 hoorcollege/ex6/stylesheet.css create mode 100644 hoorcollege/ex7/code.js create mode 100644 hoorcollege/ex7/index.html create mode 100644 hoorcollege/ex7/stylesheet.css create mode 100644 oplossing/code.js create mode 100644 oplossing/index.html create mode 100644 oplossing/stylesheet.css create mode 100644 sliding-puzzle.png diff --git a/README.md b/README.md new file mode 100644 index 0000000..d2d8cc4 --- /dev/null +++ b/README.md @@ -0,0 +1,291 @@ +# JavaScript Sliding Puzzle + +![alt text](sliding-puzzle.png "Voorbeeld van een Sliding Puzzle") + +In deze oefenzitting zullen we een Sliding Puzzle maken in HTML, CSS en JavaScript. + +## Voorbereiding + +Start met deze oefenzitting door de repository te clonen naar je eigen machine. + +``` shell +$ git clone https://github.com/informatica-werktuigen/oefenzitting-javascript.git +``` + +## Structuur repository + +- ./hoorcollege: in deze folder kan je de verschillende codevoorbeelden uit de les nakijken +- ./sliding-puzzle: in deze folder plaats je je eigen oplossing voor deze oefenzitting + +## Editor + +Het is mogelijk HTML, CSS en JavaScript te schrijven met elke mogelijke text editor, zelfs met kladblok. +Het is uiteraard een goed idee gebruik te maken van een editor met minstens syntax highlighting. + +Op de Linux-machines in de Software labo's kan je gebruik maken van het programma **Atom**. + +Indien je werkt op je eigen machine kan je gebruik maken van de goede, gratis editor [Visual Studio Code](https://code.visualstudio.com/). + +Indien je eigen machine op Linux draait kan je eventueel ook zelf [Atom](https://atom.io/) installeren. + +Andere editors zijn uiteraard ook toegestaan. + +## Web browser + +HTML-pagina's worden geopend met een web browser. + +Elk van deze browsers heeft een eigen toolchain die kan helpen bij het lezen van HTML, CSS en JavaScript. + +Deze oefenzitting neemt aan dat gebruik gemaakt wordt van Firefox. + +Indien je gebruik maakt van een andere web browser is het je eigen taak om de equivalente functionaliteiten (debugger, console, ...) in die browser te vinden. + +### Developer tools + +Voor je begint aan de oefenzitting is het een goed idee vertrouwd te geraken met de Developer Tools van Firefox. + +Open het laatste voorbeeld uit de oefenzitting (*./hoorcollege/ex7/index.html*) in Firefox. + +Druk vervolgens op de toetsenbordcombinatie CTRL+SHIFT+I (of COMMAND+OPTION+I voor Mac). + +Let er op dat alle aanpassingen die je maakt in de Developer Tools tijdelijk zijn en ongedaan worden gemaakt na het verversen van de pagina. + +Gebruik voor permanente wijzigingen je editor naar keuze. + +Voer nu onderstaande opdrachten uit met behulp van de Developer tools. Ververs indien nodig de pagina om eventuele wijzigingen ongedaan te maken. + +#### Opdrachten + +* Verwijder met behulp van de *Inspector* de Reset-knop op de pagina +* Open de console. Voer deze functie uit: *update_board(my_board, 0, 1, 2)*. Observeer wat er gebeurt +* Verander de waarden in het *update_board*-commando en probeer op die manier een X te plaatsen in het middelste vakje. Hint: met de ↑-toets kan je het vorig ingevoerde commando terug ophalen. +* Zoek en open het bestand *code.js* in de *Debugger*. Plaats een breakpoint in de binnenste for-loop van de functie *generate_board_html* door op de nummer van die regel te klikken. Klik vervolgens op een vakje van het spelbord. Inspecteer de waarden van de variabele *table_inner_html* in de rechtse kolom van de debugger (onder *scopes*). +* Druk op de Run-pijl bovenaan om de code verder uit te voeren tot het volgende breakpoint. Observeer hoe de waarden van *table_inner_html* en *row_html* evolueren na elke iteratie van de lus. +* Open de *Style editor* en zorg ervoor dat alle rode vakjes paars worden + + +## Deel 1: Lay-out maken + +Open in de folder *sliding-puzzle* in je repository het bestand met de naam *index.html*. +Dit bestand bevat een algemeen skelet dat je kan gebruiken voor elke mogelijke html-pagina. + +### Basisstructuur HTML + +HTML is een variant van XML waarmee je de lay-out van een webpagina kan beschrijven op een wijze die voor beide mens en machine interpreteerbaar is. + +Een HTML-document maakt gebruik van tags met attributen, als volgt: + +``` html +content +``` + +### Tabel opstellen + +``` html + +Hello, world! + +``` + + * Vervang de tekst *Hello, world!* in *index.html* door een tabel van 3x3. Maak hiervoor gebruik van de tags *table*, *tr* en *td*. + Bekijk [deze link](https://www.w3schools.com/html/html_tables.asp) indien je niet weet hoe je een HTML-tabel moet maken. +* Vul in elke cel van de tabel een uniek nummer in van 1 tot en met 8. +* Laat 1 cel leeg. Deze cel stelt het lege vakje op de schuifpuzzel voor. + + +## Stijl toevoegen + +Om deze tabel wat groter, mooier en duidelijker te maken zullen we door middel van *CSS* stijlen toevoegen. + + +### Basisstructuur CSS + +Met behulp van CSS kan je stijlen toekennen aan HTML-tags (en hun inhoud). + +De basissyntax werkt als volgt: + +``` css +tag { + property: value; +} + +.class { + property: value; +} + +#id { + property: value; +} + +``` + +Onderstaande voorbeeldcode geeft de achtergrondkleur ```#fffff0``` aan elke *table*-tag in het HTML-document. + +``` css +table { + background-color: #fffff0; +} +``` + +Om stijlen toe te kennen aan individuele tags, kunnen we ze een klasse geven. +Het is mogelijk om dezelfde klasse aan meerdere tags toe te kennen. + +Onderstaande code kent de klasse *my_class* toe aan de *div* en de *p* tag. + +``` html +
+

+``` + +In de CSS stylesheet kunnen we nu de stijl van de klasse *my_class* vastleggen. + +``` css +.my_class{ + border: 1px solid #000000; +} +``` +Als resultaat krijgen beide de *div* en de paragraaf (*p*) een zwarte doorlopende rand van 1 pixel. + +### Stijl toekennen + +Open het bestand stylesheet.css. +Probeer met behulp van CSS de lay-out in de afbeelding bovenaan deze pagina na te maken. +De kleuren mag je zelf kiezen. + +Zorg ervoor dat minstens: + +* De vakjes groot genoeg zijn +* Elk vakje zichtbaar gescheiden is door een rand +* Het lege vakje dezelfde achtergrondkleur heeft als de tabel zelf +* De tekst in de vakjes gecentreerd is + +Als voorbeeld kan je kijken naar het bestand ./hoorcollege/ex7/stylesheet.css. + +Alle mogelijke stijlen die je via CSS kan toekennen kan je vinden op https://www.w3schools.com/cssref/. + + +## Deel 2: Interne representatie + +Een sliding puzzle, net als veel andere bordspellen, kunnen we in JavaScript voorstellen als een tweedimensionale lijst. + +Onderstaande code toont een tweedimensionale lijst die de Sliding Puzzle uit de afbeelding bovenaan deze pagina voorstelt. We hebben de waarde 0 gekozen voor het lege vakje. + +``` JavaScript + +let puzzle = [[0, 1, 2], + [7, 4, 8], + [3, 5, 6]]; + +``` +Het doel van deze sectie is om via JavaScript bovenstaande lijst om te zetten in correcte HTML-code. + +Open nu het bestand *code.js* en lees de code. + +De functie *draw_puzzle* in dit bestand zoekt naar een tag in de HTML-pagina met als *id* *puzzle_container*. +Vervolgens wordt de functie *generate_puzzle_html* opgeroepen om vanuit de bovenstaande puzzle-lijst een +correcte HTML-string te genereren. Deze HTML-string wordt nadien in de *puzzle_container* geplaatst. + +Voeg allereerst aan je HTML-bestand een *div* toe met als id *puzzle_container*. +Hierin zal je gegenereerde HTML-code toegevoegd worden. + +``` HTML +
+``` + +### Opdracht + +Vul nu de functie *generate_puzzle_html* in *code.js* aan zodat het resultaat van de functie een HTML-weergave is van de meegegeven puzzel. + +Baseer je op de HTML die je geschreven hebt in het eerste deel van deze oefenzitting. + +Om de functie te testen kan je het bestand *index.html* openen in Firefox. + +Indien de code correct werkt, toont de pagina de gegenereerde sliding puzzle in de *puzzle_container*. + +Indien de code niet correct werkt, open dan de Developer Tools van Firefox. Open vervolgens de debugger en plaats break points op kritische punten in je code. Inspecteer de waarden van je variabelen en probeer te achterhalen wat fout loopt. + +Bestudeer voor tips de oplossing in *./hoorcollege/ex7/code.js*. + +## Deel 3: Spelfunctionaliteit + +Op dit punt in de oefenzitting heeft je spel een lay-out die automatisch gegenereerd kan worden vanuit de interne lijstrepresentatie. + +De volgende stap zal bestaat eruit JavaScript-functies te schrijven die op basis van deze interne representatie ons toelaten het spel te spelen. + +Voeg onderstaande functies toe aan *code.js*. Gebruik telkens de *Console* in de *Developer Tools* om deze functies te testen. + +### Functies + +* ``` function check_game_complete(puzzle) ``` + + Deze functie krijgt als argument de puzzel (voorgesteld als lijst). De functie moet `true` returnen indien de sliding puzzle correct is opgelost, en 'false' op alle andere momenten. De puzzel is correct opgelost indien alle nummers in de juiste volgorde staan met het lege vakje onderaan rechts. + + Test de functie met behulp van de console. + ``` JavaScript + + >> check_game_complete(my_puzzle) + false + >> check_game_complete([[1, 2, 3], [4, 5, 6], [7, 8, 0]]) + true + ``` + + Hint: vergelijk twee lijsten door met een lus elk indivueel element apart te vergelijken + + +* ```function swap_empty_square(puzzle, row, col)``` + + Deze functie krijgt als invoer de huidige puzzel voorgesteld als lijst en een rij en kolom op het bord. + Deze functie wisselt het vakje op die positie op het spelbord met het lege vakje. + + Test de functie met behulp van de console. + ``` JavaScript + >> swap_empty_square(my_puzzle, 1, 0) + undefined + >> draw_puzzle(my_puzzle) + undefined + ``` + + Na uitvoering van deze functies zou het lege vakje moeten wisselen met het vakje met waarde 7. + + Zorg er nu ook voor dat de wissel enkel wordt uitgevoerd indien het lege vakje naast de meegegeven positie ligt. + Verifieer nadien opnieuw met de console. + +* ```function square_click_handler(cell)``` + + Ten slotte schrijven we de functie die opgeroepen zal worden telkens wanneer we klikken op een plaats op het spelbord. + + Met onderstaande code kan je opvragen op welke positie geklikt er geklikt werd: + + ``` JavaScript + let col = cell.cellIndex; + let row = cell.parentNode.rowIndex; + ``` + + Zorg ervoor dat de code gebruik maakt van de functie ```swap_empty_square``` om het vakje waarop geklikt werd te wisselen met het lege vakje. + + Zorg er vervolgens voor dat het spelbord opnieuw getekend wordt met behulp van ```draw_puzzle```. + + Controleer ten slotte met ```check_game_complete``` of het spel correct is opgelost. + + Indien dit het geval is, voer dan de code ```alert("Proficiat!");``` uit. + + Om dit te testen willen we ervoor zorgen dat wanneer er op een cel geklikt wordt, ```square_click_handler``` correct wordt opgeroepen. + + Maak hiervoor gebruik van het *onclick* attribuut. + + Voeg aan de *td*-tags *onclick* toe als volgt. + + ``` html + + ``` + Zorg ervoor dat deze onclick handler mee toegevoegd wordt bij het genereren van de HTML-code. + + Als dit correct uitgevoerd wordt, heb je nu een werkende Sliding Puzzle. + +## Extra uitdagingen + +* Zorg ervoor dat het spelbord willekeurig gegenereerd wordt. Let erop dat niet alle schuifpuzzels oplosbaar zijn + +* Zorg ervoor dat de de grootte van de schuifpuzzel gekozen kan worden door de speler (bijvoorbeeld 4x4 of 5x5) + +* Voeg een timer toe die bijhoudt hoe lang je erover doet om een puzzel op te lossen diff --git a/hoorcollege/ex0/code.js b/hoorcollege/ex0/code.js new file mode 100644 index 0000000..5f3cb05 --- /dev/null +++ b/hoorcollege/ex0/code.js @@ -0,0 +1,4 @@ +function say_hello(){ + alert("Hallo!"); +} + diff --git a/hoorcollege/ex0/index.html b/hoorcollege/ex0/index.html new file mode 100644 index 0000000..a423ef3 --- /dev/null +++ b/hoorcollege/ex0/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/hoorcollege/ex1/code.js b/hoorcollege/ex1/code.js new file mode 100644 index 0000000..402d92d --- /dev/null +++ b/hoorcollege/ex1/code.js @@ -0,0 +1,6 @@ + + +function say_hi(){ + alert("Hallo!"); +} + diff --git a/hoorcollege/ex1/index.html b/hoorcollege/ex1/index.html new file mode 100644 index 0000000..92ba063 --- /dev/null +++ b/hoorcollege/ex1/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + +

Hello, world!

+ + + + diff --git a/hoorcollege/ex2/code.js b/hoorcollege/ex2/code.js new file mode 100644 index 0000000..f4e8c5b --- /dev/null +++ b/hoorcollege/ex2/code.js @@ -0,0 +1,4 @@ +function say_something(message){ + alert("Message: "+message); +} + diff --git a/hoorcollege/ex2/index.html b/hoorcollege/ex2/index.html new file mode 100644 index 0000000..b0f31ef --- /dev/null +++ b/hoorcollege/ex2/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + +

Druk op de juiste knop

+ + + + + diff --git a/hoorcollege/ex3/code.js b/hoorcollege/ex3/code.js new file mode 100644 index 0000000..300b8b9 --- /dev/null +++ b/hoorcollege/ex3/code.js @@ -0,0 +1,20 @@ +let random_value = 0; + +function assign_random_value(){ + random_value = Math.floor(Math.random() * 5); +} + +function check_value(value){ + if(value == random_value){ + alert("Gewonnen!"); + assign_random_value(); + }else{ + alert("Pech! Probeer opnieuw."); + } +} + +function say_something(message){ + alert("Message: "+message); +} + +assign_random_value(); diff --git a/hoorcollege/ex3/index.html b/hoorcollege/ex3/index.html new file mode 100644 index 0000000..9ccba65 --- /dev/null +++ b/hoorcollege/ex3/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + +

Druk op de juiste knop

+ + + + + + + diff --git a/hoorcollege/ex4/code.js b/hoorcollege/ex4/code.js new file mode 100644 index 0000000..920e6f8 --- /dev/null +++ b/hoorcollege/ex4/code.js @@ -0,0 +1,48 @@ +let random_value = 0; +let button_amount = 5; + +window.onload = function(){ + //Getting elements by ID is only possible after the page has loaded + document.getElementById("number_picker").onchange = function(){ + change_button_amount(this.value); + } + assign_random_value(); +} + + +function change_button_amount(new_amount){ + button_amount = new_amount; + create_buttons(); +} + +function create_buttons(){ + let button_html = ""; + for(let i = 0; i < button_amount; i++){ + button_html += generate_button_html(i); + } + document.getElementById("button_container").innerHTML = button_html; + assign_random_value(); +} + +function generate_button_html(button_index){ + return ``; +} + + +function assign_random_value(){ + random_value = Math.floor(Math.random() * button_amount); +} + +function check_value(value){ + if(value == random_value){ + alert("Gewonnen!"); + assign_random_value(); + }else{ + alert("Pech! Probeer opnieuw."); + } +} + +function say_something(message){ + alert("Message: "+message); +} + diff --git a/hoorcollege/ex4/index.html b/hoorcollege/ex4/index.html new file mode 100644 index 0000000..e8ec467 --- /dev/null +++ b/hoorcollege/ex4/index.html @@ -0,0 +1,22 @@ + + + + + + + + + +

Geef het aantal knoppen op:

+ + +

Druk op de juiste knop

+
+ + + + + +
+ + diff --git a/hoorcollege/ex5/code.js b/hoorcollege/ex5/code.js new file mode 100644 index 0000000..c545570 --- /dev/null +++ b/hoorcollege/ex5/code.js @@ -0,0 +1,44 @@ +let my_board = [[0, 1, 2], + [1, 1, 0], + [0, 0, 1]]; + + +function draw_board(board){ + container = document.getElementById("board_container"); + board_html = generate_board_html(board); + container.innerHTML = board_html; +} + +function generate_board_html(board){ + let table_inner_html = ""; + for(let i = 0; i < board.length; i++){ + + let row_html = "" + for(let j = 0; j < board.length; j++){ + row_html += generate_square(board[i][j]); + } + row_html += ""; + table_inner_html += row_html; + } + + return `${table_inner_html}
`; + +} + +function generate_square(type){ + let square_class = "empty"; + let square_content = ""; + + if(type == 1){ + square_class = "red"; + square_content = "X"; + }else if(type == 2){ + square_class = "yellow"; + square_content = "O"; + } + return `${square_content}`; +} + +function update_board(board, row, col, type){ + board[row][col] = type; +} diff --git a/hoorcollege/ex5/index.html b/hoorcollege/ex5/index.html new file mode 100644 index 0000000..e82aaf3 --- /dev/null +++ b/hoorcollege/ex5/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + +
+
+ Hier komt het spelbord +
+
+ + diff --git a/hoorcollege/ex5/stylesheet.css b/hoorcollege/ex5/stylesheet.css new file mode 100644 index 0000000..0c46752 --- /dev/null +++ b/hoorcollege/ex5/stylesheet.css @@ -0,0 +1,24 @@ +table { + border: 1px solid grey; +} + +.board_element{ + border: 1px solid grey; + width: 100px; + height: 100px; + text-align: center; + vertical-align: middle; +} + + +.red { + background-color: red; +} + +.yellow { + background-color: yellow; +} + +.emptpy { + background-color: lightgrey; +} diff --git a/hoorcollege/ex6/code.js b/hoorcollege/ex6/code.js new file mode 100644 index 0000000..147eaa4 --- /dev/null +++ b/hoorcollege/ex6/code.js @@ -0,0 +1,62 @@ +let my_board = [[0, 0, 0], + [0, 0, 0], + [0, 0, 0]]; + +let current_turn = 1; + +function draw_board(board){ + container = document.getElementById("board_container"); + board_html = generate_board_html(board); + container.innerHTML = board_html; +} + +function generate_board_html(board){ + let table_inner_html = ""; + for(let i = 0; i < board.length; i++){ + + let row_html = "" + for(let j = 0; j < board[i].length; j++){ + row_html += generate_square(board[i][j]); + } + row_html += ""; + table_inner_html += row_html; + } + + return `${table_inner_html}
`; + +} + +function generate_square(type){ + let square_class = "empty"; + let square_content = ""; + + if(type == 1){ + square_class = "red"; + square_content = "X"; + }else if(type == 2){ + square_class = "yellow"; + square_content = "O"; + } + return `${square_content}`; +} + +function update_board(board, row, col, type){ + board[row][col] = type; + draw_board(board); +} + +function square_click_handler(event){ + let col = event.cellIndex; + let row = event.parentNode.rowIndex; + + update_board(my_board, row, col, current_turn); + + if(current_turn == 1){ + current_turn = 2; + } else { + current_turn = 1; + } + + +} + diff --git a/hoorcollege/ex6/index.html b/hoorcollege/ex6/index.html new file mode 100644 index 0000000..e82aaf3 --- /dev/null +++ b/hoorcollege/ex6/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + +
+
+ Hier komt het spelbord +
+
+ + diff --git a/hoorcollege/ex6/stylesheet.css b/hoorcollege/ex6/stylesheet.css new file mode 100644 index 0000000..aa4aba1 --- /dev/null +++ b/hoorcollege/ex6/stylesheet.css @@ -0,0 +1,3 @@ +table { + background-color: #fffff0; +} diff --git a/hoorcollege/ex7/code.js b/hoorcollege/ex7/code.js new file mode 100644 index 0000000..c01d55e --- /dev/null +++ b/hoorcollege/ex7/code.js @@ -0,0 +1,99 @@ +let my_board = [[0, 0, 0], + [0, 0, 0], + [0, 0, 0]]; + +let current_turn = 2; + +function draw_board(board){ + container = document.getElementById("board_container"); + board_html = generate_board_html(board); + container.innerHTML = board_html; +} + +function generate_board_html(board){ + let table_inner_html = ""; + for(let i = 0; i < board.length; i++){ + + let row_html = "" + for(let j = 0; j < board[i].length; j++){ + row_html += generate_square(board[i][j]); + } + row_html += ""; + table_inner_html += row_html; + } + + return `${table_inner_html}
`; + +} + +function generate_square(type){ + let square_class = "empty"; + let square_content = ""; + + if(type == 1){ + square_class = "red"; + square_content = "X"; + }else if(type == 2){ + square_class = "yellow"; + square_content = "O"; + } + return `${square_content}`; +} + +function update_board(board, row, col, type){ + board[row][col] = type; + draw_board(board); +} + +function square_click_handler(event){ + let col = event.cellIndex; + let row = event.parentNode.rowIndex; + + update_board(my_board, row, col, current_turn); + + if(current_turn == 1){ + current_turn = 2; + } else { + current_turn = 1; + } + + check_win(my_board); + + +} + +function reset(){ + my_board = [[0, 0, 0], [0, 0, 0], [0, 0, 0]]; + draw_board(my_board); +} + +function check_win(board){ + for(let i = 0; i < board.length; i++){ + + if(board[i][0] == 2 && board[i][1] == 1 && board[i][2] == 2){ + win_game(); + } + + } + + for(let i = 0; i < board[0].length; i++){ + + if(board[0][i] == 2 && board[1][i] == 1 && board[2][i] == 2){ + win_game(); + + } + + } + + //TODO: Diagonale controle +} + +function win_game(){ + alert(`Proficiat! Speler ${current_turn} wint.`); + reset(); +} + +window.onload = function(){ + draw_board(my_board); +} + diff --git a/hoorcollege/ex7/index.html b/hoorcollege/ex7/index.html new file mode 100644 index 0000000..92dd5f5 --- /dev/null +++ b/hoorcollege/ex7/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + +
+
+ Hier komt het spelbord +
+
+ + + diff --git a/hoorcollege/ex7/stylesheet.css b/hoorcollege/ex7/stylesheet.css new file mode 100644 index 0000000..0c46752 --- /dev/null +++ b/hoorcollege/ex7/stylesheet.css @@ -0,0 +1,24 @@ +table { + border: 1px solid grey; +} + +.board_element{ + border: 1px solid grey; + width: 100px; + height: 100px; + text-align: center; + vertical-align: middle; +} + + +.red { + background-color: red; +} + +.yellow { + background-color: yellow; +} + +.emptpy { + background-color: lightgrey; +} diff --git a/oplossing/code.js b/oplossing/code.js new file mode 100644 index 0000000..07583b7 --- /dev/null +++ b/oplossing/code.js @@ -0,0 +1,24 @@ +//Interne voorstelling van de puzzel als een tweedimensionale lijst +let my_puzzle = [[0, 1, 2], + [7, 4, 8], + [3, 5, 6]]; + +//Wanneer de volledige HTML-pagina geladen is wordt onderstaande functie uitgevoerd +window.onload = function(){ + draw_puzzle(my_puzzle); +} + +//Deze functie neemt als invoer de lijstrepresentatie van onze puzzel +// +function draw_puzzle(puzzle){ + let puzzle_html = generate_puzzle_html(puzzle); + document.getElementById("puzzle_container").innerHTML = puzzle_html; +} + +function generate_puzzle_html(puzzle){ + //TODO: Implementeer deze functie! + //puzzle bevat een tweedimensionale lijst die de sliding puzzle voorstelt + //Kijk naar de functie generate_board_html in voorbeeld 7 uit het hoorcollege voor inspiratie +} + + diff --git a/oplossing/index.html b/oplossing/index.html new file mode 100644 index 0000000..6b413eb --- /dev/null +++ b/oplossing/index.html @@ -0,0 +1,12 @@ + + + + + + + + + + Hello, world! + + diff --git a/oplossing/stylesheet.css b/oplossing/stylesheet.css new file mode 100644 index 0000000..bdbe550 --- /dev/null +++ b/oplossing/stylesheet.css @@ -0,0 +1,3 @@ +table { + border: 1px solid #000000; +} diff --git a/sliding-puzzle.png b/sliding-puzzle.png new file mode 100644 index 0000000000000000000000000000000000000000..48ac25acfc47f514795a2f4b24155eae1f3d2a6c GIT binary patch literal 9364 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 literal 0 HcmV?d00001