Project-bestanden van TI - Game Controller gekopieerd

.gitlab-ci.yml

@@ -0,0 +1,26 @@
+image: python:3.9-slim
+
+before_script:
+  - time apt update
+  - time pip install -r requirements.txt
+  - time cd mdocotion && python setup.py install && cd ..
+
+pages:
+  stage: deploy
+  tags:
+    - hva
+  script:
+    - time mkdocs build --site-dir public
+    - time cp -rf web public
+  artifacts:
+    paths:
+      - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+      changes:
+        - "docs/**/*"
+        - "mkdocs.yml"
+        - ".gitmodules"
+
+variables:
+  GIT_SUBMODULE_STRATEGY: recursive

README.md

@@ -0,0 +1,32 @@
+# 🎮 TI Game Controller
+
+De opdracht van Technische Informatica (TI) bestaat uit het ontwikkelen van een niet al te ingewikkelde browser-spel welke je gaat aansturen met je zelf gemaakt controller!
+
+Aan dit project werk je in een tweetal, waarbij je onze Gitlab omgeving gebruikt
+voor het bijhouden van je code, documentatie en planning.
+
+## 📁 Bestandsstructuur
+
+In deze repository krijgen jullie een structuur aan bestanden, hierbij mag je zelf wijzigingen maken in de bestanden die je nodig hebt.
+De structuur is als volgt:
+
+- `docs`: Hierin kan je de documentatie kwijt voor jouw project. Hiervan wordt een website gegenereerd die je kan vinden onder 'Pages' (Deploy > Pages).
+- `teamdocumentatie`: In deze map kan je (markdown!) documenten kwijt die gaan over de samenwerking in het team, wat je niet op je gegenereerde website wilt hebben.
+- `arduino`: Hierin kan je de code kwijt voor jouw project wat te maken heeft met je embedded systeem, code geschreven in Arduino.
+- `web`: Hierin kan je de code kwijt voor jouw project wat te maken heeft met de webapplicatie, bijvoorbeeld HTML, CSS en Javascript.
+- `server`: Hier kan je je server applicatie kwijt die gaat zorgen voor de verbinding tussen jouw embedded systeem, web-applicatie en database.
+
+## 📝 Opdracht
+
+De opdracht vinden jullie in de map `docs` onder `opdracht.md`. Hierin staat de opdracht beschreven en de eisen waaraan je moet voldoen. Beter is om de opdracht te bekijken via `Deploy` > `Pages`, en vervolgens te navigeren naar de opdracht.
+
+Daarnaast vind je in dit Gitlab-project:
+
+- User Stories (Plan > Issues)
+- Learning Stories (Plan > Issues)
+- Scrum Board (Plan > Boards)
+- Sprints (Plan > Milestones)
+
+## 📚 Documentatie
+
+Naast het schrijven van commentaar in je code ga je ook aan de slag met het schrijven van documentatie. Dit doe je door in de map `docs` een Markdown bestand aan te maken. Dit bestand wordt automatisch omgezet naar een website die je kan vinden onder 'Pages' (Deploy > Pages).

arduino/hello-world/hello-world.ino

@@ -0,0 +1,16 @@
+/*
+ * Description: This is a basic sketch about blinking an LED on your ESP32.
+ * Author:  Mats Otten
+ * Date:    5 september 2023
+ */
+
+void setup() {
+  pinMode(LED_BUILTIN, OUTPUT);
+}
+
+void loop() {
+  digitalWrite(LED_BUILTIN, HIGH);  // turn the LED on (HIGH is the voltage level)
+  delay(1000);                      // wait for a second
+  digitalWrite(LED_BUILTIN, LOW);   // turn the LED off by making the voltage LOW
+  delay(1000);                      // wait for a second
+}

docs/.pages

@@ -0,0 +1,9 @@
+nav:
+    - 🏚️ Home: index.md
+    - 🧰 Opdracht: 
+        - Omschrijving: opdracht/omschrijving
+        - Criteria: opdracht/criteria
+        - Definition of Done: opdracht/dod
+        - Game Controller: opdracht/game_controller
+        - Userstory overzicht: opdracht/user_learning_stories
+        - Links: opdracht/links

docs/assets/controller-icon.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="150px" height="150px" viewBox="0 -11 45 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+    <title>controller</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Vivid.JS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Vivid-Icons" transform="translate(-195.000000, -182.000000)">
+            <g id="Icons" transform="translate(37.000000, 169.000000)">
+                <g id="controller" transform="translate(156.000000, 0.000000)">
+                    <g transform="translate(1.000000, 13.000000)" id="Shape">
+                        <path d="M34.55,23 C29.4078993,22.9870933 25.037974,19.2382935 24.243,14.158 L21.757,14.158 C20.8494646,19.6320439 15.8215777,23.4421057 10.3060894,22.8353384 C4.7906011,22.2285712 0.711236358,17.4166068 1.01541884,11.8761871 C1.31960132,6.33576743 5.90123644,1.99931298 11.45,2 L34.55,2 C40.3489899,2 45.05,6.70101013 45.05,12.5 C45.05,18.2989899 40.3489899,23 34.55,23 Z" fill="#39253e">
+
+</path>
+                        <path d="M16,0 L30,0 L30,2 L16,2 L16,0 Z M16,14 L13,14 L13,17 L10,17 L10,14 L7,14 L7,11 L10,11 L10,8 L13,8 L13,11 L16,11 L16,14 Z M35,5 C36.1045695,5 37,5.8954305 37,7 C37,8.1045695 36.1045695,9 35,9 C33.8954305,9 33,8.1045695 33,7 C33,5.8954305 33.8954305,5 35,5 Z M35,15 C36.1045695,15 37,15.8954305 37,17 C37,18.1045695 36.1045695,19 35,19 C33.8954305,19 33,18.1045695 33,17 C33,15.8954305 33.8954305,15 35,15 Z M40,10 C41.1045695,10 42,10.8954305 42,12 C42,13.1045695 41.1045695,14 40,14 C38.8954305,14 38,13.1045695 38,12 C38,10.8954305 38.8954305,10 40,10 Z M30,10 C31.1045695,10 32,10.8954305 32,12 C32,13.1045695 31.1045695,14 30,14 C28.8954305,14 28,13.1045695 28,12 C28,10.8954305 28.8954305,10 30,10 Z" fill="#000000">
+
+</path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

docs/index.md

@@ -0,0 +1,10 @@
+# TI Portfolio Website
+
+Welkom op jullie portfolio website! Hier kunnen jullie documentatie kwijt
+die jullie gaan schrijven voor jullie project.
+
+Maak je pagina's vooral leuk door plaatjes, video's en diagrammen toe te voegen; dit kan allemaal in markdown!
+
+Klik [hier](/web/) om je game te kunnen spelen.
+
+{{ mdocotion_header('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') }}

docs/opdracht/criteria.md

@@ -0,0 +1,36 @@
+# Criteria
+
+Net als de opdracht van blok 1, is ook deze opdracht opgedeeld in een aantal criteria. Deze criteria zijn opgedeeld in kwaliteitscriteria en gedragscriteria. De kwaliteitscriteria zijn de criteria die je project moet bevatten, de gedragscriteria zijn de criteria die je gedrag beschrijven.
+
+## Kwaliteitscriteria
+
+Voor het bouwen van deze opdracht heb je 3 sprints de tijd. Aan het einde van die periode moet je applicatie aan een aantal verwachtingen voldoen. We noemen dit de kwaliteitscriteria. Voor dit blok zien de kwaliteitscriteria er als volgt uit:
+
+
+| Cat | Nr | Kwaliteitscriteria | HBO-i model |
+|-----|----|--------------------|-------------|
+| 1 | K1 | Je hebt (een groot deel van) de user stories afgerond. | G, S |
+| 1 | K2 | Je hebt de behoeftes van de doelgroep onderzocht en gebruikt om zelf een aantal user stories te schrijven. | G-A |
+| 1 | K3 | Je hebt de gebruikersinterface van jouw product aangepast door prototyping toe te passen. | G-A, G-O, G-R |
+| 1 | K4 | Je hebt een testplan geschreven en gebruikt om een gebruikerstest uit te voeren. | G-R |
+| 2 | K5 | Je hebt object georiënteerd geprogrammeerd en maakt gebruik van objectgeoriënteerde technieken zoals abstraction, inheritance en encapsulation. | S-O, S-R |
+| 2 | K6 | Je hebt een genormaliseerde relationele database ontworpen en gebruikt om informatie uit je project in op te slaan, op te halen en te bewerken. | S-O, S-R |
+| 2 | K7 | Je hebt je werk beschreven met behulp van UML-technieken. | S-R, S-MC |
+
+
+## Gedragscriteria
+
+Om een IT-project succesvol op te leveren, is het noodzakelijk dat je leert om je als een professional te gedragen. Je hebt hiervoor vaardigheden nodig, die we binnen het hbo professional skills noemen. Voor dit project dient je gedrag aan de volgende criteria te voldoen:
+
+| Cat. | Nr | Gedragscriteria | HBO-i model |
+|------|----|-----------------|-------------|
+| 3 | G1 | Je neemt verantwoordelijkheid voor je eigen handelen. Je aanvaardt consequenties van jouw gedrag. Je geeft op constructieve feedback aan medestudenten en ontvangt feedback. Je geeft aan hoe je die feedback gaat gebruiken. Je werkt resultaat gericht aan je opdracht of taak. Je hebt een actieve werkhouding. Je leert van en met elkaar en bent aanwezig op contactmomenten. Je herkent waar je leerbehoeftes zitten en stelt doelen op om deze te vervullen. Je reflecteert op je handelen en je evalueert je doelen.| PL-PO |
+| 4 | G4 | Je werkt volgens (gegeven) kwaliteitsnormen. | TO-M |
+| 4 | G5 | Je kan constructief samenwerken in een duo. | DI-P |
+| 4 | G6 | Je gebruikt bronnen om antwoorden te vinden op een passende manier. | OP-O |
+| 4 | G7 | Je kunt je doel door middel van een presentatie begrijpelijk overbrengen aan de doelgroep. | DI-C |
+| 4 | G8 | Je schrijft gestructureerde en begrijpelijke documentatie. | DI-C |
+| 4 | G10 | Je bent je bewust van de invloed die je uitoefent met jouw werk. | TO-E |
+
+
+{{ mdocotion_header('https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') }}

docs/opdracht/dod.md

@@ -0,0 +1,19 @@
+# Definition of Done
+
+Binnen scrum dient iedere user story te voldoen aan een zogenaamde Definition of Done (DoD). Door het opstellen en aanhouden van een Definition Of Done, zorg je ervoor dat het werk wat je aflevert ook daadwerkelijk gebruikt kan worden. 
+
+Als je een user story hebt afgebouwd zet je 'm in _verify_ en controleer je of deze voldoet aan de _Definition of Done_ (zie hieronder). Pas als dat in orde is kun je de user story op _Done_ zetten.
+
+## DoD generiek
+
+- Alle acceptatiecriteria zijn afgevinkt.
+- Het werk is (technische) gedocumenteerd en relevant voor collega-ontwikkelaars.
+- Het werk is geschreven in Standaardnederlands.
+- Het werk staat in de Gitlab repository.
+- Het werk is gereviewd door een peer.
+- Het werk voldoet aan het Think-Make-Check (TMC) principe.
+- De code is opgesteld volgens de HBO-ICT coding conventions.
+- De code is handmatig functioneel getest op fouten.
+- De code werkt zonder fouten bij normaal gebruik.
+- De webapplicatie dient zowel op mobiele- als desktop-apparaten gebruikt te kunnen worden.
+

docs/opdracht/game_controller.md

@@ -0,0 +1,53 @@
+# Game Controller
+
+Wanneer je denkt aan een Game Controller denk je misschien wel aan de controller van jouw favoriete game console. Deze controllers zijn vaak gemaakt van plastic en bevatten een aantal knoppen en joysticks. Onderdeel van deze opdracht is dat jullie zelf een game controller gaan maken, hoe deze echter eruit gaat zien bepalen jullie.
+
+Om jullie een vlotte start te geven met het bouwen krijgen jullie van ons een moederbord waarop ruimte zit voor een aantal vaste componenten. Dit document geeft je alle details over het gebruik van dit moederbord en de componenten die erop zitten. Daarnaast vind je in dit document ook een aantal voorbeelden van hoe je de componenten kan gebruiken.
+
+## Printed Circuit Board (PCB)
+
+Het moederbord dat jullie krijgen is een Printed Circuit Board (PCB). Dit is een bord waarop een aantal componenten zijn geplaatst. Deze componenten zijn met elkaar verbonden door middel van koperen sporen. Deze sporen zorgen ervoor dat de componenten met elkaar kunnen communiceren. Dit zorgt ervoor dat je geen losse draden hoeft te gebruiken om de componenten met elkaar te verbinden, zoals je misschien wel gewend bent van de breadboard.
+
+![3d model](/assets/game-controller-3d-model.png){: style="max-width: 100%;"}
+
+## Ontwerp
+
+Bij het ontwerp van de PCB is er rekening gehouden met vooral drukknoppen die op strategische wijze zijn geplaatst om ervoor te zorgen dat je veel voorkomende spellen zou kunnen aansturen. Voor elke drukknop is er ruimte voor een weerstand.
+
+Dan heb je ook de mogelijkheid om een LED aan te sluiten, deze zouden jullie bijvoorbeeld kunnen gebruiken om een status door te geven. Om deze LED goed te kunnen gebruiken is er ook ruimte voor een voorschakelweerstand.
+
+Dan is er aan één kant een rij van pin-headers opgenomen, deze staan in een hoek van 90 graden, zodat je hier een kabel kan aansluiten zonder dat deze in de weg komt te staan van de andere componenten.
+
+Om ervoor te zorgen dat je het PCB ergens in vast kan monteren, of misschien wel om iets te bevestigen aan de PCB, vind je 2 schroefgaten aan de bovenkant van het PCB.
+
+## Aansluitschema
+
+In het aansluitschema is rekening gehouden met de volgende componenten:
+
+| Naam | Omschrijving |
+| --- | ----------- |
+| SW1 | Drukknop #1 (pinheader B1) |
+| SW2 | Drukknop #2 (pinheader B2) |
+| SW3 | Drukknop #3 (pinheader B3) |
+| SW4 | Drukknop #4 (pinheader B4) |
+| SW5 | Drukknop #5 (pinheader B5) |
+| SW6 | Drukknop #6 (pinheader B6) |
+| SW7 | Drukknop #7 (pinheader B7) |
+| D1 | LED (pinheader L1) |
+| Pin-header | B1-7, L1, 3.3V, GND |
+| H1 | Schroefgat #1 |
+| H2 | Schroefgat #2 |
+
+Het aansluitschema van het PCB is als volgt:
+
+![schematic](/assets/game-controller-schematic.png){: style="max-width: 100%;"}
+
+## PCB layout
+
+De layout van het PCB is als volgt:
+
+![pcb](/assets/game-controller-pcb.png){: style="max-width: 100%;"}
+
+
+
+{{ mdocotion_header('/assets/headers/game_controller_pcbs2.jpg') }}

docs/opdracht/links.md

@@ -0,0 +1,29 @@
+# Links
+
+Op deze pagina vind je een overzicht van handige links die van pas kunnen komen bij het maken van de opdracht.
+
+## Project management
+
+- [Knowledgebase: Git](https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/manage_and_control/git/0_git/)
+    - Bij een project waar je te maken hebt met teamgenoten is het goed gebruik maken van Git alleen maar belangrijker.
+
+## Programmeren
+
+- [Knowledgebase: HTML](https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/talen/declaratieve_talen/html/)
+- [Knowledgebase: CSS](https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/talen/declaratieve_talen/css/)
+- [Knowledgebase: Basis principes](https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/basis_principes/0_basis_principes/)
+
+## Libraries
+
+- [Knowledgebase: Javascript: P5](https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/platformen/p5.js/0_p5js/)
+- [Arduino: ArduinoJSON](https://arduinojson.org/)
+- [Arduino: WebSockets](https://www.arduino.cc/reference/en/libraries/websockets/)
+- [Python: Websockets](https://websockets.readthedocs.io/en/stable/intro/index.html)
+
+
+## Overige
+
+- [Localtunnel](https://theboroer.github.io/localtunnel-www/)
+    - Wanneer je een server draait op het netwerk van de HvA mag je niet zomaar van buitenaf verbinding maken. Met localtunnel kun je een tunnel maken naar een publieke URL. Zo kun je toch van buitenaf verbinding maken met je server.
+- [Oege](https://oege.ie.hva.nl/)
+    - Oege is onze eigen cloud omgeving waar jij als HBO-ICT student een MySQL database kan krijgen en SSH toegang tot een Linux server.

docs/opdracht/omschrijving.md

@@ -0,0 +1,53 @@
+# Opdracht omschrijving
+
+## Context
+
+Dit is het project voor Technische Informatica in blok 2, in het studiejaar 2023 - 2024. In het eerste blok heb je gewerkt aan een Climate Measuring Box om zelf metingen te verrichten en deze vervolgens te visualiseren op een webpagina. In dit blok ga je werken aan het project Game Controller, hiervoor maak je gebruik van de kennis die je in blok 1 hebt opgedaan en ga je aan de slag om nieuwe kennis op te doen.
+
+Voor dit project ga je aan de slag met het bouwen van een website (je game console), het bouwen van een embedded systeem (je controller) en een database (voor de highscores).
+
+## Opdracht
+
+Op de open dag willen we studiekiezers, jongeren die een studiekeuze moeten maken, laten zien wat studenten HBO-ICT al kunnen maken in het begin van hun opleiding. Studiekiezers lopen rond en kunnen bij verschillende stands een kijkje nemen. 
+
+![open_dag](open_dag.png)
+
+Alleen kijken is niet genoeg, we willen ze ook iets laten doen. Daarom is de opdracht voor jullie:
+
+> Maak een game die de studiekiezer makkelijk kan spelen op de open dag. Laat de studiekiezer de game spelen met je eigen, zelfgemaakte gamecontroller.
+
+Stel je voor dat er op de 5e verdieping overal grote schermen staan waar draadloze gamecontrollers voor zijn gepositioneerd. Een bezoeker loopt er op af, pakt de controller en kan gelijk gaan spelen. Als de game afgelopen is kan de bezoeker zijn naam invullen en wordt de highscore opgeslagen in een database. De bezoeker kan thuis op een website de highscores bekijken.
+
+Om dit voor elkaar te krijgen zullen de games makkelijk moeten kunnen worden klaargezet door het personeel dat op de open dag aanwezig is.
+
+## Vereisten
+
+### Het product
+
+- De game moet makkelijk te bedienen en te begrijpen zijn voor de speler.
+- De medewerkers van de open dag moeten de game makkelijk kunnen klaarzetten en opstarten.
+- Na het spelen van de game moeten achievements en highscores worden opgeslagen in een database.
+- De speler moet de achievements en highscores thuis kunnen bekijken op een webpagina.
+
+!!! tip "Tip: Simpele Game Mechanics"
+
+    Om de game simpel te houden zullen de input mogelijkheden beperkt moeten zijn. Gebruik zo min mogelijk knoppen. Om je te helpen bij het bedenken van de game mechanics, hieronder een lijst met mogelijke game mechanics.
+
+    - Het drukken van een knop op een specifiek tijdstip.
+    - Het drukken van een knop op een specifiek tijdsinterval.
+    - Het drukken van een knop op een specifiek tijdsinterval, waarbij de interval steeds korter wordt.
+    - Het drukken van een knop op een specifiek tijdsinterval, waarbij de interval steeds langer wordt.
+    - Hoe verder je in het spel zit, hoe sneller je moet reageren.
+    - Het indrukken van de knop en loslaten op een specifiek tijdstip.
+        - Opladen; bijvoorbeeld krachtiger, harder, sneller, ...
+        - Afvuren; bijvoorbeeld schieten, springen, ...
+    - Het herhaarlijk indrukken van een knop.
+        - Bijvoorbeeld om te rennen, springen, ...
+
+## Techniek
+
+- de game wordt gespeeld vanuit een webpagina
+- de game is geprogrammeerd in JavaScript
+- p5.js wordt gebruikt voor het tekenen van de game
+
+{{ mdocotion_header('https://images.unsplash.com/photo-1586892477838-2b96e85e0f96?q=80&w=2059&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') }}

mkdocs.yml

@@ -0,0 +1,43 @@
+site_name: TI Portfolio Project Game-controller
+site_description: HBO-ICT Technische Informatica Portfolio
+site_author: HBO-ICT
+copyright: Copyright 2023 Hogeschool van Amsterdam
+
+theme:
+    name: material
+    custom_dir: mdocotion/
+    logo: assets/controller-icon.svg
+    favicon: assets/controller-icon.svg
+    features:
+        - navigation.sections
+        - content.tabs.link
+
+plugins:
+    - search
+    - mermaid2
+    - awesome-pages
+    - mkdocs-video
+    - section-index
+    - autolinks
+    - macros:
+          modules: [mkdocs_macros_mdocotion]
+
+markdown_extensions:
+    - attr_list
+    - admonition
+    - pymdownx.details
+    - md_in_html
+    - fenced_code
+    - pymdownx.highlight:
+          linenums: true
+          use_pygments: true
+    - pymdownx.inlinehilite
+    - pymdownx.snippets
+    - pymdownx.tasklist:
+          custom_checkbox: true
+          clickable_checkbox: true
+    - pymdownx.superfences:
+          custom_fences:
+                - name: mermaid
+                  class: mermaid
+                  format: !!python/name:pymdownx.superfences.fence_code_format

requirements.txt

@@ -0,0 +1,10 @@
+mkdocs ~= 1.4.0
+Jinja2==3.1.0
+mkdocs-material ~= 9.1.12
+mkdocs-video ~= 1.3
+mkdocs-mermaid2-plugin ~= 0.6.0
+mkdocs-macros-plugin ~= 0.7.0
+mkdocs-awesome-pages-plugin ~= 2.8.0
+mkdocs-autolinks-plugin ~= 0.6.0
+mkdocs-section-index ~= 0.3.5
+gitpython ~= 3.1.27

web/game.js

@@ -0,0 +1,18 @@
+
+// the function setup() is called once when the page is loaded
+function setup(){
+    // create a canvas element and append it to the body
+    createCanvas(800, 600);    
+    
+    // disable the outline of shapes
+    noStroke();
+}
+
+// the function draw() is called every frame
+function draw(){
+    // clear the background with a transparent black color
+    background(0,0,0,10);
+
+    // draw a circle at the mouse position
+    circle(mouseX, mouseY, 50);
+}

web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Open Dag Game</title>
+
+    <!-- support p5-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
+    <script src="game.js"></script>
+</head>
+<body>
+    
+</body>
+</html>