Tell me ya’ll recognize this

So I’m about to show my age, but who remembers Alfy.com?

It was the late 90s early 00s and internet games were all the buzz. I’m sure our summer routines were all pretty similar, at some point you make it to the library, plop down in front of a computer and stay until closing playing games. Where are they now? Where are all my childhood games that I loved so much and would spend hours playing? As much as technology is awesome and things are always changing/improving, I can’t help but think, “if it ain’t broke don’t fix it.” Sadly, after 10+ years of developing, new ideas rising, and discarding the old; I sit here with my 2018 MacBook Air, using Google Chrome, and not able to play my once cherished games.

Can we get back them back, what if we can recreate these games? Well, it seems like one of my faves have been, in 2020 Bruhmentium INC recreated PANG. Down to the sounds, animations, everything. Being a beginner, looking at this code, it all seems like gibberish to me, but it still gives me hope that it is indeed possible to bring back these classics.

WillyTrek19/PANG

This is a bit advanced for me, but let’s see if we can create a simple quick game. Ready? Let’s go! First create your three files, index.html, style.css, & script.js. Starting with the HTML file let’s create our DOCTYPE declaration and link our CSS & JS files. Next in the body tag let us create three divs, the first with an id of ‘game’ will hold the other two. The other two divs will have the ids of ‘character’ and ‘block’. It should look like this:

Onto styling, in this file, we will be adding a bit of code. We will be creating the character and the block that it will jump over. The CSS file will also take care of the animation part. Here is where we are so far:

On or “game” div we create a black box

Here we are creating our character and block, the position property takes care of placing each object in the bottom corners of the box. Here is how things are looking right now:

Our style file is all set now. If you notice, we added an animate class, that is so we can now use our javascript file to have a function that calls the animation so that it doesn’t run on a continuous loop. Here is what this is supposed to look like now:

Jumping in real quick, the definition and usage of ‘@keyframes’ is the property that specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Finally, let’s tackle the javascript file. Here we will be doing the backend work, the brains of it all. We first grab our ‘character’ and ‘block’ ids by using document.getElementById and passing in the names. Our first function jump(), deals with the animation, before we had it where the animation only ran once, this obviously is an issue since we need the character to continuously jump over the block multiple times. In order to fix this, we need the ‘animate’ class to disappear and reappear, to avoid the class being added over and over, we create an ‘if statement’ that checks that if the class has already been added, we don’t need to add it again. This sounds really confusing, but basically, if the class already exists, we don’t create it again. This is how we are able to go back and forth. Lastly, we want to create a hit detection that lets us know if we didn’t successfully jump over the block and have died. Game over. Our javascript file should look like this:

The last step is to update the HTML file with an ‘onclick’ so that we can actually activate the jump and play the game. Just like this:

An addEventListener would work as well

That’s it! We’re all done. Let’s take a look at what the completed game looks like in the browser.

Lost immediately

Line 22 updates the score. Did a little better this time.

We did it! We created a simple game, that reminds me of the old school JAVA and HTML ones I use to play. This hits me right in the feels. Here is a walkthrough of the project, explained exquisitely.

Beat0154/easiest-game-ever

A personal goal of mine is after I have graduated school and gained the experience is to recreate my absolute favorite-est (this is a word today lol) online game ever….Super Kid. I was able to find a walkthrough of the game, I was cheesing the entire time. The ultimate nostalgia. I will include it here:

Resources:

Playing a 90s web game in the 20s - The Roohr Way

I need help finding an old, old browser game.