---
tags: mstu5003, doodle 4, Fa2023, collaboration, HTML, CSS, JS
---

# Doodle 4
## Web Toy: Dungeon Crawl

collaboration by Giles (section-001) & Mel (section-010)

---
:::success
## Project Iterations
* [PROTOTYPE (ConceptBoard)](https://app.conceptboard.com/board/71q2-dayn-gy18-zo6r-6mq7)
* [v1 Main base](https://codepen.io/gb2839/collab/oNmwpWV)
* [v2 START page style](https://codepen.io/mdd2167/pen/yLZzmKa)
* [v3 BATTLE, POST-BATTLE, FINAL text style](https://codepen.io/mdd2167/pen/rNPpKGY)
* [v4.1 add monsters & background](https://codepen.io/mdd2167/pen/RwvQWaP)
* [v4.2 Bug fix: hide monsters](https://codepen.io/mdd2167/pen/oNmEXeP?editors=0110)
* [v4.3 monster placement](https://codepen.io/mdd2167/pen/mdvXVEq)
* [v5 FINAL image tinker](https://codepen.io/mdd2167/pen/OJdQMGd?editors=1010)
note: final image tinker unsuccessful.
:::
---
## Further Ideas
Brainstorm of future iterations, if we had more time:
* backgrounds change for different scenes
* images reveal/hide with FINAL page
* Images appear to reflect loot, gold, damage
* health & loot icons change to reflect stats *(for example 3 health dispays as ❤️‍🩹❤️‍🩹❤️‍🩹)*
* Sound effects

---
## Sources
* **Inspiration**
*Text-based video games, e.g.*
* Colossal Cave
* Zork Dungeon Master
* **Images**
* **Characters**
* [Kobold](https://2e.aonprd.com/Images/Ancestries/Kobold02.png)
* [Goblin](https://2e.aonprd.com/Images/Ancestries/Goblin02.png)
* [Troll](https://2e.aonprd.com/Images/Monsters/Troll_JotundTroll.png)
* [Displacer beast](https://assets.beardsorcery.com/assets/build/assets/displacer-beast-with-bottle-c66c48c5.png)
* [gnome](https://2e.aonprd.com/Images/Ancestries/Gnome01.png)
* [shroomling](https://steamcommunity.com/sharedfiles/filedetails/?id=156857867)
* [bandit](https://2e.aonprd.com/Images/NPCs/Criminal_Bandit.png)
* [Hero](https://www.furaffinity.net/view/27451607/)
* **Tools**
* [theNounProject](https://thenounproject.com/icon/)
* **Backgrounds**
* [Dungeon](https://cdna.artstation.com/p/assets/images/images/066/304/670/large/ian-campbell-highresscreenshot00012-2.jpg?1692599441)
* **NOT used (forest backgrounds)**
* [~~Beginning~~](https://images.alphacoders.com/678/678464.jpg)
* [~~Battle~~](https://cdn.openart.ai/stable_diffusion/0b81c03db4105bca42c1a3d823a38328b151babc_2000x2000.webp)
* [~~Post-Battle~~](https://mcdn.wallpapersafari.com/medium/52/63/2AlUyz.jpg)
* [~~Final - Lose~~](https://wallpaper.dog/large/10813738.jpg)
* [~~Final - Win~~](https://wallpapercave.com/wp/wp7431386.jpg)

---
:::info
## [Doodle Instructions](https://docs.google.com/document/d/1ChtmuB0USShu6jiNQz6jo5uGTIcWSzpm-nTviX0jMCY/edit)

##### CHECKLIST
- [x] game
- [x] objects
- [x] arrays
- [x] ineractive
- [x] events (onclick)
- [x] handlers (JS)
- [x] manipulate DOM
- [x] change channel
- [x] change image
- [x] queryselector
- [x] Include inspiration (cite)
- [x] cross-reference HackMD & CodePen

:::
---