Embeddable virtual pet in javascript

What is it?

This is just a little project I worked on. It is a virtual pet game you can add to your website. It's basically like GifyPet, a virtual pet you can embed to your website using HTML iframes with the goal of making it have more features, more customization and making it open source However, version 1 will only contain a few features, but I definitely will add more in later versions.

How it works

The whole thing uses JavaScript, without any libraries or frameworks. Before this, I've only ever did a minuscule amount of JavaScript for this site and others I worked on, so I basically had no experience in JavaScript. There maybe some terrible chunks of spaghetti code that might make a professional JavaScript programmer scream in horror.

Surprisingly, this went very well, I started on April 22, and it only took me a few days of programming to complete the first version, and I'm very happy with how it turned out. On the generator page, you can customize your pet anyway you want, the iframe borders, colors, background and of course your pet. The iframe source obviously contains the HTML code with a JavaScript file linked to it. All the customization data that was entered by the user is then stored in the URL. The JavaScript that was linked in the iframe HTML reads the data in the URL and uses that data to show you your customized virtual pet.

How to make a pet

It's pretty easy to make your own pet. Go to the generator here. I will explain everything here. First category is the iframe border. Everything in this category will only change the border around the frame. If you want to further customize the border, you can edit the border style code that was generated.

Next, we have the pet details category. Everything in here will change the look of the pet. You can set the birth date of your pet and name. To use an image as a pet, right click the image, and press 'copy image link' and paste it in the 'pet image URL'. You can set the size of your pet by using the slider, and if you want to put your pet in a specific position, check the 'use custom pet positioning' box and adjust the sliders.

Next category is the background. You can use a solid color as a background, or if you check the 'use background image instead' box, the background will be set to the URL that was entered. You can choose the mode of how the background is displayed, the default is repeated, the background will repeat it self, or you can choose stretched, the background will be stretched to fit. You can also pick custom, which will allow you to freely position and scale the background.

Last category is the interface. You can change the interface color, or you can use an image instead. You can also change outline color, text color, button color, button outline color and button text color.

Features

Lets go over the features. Currently in version 1, there are only a few features, as I wanted to release this as soon as possible. The features include: hunger, feeding system, mood system, money system and a death system. Be sure to feed your pet, or it will die. You can also play with your pet and pet your pet to increase it's mood.

Future plans

I plan on adding a few more features to this and make it even more customizable. I may make more embeddable things for websites, as I had a lot of fun making this little project.

Back