ThinkTap Code Tutorial

Hieronder vind je de nodige uitleg en code die je nodig hebt om het spel te maken.

Stap 1

Installeer Visual Studio Code op uw computer of laptop via deze link. Verder moet u in Visual Studio Code een extensie installeren deze heet: live server met deze extensie kunt u een server opstarten en u restultaat zien van uw geschreven code. De link naar deze extensie en hoe deze te laten werken vindt u hier.

Stap 2

Als Visual Studio Code geïnstalleerd is maakt u op u coputer of latptop en nieuwe map aan en geeft u die een naam bv. "game", waar die map staat kiest u zelf daarna opent u Visual Studio Code.

Stap 3

Als Visual Studio Code open staat gaat u uw map daarin openen. Bekijk onderstaand filmpje.

Stap 4

Nu uw map geopent is in Visual Studio Code kunnen we gaan beginnen met programmeren en de eerste stap is een index.html bestand aanmaken. Bekijk onderstaand filmpje.

Stap 5

Nu we een index.html bestand hebben kunnen we bijna beginnen met programmeren eerst maken we nog een map aan waar onze css, JavaScript en afbeeldingen zullen komen als voorbeeld noem ik de map static. Bekijk in onderstaand filmpje.

In bovenstaand filmpje wordt getoond hoe u de map static aanmaakt en 2 submappen JavaScript afgekort js en een css map

Stap 6

Nu we een index.html bestand hebben kunnen we beginnen met programmeren. In openstaand index.html bestand kopieer en plak (windows commando's kopieer: Ctrl + C) en (windows commando's plakken: Ctrl + V) (mac commando's knippen: Command + C) (mac commando's knippen: Command + V) je volgende code:

Met de bovenstaande HTML code hebt u de basis voor de game. Hebt u geen idee hoe u dit aanpakt? Geen probleem bekijk dan onderstaand filmpje en volg de stappen.

Stap 7

Als u alle vorige stappen goed gevolgd hebt zou u volgend restultaat moeten bekomen.

Dit is puur HTML zoals u ziet gebeurd er nog niks speciaals, er werkt ook nog niks daarom gaan we nu de JavaScript toevoegen.

Stap 8

We beginnen met een main.js bestand te maken in dat bestand komt al de nodige JavaScript. Bekijk onderstaand filmpje.

Stap 9

Nu we een main.js bestand hebben kunnen we beginnen met programmeren. In openstaand main.js bestand kopieer en plak (windows commando's kopieer: Ctrl + C) en (windows commando's plakken: Ctrl + V) (mac commando's knippen: Command + C) (mac commando's knippen: Command + V) je volgende code:

Met de bovenstaande JavaScript code hebt u de basis functies voor de game. Hebt u geen idee hoe u dit aanpakt? Geen probleem bekijk dan het filmpje uit stap 6 dit is exact hetzelfde maar dan met JavaScript.

als u bovenstaand restultaat bekijkt ziet u geen verschil dit klopt visueel is er niks veranderd daarom is het nu tijd om de css file aan te maken en ervoor te zorgen dat dit werkt.

Stap 10

Nu we een index.html en een main.js bestand hebben kunnen we beginnen met het toevoegen van een main.css bestand. om een css file aan te maken bekijkt u het filmpje van stap 8 dit is exact dezelfde werkwijze het enige verschill is dat u in de map css werkt

Stap 11

Nu we een index.html en een main.js bestand hebben kunnen we beginnen met het toevoegen van de css. In openstaand main.css bestand kopieer en plak (windows commando's kopieer: Ctrl + C) en (windows commando's plakken: Ctrl + V) (mac commando's knippen: Command + C) (mac commando's knippen: Command + V) je volgende code:

Met de bovenstaande css code hebt u de basis stijl voor de game. Hebt u geen idee hoe u dit aanpakt? Geen probleem bekijk dan het filmpje uit stap 6 dit is exact hetzelfde maar dan met JavaScript.

Als u bovenstaand restultaat bekijkt ziet u dat er nu wel een verschil is. Dit is de basis van de game. Gefeliciteerd! Als alle stappen goed zijn uitgevoerd hebt nu net een game gemaakt met HTML, CSS en JavaScript.