phianova / mudlark

JavaScript, HTML Canvas and CSS game about treasure hunting in a riverbed

phianova.github.io

Hi! This is the code for a short game I built, to support my application to the Founders and Coders programme. It is built entirely in HTML, CSS and vanilla JS as per the brief of the application.

It was the first game I had ever built, as part of the first website I ever built.

Building the game was a real challenge for me. I had a clear idea of the story and what I wanted the game to look and feel like, but starting from scratch initially felt quite intimidating. I started by looking a couple of tutorials to get the gist of the standard elements needed to build a game. I initially followed some of this tutorial: https://www.codewizardshq.com/javascript-games/ to get an idea of how to set up a game environment using HTML Canvas. I also used this guide: https://www.w3schools.com/graphics/game_intro.asp to help me understand the capabilities of the canvas and how to go about designing standard game elements. I later borrowed the idea of a "toggleScreen()" function from this video: https://www.youtube.com/watch?v=FwLMz7jMRac which I found really helpful as I wanted my game to have a clear story. As I went along, I decided between different ways of implementing game elements that I had seen, and refined my code to reflect my game's actual needs. The first thing I did was code the movement of the player and the dog, and determine what happened when they collided. I then focused on my hidden items, and worked out how to randomly assign both their position and their type. I then created my starting screens, and used the same method to implement the screens that display when the items are found. Then, I created the scoring system and determined the conditions to win the game and what happened when that was achieved. I decided the game needed a tiny bit more of a challenging/competitive element so I added a timer. If I had had more time, I would have added further levels to the game, with additional dogs to make it more difficult. I also had planned to try and include a second area which the player could access via the leftmost border of the screen to make it harder to find the hidden items. The "tide coming in" screen that displays once the game has ended was also in my initial plan! I wanted to have that happen during the game, cutting off some of the game area to make it more difficult to find the items. I may make these changes at a later date! All of the code for the game is contained in the linked repository: https://github.com/phianova/mudlark/

mudlark's Issues

import old code files and rejig for just game

update formatting