---
# System prepended metadata

title: 'Doodle 4: WebToy (Dungeon Crawl)'

---

---
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

:::
---

