Link to HTML 5 Game – > SCPFoundation Level 1 – Pres

Time Spent

I’d say about 1/3 of this was spent following the tutorial and the rest was spent stripping it back down and building it back up into what I imagined.

I had a week off work and was able to spend a large chunk of my week uninterrupted, cranking out the code for this project.

The Inspiration

The SCP foundation is an online wiki that caught my attention a few months ago.

I was binge watching Youtube and came across a playlist that just sucked me into a rabbit hole of sci fi writing. Here’s a few.

The few favourite Animes that I ever watched have all ended and this was a nice break away from the how to / business / mental models books that I have…..that’s all I have.

Our module ends this year with the presentation of a browser rendered game and I immediately felt anxiety.

The Technical Details

During the bootcamp we went over a few ways to make a HTML game using canvas and OOP.

Ever since starting with JS I’ve always read that avoiding OOP is not going to negatively impact the way you write code, leaning more towards a functional programming style, which suits me.

However in the bootcamp, these games are all OOP and it absolutely killed me.

I can safely say that I really don’t enjoy OOP, but here we are.

I needed to dive deeper into a more in depth tutorial to get a better understanding of how this type of game would fit together.

I came across Drew Conley’s channel and followed along with his tutorial up until the point where I felt like I had all the functionality I’d need in place.

He builds robust character movement classes and map object generating classes that looked like a foreign language to me at first.

But as you might see, this foundation gave me something solid to work with and build out my own game.

The Artwork

Drew’s pizza legends is focus on small rooms that have battle zones and doorways to move to new maps. I wanted to focus on a labyrinth, so I took his artwork and blew it up into my own using Affinity Designer.

I could see that I’d need different versions of walls that I could just copy and paste in order to quickly create layouts.

This took a little longer than I expected because I didn’t plan anything. I was just free-styling.

I used to want to be an Illustrator / Animator so I can appreciate tiny details when I see them. Drew’s pixel are has tiny highlights on the walls to show the change of angle from vertical to horizontal.

I didn’t even notice this at first, as I couldn’t understand why my map felt so flat. Adding these tiny details made things take longer but I’m glad with the outcome.

Grids

During the tutorial Drew starts mapping out obstacles on his map and hard codes these values manually…..but he never takes care of the perimeter (at least not yet)…so I ended up writing a 300+ line file that included every wall in my map. This took a long time, but I haven’t sat down and thought of a way to turn that into a function.

I got a bit carried away with adding in details to make this map feel a bit more morbid the further that you move into it. I now have a new appreciation for just how involved it is to code the simplest of games.

There was one technique that I loved, where the map has a bottom layer that is drawn on canvas first, then the characters and objects and lastly the upper level….this includes the top of doorways and things over the character’s head.

This simple trick gives the map a real sense of depth.

The only disappointment is that I realised that text is not readable when not drawn pixel perfect and blown up. It just becomes a blur. However if I had used a proper pixel art drawing program, I wouldn’t have run into this issue.

The final result of my map is about 4/5 times bigger than Drew’s with bookshelves that hide clues for the game, NPC’s and parts of the floor that end up in instant death.

Character Sprite Sheets

I literally don’t have time to sit and spend hours pouring over character design. I’d love to but the main goal is to have something complete pretty quickly.

I ended up just taking one of Drew’s NPC sprite sheets and drawing a Scientist jacket over him with some glasses.

This was enough to make him stand out compared to the others on the screen and save me roughly a whole day

In the movement class, depending on the direction of the character and if it is moving or not, the sprite sheet is rapidly cropped and displays the appropriate image. This gives the illusion of animation.

Winning and Losing

Depending on who you are at the SCP foundation, there may not be a choice. If you’re one of the scientists (luckily we are) we have the opportunity to figure out this mess.

SCP-096’s containment has been unlocked. This dude will put anybody that sees his face in a coffin and that’s why we’re here.

We need to close the containment chamber before he starts wandering around the facility.

You need to collect a few simple clues from books / notebooks and NPCs in order to figure out the old Scientist’s password.

We also have a time limit before those doors are stuck open.

I’ll leave it up to you to find out what happens when we don’t get them closed in time.

Generating Anxiety

Sound:
I added in a looping audio of creepy whispering to add a level of unease within the game. You can’t quite hear what they’re saying because I layered two audios to play at the same time.

Problems

I noticed that when refreshing the game, the sound in the background turned itself off, even though it was on auto play and looping. Turns out Google turned off this autoplay feature to not piss of users….which is good.

The user needs to interact with the page first, before autoplay music is allowed to be triggered.

Placing an event on the first tile the player walks over seemed to fix this. There is no music until the player has pressed enter to clear the intro text and used the keyboard to move down two steps.

Deadlines

You may notice the clock is counting down. Looking more closely you’ll see it’s moving ever so slightly faster than 1 second at a time. It’s only a 20millisecond difference but over 4 minutes it goes down pretty fast.

Expanding on this Game

I’m not sure making games is for me. It’s actually easier for me to build out applications, shuttle data around and display things on the front end. This simple game started getting a little to big for me.

Maybe just a lack of experience, but I would need to start writing down docs on what classes do what as I can guarantee within one week I’m going to forget what class is calling another.

You can play the game here